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. 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 the application. Later, I discovered that it might be due to not setting the global component. 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 this, 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 component options and set them as 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 Nuxt content, global registration is required
  // Note the section below; if yours is different from mine, no need to change it
  components: {
    global: true,
    dirs: ['~/components']
  },
})