[Nuxt] テンプレートファイルをカスタマイズする方法

デフォルトテンプレートの確認

デフォルトのテンプレートは.nextフォルダの中にあります。
下記のファイルを開いてみましょう。

[.nuxt/views/app.template.html」

これがデフォルトの構造です。
基本的なHTML構造の中に、HEADやBODYの情報などを出力する構造になっているのがわかります。

デフォルトテンプレートのカスタマイズ

.nextディレクトリの中身は基本的に変更しないというルールになっているので、別の場所にファイルを作成し、そちらを適応させます。

Nuxtプロジェクトのルートに「app.html」ファイルを作成します。
先程のapp.template.htmlファイルの中身をコピーして修正します。

このように変更してブラウザでアクセスすると Body という文字だけが表示されます。
これでapp.htmlが有効になったことが確認できました。



Author: webmaster