nuxt内容降价页面使用我自己的组件？

Question

我正在尝试使用 nuxt 内容创建自己的博客页面，以获得静态网站生成的好处。在样式方面，我使用了 tailwindcss，所以我制作了自己的组件来在整个页面上重用 css 样式。

当我尝试将它们添加到文档中的 nuxt 内容降价页面时，它指出所使用的组件应该全局注册，我认为我失败了。

我创建了一个空白项目来使用

重新创建问题

npx nuxi init content-blog -t content

我用过

"@nuxt/content": "^2.4.3",
"nuxt": "^3.2.2"

但较新的版本导致了同样的问题

并将以下组件添加到目录中 ~/组件/在/家

<template>
    It Worked!
    <h1>
        <ContentSlot :use="$slots.default" unwrap="p" />
    </h1>
</template>
<script>
  export default {
    props: {
    },
  }
</script>

在生成的index.md中，我在底部添加了

::at-home-h1
YES
::

为了全局注册组件，我在目录 ~/plugins

中添加了一个插件

import { createApp } from 'vue'
import { AtHomeH1 } from '~/components/at/home/h1.vue'
export default defineNuxtPlugin(nuxtApp => {
    const app = createApp({})
    app.component('AtHomeH1', AtHomeH1)
})

并将其注册到 nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  plugins: [
    { src: '~/plugins/component2content.js' }
  ]
})

但是在执行 nuxt 并观看网站的源代码时我看到：

<at-home-h1><p><!--[-->YES<!--]--></p></at-home-h1>

并在命令行中收到警告

[Vue warn]: Failed to resolve component: at-home-h1
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: AtHomeH1
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

我还尝试在 nuxt.config.ts 中添加 components: true 但没有成功

请参阅完整的源可执行文件https://stackblitz.com/edit/nuxt-starter-uzn4hz

我将不胜感激有关解决此问题的提示和/或什至关于如何将降价转换与我自己的组件/ tailwindcss 相匹配的更优雅的解决方案。

否则我必须将整个 md 内容放在 div 中并以良好的旧 css 方式对其进行格式化。 :)

Answer 1

该组件必须位于 ~/components/content/... 中，或者您可以手动将其添加到 nuxt.config