如何从Vue 3插件创建Nuxt 3插件?(vue 3-markdown-it)

dgjrabp2  于 2022-12-19  发布在  Vue.js
关注(0)|答案(1)|浏览(315)

我是Nuxt的新手,正在尝试将Vue插件vue3-markdown-it转换为Nuxt 3插件,但收到以下错误:
[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.
我做错了什么?
Nuxt 3插件文档

// 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>
g52tjvyc

g52tjvyc1#

我在不同的插件上遇到了类似的问题。我用组件代替插件解决了这个问题。

  • 在components文件夹下创建一个新文件(Markdown.vue)。
  • 在此文件中添加降价代码:
<template>
  <Markdown :source="content" />
</template>

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

defineProps({
  content: { type: any }
});
</script>
  • 您可以自定义此代码。*
  • 删除插件文件(md-plugin.client.ts)

现在<Markdown :source="content" />将看到我们生成的Markdown组件。

相关问题