Posted in nuxt

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

   Published Date: 2020年5月20日

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

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

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

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

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

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

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

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

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    <div>
      Body
    </div>
  </body>
</html>

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



Author: webmaster