1

私の「個人用ページ」プロジェクトでは@nuxt/content、コンテンツ用のモジュールと Vuetify UI フレームワークを備えた NuxtJS を使用しています。

最近発見された問題: マークダウン ファイル内の Vuetify コンポーネントは、静的サイトの生成時にレンダリングされませんが、開発モードでプロジェクトを実行すると正しくレンダリングされます。この問題に関する@nuxt/contentの問題を確認したところ、 #221#700 の2 つの問題が見つかりました。

主な議論はissue #221内でした。

問題からすぐに理解できるように、Vuetifyローダーはマークダウンファイルのコンテンツをチェックしません。そのため、nuxt generateVuetifyコンポーネント(インポートなしで任意のコンポーネントで使用される可能性がある)を実行している間、マークダウンファイル内で使用されている間はレンダリングされません。nuxt dev開発モードでは Treeshake が無効になっているため、Vuetify コンポーネントは正しくレンダリングされます。

マークダウン ファイル内では、コンポーネントを 1 つだけ使用<v-alert>したので、最終的な解決策は次のとおりです。

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

マークダウン ファイルのコンテンツを表示するページでこのコードを使用する必要があります。結果は私が望むものnuxt generateです-マークダウンファイル内で使用された場合、Vuetifyコンポーネントは正常にレンダリングされました。

しかし、このコードには 1 つの問題もあります。これを実行すると、Vuetify コンポーネントでマークダウンを表示するページにアクセスするとnuxt devエラーが発生します。Unexpected token 'export'

最後に問題は、マークダウン コンテンツを表示するためのテンプレートを含むページからこれらのインポートを削除する方法です。おそらく「条件付きインポート」(実行時にのみこれらのインポートを実行するnuxt generate)のようなものですか?

もちろん、プロジェクトを開発モードで実行するたびにコメント/コメント解除できますが、それが正しい方法かどうかはわかりません。

4

1 に答える 1