前提条件
自分の環境
- OS
- windows11
- node.js
- v16.13.2
- vue.js
- v2.15.8
- nuxt.js
- v2.6.14
- create-nuxt-app
- v4.0.0
nuxtの環境構築はcreate-nuxt-appを利用しています。
create-nuxt-appを利用しての環境構築は、こちらの記事を参照。
テンプレートをカスタマイズ
デフォルトテンプレートの場所
nuxtのデフォルトテンプレートはprojectName>.nuxt>views>app.template.htmlにあります。
.nuxtは隠しフォルダになっているので、見つからない場合は隠しフォルダを表示する設定にして上げてください。
- デフォルトテンプレートってなんぞ
- 表示画面レイアウトの雛形のようなもの。こいつをいじることでも画面をのレイアウトいじることができる。
app.template.html
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
カスタムテンプレート
カスタムテンプレートはIEだったりJavascript無効がオフになっていたりなどの、警告画面を作りたいときに利用します。
やってみる
試しにapp.htmlを作成します。名前にappは必ずつけないとだめです。
場所は、プロジェクトディレクトリの直下に作成。
app.html
<!DOCTYPE html>
<html>
<noscript>JavaScriptを有効にしてください。</noscript>
<h1>カスタムテンプレートだよ</h1>
</html>
http://localhost:3000/
のトップページがカスタムテンプレートに置き換わりました。
ブラウザの設定でJS切ってから、接続するとメッセージが出るようになりました。
補足：デフォルトテンプレートの関係性
デフォルトではpages配下のコンポーネントが画面に表示されるまで
layoutとviewsディレクトリは隠しフォルダ./nuxtにあるので注意。