CODEWITHSUNDEEP
javascriptnuxt.jsvuejs3nuxt3.js
Thomas
Thomas

Reputation: 699

nuxt content markdown page using my own components?

I'm trying to create my own blog page using nuxt content for the benefits of static site generation. On styling i used tailwindcss so i made my own components to reuse the css styles on the whole page.

When i tried to add them to a nuxt content markdown page in the documentation it states that the used component should be registerd global and i think there i fail somehow.

I've created a blank project to recreate the problem using

npx nuxi init content-blog -t content

i used

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

but newer versions resulted in the same issue

and added the following component to the directory ~/components/at/home

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

in the generated index.md i've added at the bottom

::at-home-h1
YES
::

To register the component globaly i've added a plugin in the directory ~/plugins

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

and registerd it in the nuxt.config.ts

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

but on executing nuxt and watching the source of the site i see:

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

and get the warning in the command line

[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.

i've also tried to add components: true in the nuxt.config.ts without success

See the complete source executable on https://stackblitz.com/edit/nuxt-starter-uzn4hz

I would be grateful for hints on solving this and/or even a more elegant solution on how to match the markdown transformation to my own components / tailwindcss.

Otherwise i've to put the whole md content within a div and format it in the good old css way. :)

Upvotes: 0

Views: 987

Answers (1)

Angelo
Angelo

Reputation: 11

The component must be located in ~/components/content/... or you can add it manually to nuxt.config.

Upvotes: 1

Related Questions