如何从VUE 3插件创建NUXT 3插件？（vue3-markdown-it）

发布于 2025-02-09 06:51:28 字数 934 浏览 0 评论 0原文

我是NUXT的新手，并且正在尝试将VUE插件vue3-markdown-it转换为NUXT 3插件，但是正在收到以下错误：

[VUE WARN]：未能解决：组件：MARKDOWN如果这是本机自定义元素，请确保通过CompilerOptions.iscustomelement.将其排除在组件分辨率中

。

// md-plugin.client.ts
import Markdown from 'vue3-markdown-it'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(Markdown)
})

// index.vue
<template>
    <main>
        <ClientOnly>
            <Markdown :source="content" />
        </ClientOnly>
    </main>
</template>

<script lang="ts" setup>
    const { find } = useStrapi4()
    const {
        data: {
            attributes: { content },
        },
    } = await find('homepage')
</script>

原文

I am new to Nuxt, and am attempting to turn the Vue plugin vue3-markdown-it into a Nuxt 3 plugin, but am receiving the following error:

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

What am I doing incorrectly?

Nuxt 3 Plugin Documentation

// md-plugin.client.ts
import Markdown from 'vue3-markdown-it'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(Markdown)
})

// index.vue
<template>
    <main>
        <ClientOnly>
            <Markdown :source="content" />
        </ClientOnly>
    </main>
</template>

<script lang="ts" setup>
    const { find } = useStrapi4()
    const {
        data: {
            attributes: { content },
        },
    } = await find('homepage')
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天气好吗我好吗 2025-02-16 06:51:28

我在不同的插件上也有类似的问题。我通过使用组件而不是插件解决了问题。

在组件文件夹（markdown.vue）下创建一个新文件。

在此文件中添加标记代码：

 ＆lt; template＆gt;
  ＆lt; markdown：source =“ content” /＆gt;
＆lt;/template＆gt;

＆lt; script lang =“ ts”设置＆gt;
从“ vue”导入{defineprops};
从“ vue3-markdown-it”导入降价；

DefineProps（{
  内容：{类型：任何}
}）;
＆lt;/script＆gt;

您可以自定义此代码。

删除插件文件（md-plugin.client.ts）

现在＆lt; markdown：source =“ content”/＆gt;将看到我们生成的 markdown component。它奏效了。

I had a similar problem on different plugin. I solved the problem by using component instead of plugin.

Create a new file under the components folder (Markdown.vue).

Add Markdown codes in this file:

<template>
  <Markdown :source="content" />
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import Markdown from 'vue3-markdown-it';

defineProps({
  content: { type: any }
});
</script>

You can customize this code.