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/にはないため、アクセスできません。

解決策#

方案一：コンポーネントを`~/components/content/`ディレクトリに移動する#

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

方案二：コンポーネント名を`VideoArea.global.vue`に変更する#

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

方案三：すべてのコンポーネントをデフォルトでグローバルに設定する#

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']
  },
})