More than 3 years have passed since last update.

【Nuxt.js】アプリテンプレート（カスタマイズ）

Posted at 2021-11-14

はじめに

こんにちは！
今回は【Vue.js】についてアウトプットしていきます！

まずデフォルトのテンプレートを確認します。隠しフォルダ内にあるので、通常は閲覧しなくてOKです。今回は、.nuxt⏩views⏩app.template.htmlと見ていき、app.template.htmlがデフォルトのアプリテンプレートになります。

app.template.html

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

※簡単にいうとHTMLページの一番ベースとなる雛形です。

この雛形を編集したいときは、直接app.template.htmlに書き込むのではなくて、新しくapp.htmlというファイルを作成し編集を行ってください。ファイル名は必ずapp.htmlにしてください。

例を出すと、Google ChromeのJavaScriptを無効とする設定になっていたら、ユーザーに警告する処理をapp.htmlに記載し、実行させることなどができます。

HTMLドキュメントのベース（app.template.html）をカスタマイズしたいときは、新しくapp.htmlファイルを作成し、そっちでカスタマイズを行う。

今回はアプリテンプレート（カスタマイズ）についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！