では、いきなりだが、Nuxt.js を触ってみよう。
『ゼロからしっかり理解したい人向けのNuxt.js入門』あたりを参考に。
すごくしっかり書かれた記事だと思うが、「ちょっと触ってみたい」程度の初学者には通読がキツいかもしれません。
また、今後は Nuxt3 が主流になっていくと思われるので、雰囲気掴む程度でいいのではと思います。
雛形を作ってもらう
まず、アプリのスケルトンを作ってもらいましょう。
npx create-nuxt-app sample
としました。
ちなみに、Nuxt3 では npx nuxi init sample になります。
「フレームワークにプロジェクトを作ってもらうときは、専用のコマンドがある」という理解でいいのではないかと思います。雰囲気掴むというのはそういうことかと。
色々と聞かれますが、今回は以下のように答えた。
質問が終了するとモジュールなどを持ってきて何やら作業が始まる。
npm run dev
して、ブラウザで http://localhost:3000 にアクセスすると以下のような画面が立ち上がる。
まずは第一歩終了。
イジり開始 レイアウトを設定する
ところで、質問に上のように答えると(この手の解説記事でよく出てくる) layouts というフォルダは
できない。
Nuxt3 にいたっては pages というフォルダもできない。複数フレームワークを使う場合、細かいことにこだわるのはナンセンスだと個人的には思ってます。
ならどうするかといえば、手動でつくる。
普通に
mkdir layouts
でいいです。
ヘッダー・フッターを設定する
初期画面で言われているように components/Tutorial.vue は削除しましょう。
その代わりに、ヘッダー・フッターを vue の形で入れます。
--SimpleHeader.vue--
<template>
<div class="header">
サンプルヘッダ </div>
</template>
<style>
.footer {
background-color: #139ed5;
}
</style>
--SimpleFooter.vue--
<template>
<div class="footer">
サンプルフッタ
</div>
</template>
<style>
.footer {
background-color: #139ed5;
}
</style>
このままでは、Nuxt はこのコンポーネントをどこに表示していいかわかりません。
そこで、先ほど先ほど作成した layouts フォルダに default.vue ファイルを置きます。
--layouts/default.vue--
<template>
<div>
<ex-header />
<nuxt />
<ex-footer />
</div>
</template>
<script>
// ヘッダ&フッタをインポート
import ExHeader from '../components/SimpleHeader.vue'
import ExFooter from '../components/SimpleFooter.vue'
export default {
name: 'sample', // テンプレート名
components: {
ExHeader, // <ex-header>に対応
ExFooter // <ex-footer>に対応
}
}
</script>
pages/index.vue も以下のように改変。
--pages/index.vue
<template>
<section class="container">
<h2>改変</h2>
<div>layouts フォルダを作成。default.vue でレイアウトを決めています</div>
</section>
</template>
<script>
export default {
layout: 'sample', // レイアウトファイルを指定
head: {
title: 'TOP',
meta: [
{
hid: 'description', name: 'description', content: 'トップページです。'
}
]
},
}
</script>
これで再度 npm run dev してみてください。
上のようにヘッダー・フッターありのインデックスページが出現すれば成功です。
個人的メモ
『Nuxt3 + bootstrap5』