Vuetify components are not fully rendered in markdown files (.md)

[jualoppaz]

Version

@nuxt/content: 1.11.1
nuxt: 2.14.12

Steps to reproduce

• add vuetify components in nuxt/content markdown files

What is Expected?

• All custom components are fully rendered

What is actually happening?

• Vuetify components are only partially rendered

Using v-card component outside the markdown file

As you can see, the main card styles are loaded, but tags are not fully rendered. Main v-card component is right rendered but v-card-title default classes are overwritten by the given ones.

Using v-card componente in the markdown file

In this case, no compontent is fully rendered. In this case you cannot see any card style around the text.

After reading the issue #221 I tried to import the used components in my vue page and adding the vuetify transpile option in nuxt.config.js file, but I didn't experiment any difference.

I could do this task in the past with other UI frameworks like Element UI, but I can't guess the reason this is not working with Vuetify framework. Does Vuetify require any custom config or do I must write my markdown code in another way?

Thank you so much.

[jualoppaz]

After perform some proofs of concept I think the problem is adding the class attribute in Vue components. If I replace the previous class attributes with style attributes containing the equivalent css rules all works fine.

It seems that adding classes in vue components inside markdown files avoid that attribute to be modified by javascript of Vuetify components. So internally are executed but the style are not loaded as some css classes are missing.

Is this a @nuxt/content bug that converts the class attribute into a permanent one? Or is this a known issue and I cannot use the class attribute in markdown files for custom vue components?

Thank you so much.

[jualoppaz]

Hi again!

By the moment I am using a workaround that doesn't require style attribute.

As the code <v-card elevation="2" class="my-3"> doesn't let the class attribute change with additional classes generated by javascript, I have my code working with dynamic class atribute like this: <v-card elevation="2" :class="{ 'my-3': true }">.

Is very tedious adding true expression for every custom class, but you can use all UI framework given classes by this way. Hope this way be useful for more users with the same issue like me.

[hamishjohnson]

For me, this doesn't occur in the dev build but occurs after nuxt generate

[dmnsea]

Meet the same problem when tried to use Vuetify components inside markdown.

@jualoppaz in my case (nuxt 2.14.12 & content 1.11.1) there is no partial rendering. Vuetify components doesn't rendered at all while generating.
On development server nuxt dev all components are fully rendered, i.e.
<v-btn>Button</v-btn> is transformed to

<button data-v-f58a9f50="" type="button" class="v-btn v-btn--contained theme--dark v-size--default">
  <span class="v-btn__content">
    Button
  </span>
</button>

But when I run nuxt generate I getting simple output <v-btn>Button</v-btn> as it was writen in md file. And the same result appears with any Vuetify component used

[dmnsea]

@magpiedigital look here dialog about that: #221 (comment)

Shortly: I tried to do what was described, got failed and asked how-to (cause I'm newbie). As result to make working <v-alert> component, I have to use this code inside nuxt page which will display markdown file:

import Vue from 'vue' // needed to use Vue.component() function
import { VAlert } from 'vuetify/lib' // component which I need to work in markdown
// import as many component as you need to use in markdown files and add them all
Vue.component('VAlert', VAlert) // adding component globally 

In that case nuxt generate works fine and Vuetify components are already rendered on on static. (v-alert was generated correctly)

But another problem appears - the code above raise error Unexpected token 'export' if you run nuxt dev. I can comment/uncomment this part of code when needed, but not sure if it's a good way. I guess somebody know better way, so created question on Stackoverflow about that.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.