Nuxt.js コンテンツ使用プロジェクトコンポーネントエラー

問題の説明#

最近、Nuxt.js の Content モジュールを使用している際に、プロジェクト内で作成した Vue コンポーネントをサポートしていることに気付きました。関連するドキュメントはこちらを参照してください。
ページに以下のコンポーネントを追加しようとしました。このコンポーネントは~/components/XXX/VideoArea.vueにあります。

<script setup lang="ts">
import ArtPlayer from "artplayer"

const art_ref = ref<HTMLInputElement | null>(null)
const art_instance = ref<Artplayer | null>(null);

const props = defineProps<{ url: string }>()

onMounted(() => {
    if (!art_ref.value) return
    // ドキュメント参照： https://artplayer.org/document/start/option.html
    art_instance.value = new ArtPlayer({
        // プレーヤーのコンテナ要素を指定
        container: art_ref.value,
        // 動画の URL を設定
        url: props.url,
        // 自動ミニモードを有効にする
        autoMini: true,
        // 自動サイズ調整を有効にする
        autoSize: true,
        // フルスクリーンモードを有効にする
        fullscreen: true,
        // サーバーサイドレンダリングを使用
        // useSSR: true,
        // 早送り機能を有効にする
        fastForward: true,
        // プレーヤーインターフェースをロック
        lock: true
    })
})
</script>

<template>
    <div ref="art_ref" class="h-96 mr-auto">
        <slot></slot>
    </div>
</template>

対応するコンテンツ

---
title: 'タイトル'
description: '簡単な説明'
---
::xxx-video-area{url="動画リンク"}
動画の説明
::

起動後にエラー If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. が表示されました。その後、グローバルコンポーネントが設定されていない可能性があることに気付きました。ドキュメントには次のように記載されています：

Markdown で使用されるコンポーネントは、components/content/ ディレクトリを使用しない場合、Nuxt アプリでグローバルとしてマークする必要があります。詳細については Nuxt 3 ドキュメントを参照してください。
Nuxt アプリで使用されるコンポーネントが components/content/ ディレクトリに配置されていない場合は、グローバルコンポーネントとしてマークする必要があります。

私のコンポーネントは~/components/XXX/にあり、~/components/content/にはないため、そのコンポーネントにアクセスできません。

解決策#

解決策 1：コンポーネントを`~/components/content/`ディレクトリに移動する#

コンポーネントがコンテンツページ専用である場合、~/components/content/ディレクトリに移動することで、Nuxt Content モジュールがこれらのコンポーネントを自動的に認識して読み込むことができます。

解決策 2：コンポーネント名を`VideoArea.global.vue`に変更する#

公式ドキュメントを参考に、ファイルの拡張子を変更することでグローバル化の効果を得ることができます。

解決策 3：すべてのコンポーネントをデフォルトでグローバルに設定する#

nuxt.config.tsにコンポーネントオプションを追加し、グローバルに設定する必要があります。

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: ['@nuxt/content'],

  // Nuxt content に適応するためには全てグローバル登録が必要
  // 注意：下記の部分は、上記と異なる場合は変更する必要はありません
  components: {
    global: true,
    dirs: ['~/components']
  },
})