Nuxt.js content using project components error

Problem Description#

Recently, while using the Nuxt.js Content Module, I found that it supports Vue components written in the project. The relevant documentation can be referenced here. I tried to add the following component to the page, which is located at ~/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
    // Documentation reference: https://artplayer.org/document/start/option.html
    art_instance.value = new ArtPlayer({
        // Specify the container element for the player
        container: art_ref.value,
        // Set the video URL
        url: props.url,
        // Enable auto mini mode
        autoMini: true,
        // Enable auto resizing
        autoSize: true,
        // Enable fullscreen mode
        fullscreen: true,
        // Use server-side rendering
        // useSSR: true,
        // Enable fast forward feature
        fastForward: true,
        // Lock the player interface
        lock: true
    })
})
</script>

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

Corresponding Content

---
title: 'Title'
description: 'Brief description'
---
::xxx-video-area{url="Video link"}
Video description
::

I encountered the error If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. after starting, and later found that it might be due to not setting global components. The documentation mentions:

Components that are used in Markdown have to be marked as global in your Nuxt app if you don't use the components/content/ directory, visit Nuxt 3 docs to learn more about it.
If the components used in the Nuxt application are not placed in the components/content/ directory, they need to be marked as global components.

Comparing, my component is located in ~/components/XXX/, not in ~/components/content/, so it cannot access that component.

Solution#

Option 1: Move the Component to `~/components/content/` Directory#

If your component is only used for content pages, you can move it to the ~/components/content/ directory, so the Nuxt Content module will automatically recognize and load these components.

Option 2: Rename the Component to `VideoArea.global.vue`#

Referencing the official documentation, we can achieve global status by changing the file extension.

Option 3: Set All Components as Global by Default#

In nuxt.config.ts, we need to add the components option and set it to global.

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

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

  modules: ['@nuxt/content'],

  // To adapt to Nuxt content, global registration is required
  // Note that the following part does not need to be changed if you are different from me
  components: {
    global: true,
    dirs: ['~/components']
  },
})