如何从 Vue 3 插件创建 Nuxt 3 插件？ (vue3-markdown-it)

Question

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>

Answer 1

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.

• Delete plugin file (md-plugin.client.ts)

Now <Markdown:source="content" /> will see our generated Markdown component. It worked me.