イジって覚える Nuxt.js

 では、いきなりだが、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』