issue with vuetify in md files

[Barbapapazes]

Version

@nuxt/content: 1.4.1
nuxt: 2.13.2
devDependancies
@nuxtjs/vuetify:

Steps to reproduce

• add vuetify to your project
• add components from vuetify in md files

What is Expected?

I expected that the component, like my custom component works in production.

What is actually happening?

In dev mode, vuetify components are transform to html but in production mode, vuetify components are not transform.

md file

production

development

[mathe42]

You have to explicitly import your vuetify components into your component.

the vuetify Loader trys to get the component while compiling but doesn't check the .md files.

Your Options:

1. Disable Vuetify Treeshaking
2. import used Vuetify-Components (only when they are used in .md files)

[Barbapapazes]

ok, nice to know it ! In fact, I doesn't think about theeshaking, which is enable by default in production (docs of @nuxt/vuetify)

After importing components, it works, thanks.

import { VRow, VCol } from 'vuetify/lib/components/VGrid'

export default {
  components: {
    VRow,
    VCol,
  },

[dmnsea]

@mathe42 @Barbapapazes can you describe more detailed about your "second way" about importing components directly?

In my case used component. So:

<script>
// I'm importing VAlert component
import VAlert from 'vuetify/lib/components/VAlert'

// I'm adding it to components of vue page and disable eslint for this line just to try
components: {
    // eslint-disable-next-line vue/no-unused-components
    VAlert
  },
</script>

What have I to do next?
I use v-alert instead of VAlert as said in @nuxt/content docs (in kebab-case) and as a result I got error in development mode(nuxt dev)

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Or there's no "two ways" and import of components that I need is working with disabled treeshaking only?

[mathe42]

I think your code should work... 🤔 but you can import the component directly from vuetify/lib but that should be the same

[dmnsea]

@mathe42 how can I correctly disable treeshaking? (Just to try if it will help me)

but you can import the component directly

Sorry for so stupid question, but what do you mean here?

[mathe42]

1. In Production YOU DON'T want to disable treeshaking. Just add the Component global:

// I'm importing VAlert component
import { VAlert } from 'vuetify/lib'

Vue.component('VAlert', VAlert)

should work.

2. In the code you see I import from vuetify/lib no need for the full path. (That is what I want to tell you :D). Not a native english speeker so might be on my end that the information got lost 👍

[dmnsea]

I guess I need also import Vue from 'vue' before registering component? Because VSCode says 'Vue' is not defined.
UPD: yes I need that, finaly alert element works now :)

@mathe42 Thank you :) Also you said before

the vuetify Loader trys to get the component while compiling but doesn't check the .md files.

Does this mean that bug related to Vuetify itself(vuetify-loader)?

Also does this global component adding affect other pages? Or it's scoped for the page where I added it? I'm not a native english speaker too, so I'm not sure how to describe my question more correctly :c

[mathe42]

No. vuetify-loader runs at build but md files arey parsed at runtime so there is no way to implement that.

Adding VAlert is no problem and doesn't effect other components. (In 99.9%)

[dmnsea]

Finaly I have

import Vue from 'vue'
import { VAlert } from 'vuetify/lib'

Vue.component('VAlert', VAlert)

And problem solved for nuxt generate

But is there any way to make this part of code runs only when nuxt generate? Because if I will not comment this code and use nuxt dev, I'm getting Unexpected token 'export'