More than 5 years have passed since last update.

Nuxt.jsのHTML App Templateをカスタマイズしたい時のちょっとした罠

Last updated at 2019-12-11Posted at 2019-05-23

HTML App Templateのカスタマイズ

基本的には公式ドキュメントに記載のある通りなんですが。。。
https://nuxtjs.org/guide/views#app-template

テンプレートを変更するために、プロジェクトのルートフォルダに app.html ファイルを作成します。

2019/12/11 追記

公式ドキュメントが下記内容に修正されておりました。下記の通り説明が正しく書き換えられたため当記事のタイトルの罠はなくなりました。

テンプレートを変更するために、プロジェクトのソースフォルダ（デフォルトはプロジェクトのルートディレクトリ）に app.html ファイルを作成します。

app.htmlのデフォルト

app.html

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

ちょっとした罠

公式ドキュメントには プロジェクトルート に設置するように指示されてますが(2019年5月23日現在)(2019/12/11現在上述の通り説明が修正されました) srcDirを指定している場合はapp.htmlファイルをsrcDirで指定しているパスに設置しないと反映されませんでした。

例)
srcDir: 'src/'にしているなら、'src/app.html'を作成してカスタマイズする

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up