Nuxt Content + Vuetify components = how to remove block of imports in template page which will render markdown content

Question

In my "personal page" project I'm using NuxtJS, with it's @nuxt/content module for content and Vuetify UI framework.

Recently found a problem: Vuetify component inside markdown files are not rendered when generating static site, but rendered correctly when running project in development mode. I've checked for issues in @nuxt/content about this problem and found 2 issues: #221 and #700

Mainly discussion was inside issue #221.

Shortly as I understand from issue: Vuetify loader doesn't check content of markdown files, that's why while running nuxt generate Vuetify components(that may be used in any component without import) are not rendered while used inside markdown files. At nuxt dev mode Vuetify component are rendered correctly because treeshake is disabled for development mode

Inside markdown file I used only one component - <v-alert>, so finaly solution was next:

import Vue from 'vue'
import { VAlert } from 'vuetify/lib'
Vue.component('VAlert', VAlert)

I need to use this code at page which will display markdown files content. With it nuxt generate result is what I want - Vuetify component successfully rendered if used inside markdown file.

But this code also bring one problem: if I running it with nuxt dev I'm getting error Unexpected token 'export' when I visit page that displays markdown with Vuetify components.

Finally the question is: How to remove these imports from page with template for showing markdown content? Probably something like "conditional import" (make these imports executed only when running nuxt generate) or anything else?

Of course I can comment/uncomment each time I run project in development mode, but I'm not sure it's the right way.

polo polo · Accepted Answer · 2021-04-28T04:24:32

I have wrapped each vuetify component, I've used in markdown, in my own version of it.

// my-markdown-alert.vue
<template>
  <v-alert v-bind="$attrs"><slot></slot></v-alert>
</template>

btw. the link a href="/my-file.zip" or its markdown counterpart [Link](/my-file.zip), if used for downloading a file from the same page, throws 404 page not found, in my nuxt + vuetify. After wrapping it in my-markdown-link, it works again.

<a v-bind="$attrs"><slot></slot></a>

The above provides only the one way binding. If you need to watch for events from the wrapper, please refer to the following answer.
https://stackoverflow.com/a/64824575

Nuxt Content + Vuetify components = how to remove block of imports in template page which will render markdown content

1 Answers