はじめに
こんにちは！
最近実務でVue.jsを使う機会が増えてきたので実際に自分で環境を作りたいなと思ったので作っていきます。
今回はNuxt3を使っていきます。
情報量が膨大なためいくつかに分けて解説できればと思います。
公式ドキュメントを参考に記載をしています。
Nuxtとは...
Nuxtは、Vue.jsを使用して、直感的で拡張可能なフルスタックのWebアプリケーションやWebサイトを作成するためのフリーでオープンソースのフレームワークです。
Vue.jsと違い UI だけではなく SSR(サーバサイドレンダリング)を含めたレンダリング機能や Meta タグ、ルーティング、エラーハンドリングなど本格的なアプリケーションの構築に必須となるさまざまな機能を事前に組み込むことでアプリケーション開発を効率的に行うことができます。
環境構築
早速環境を作っていきます。
※node.jsのバージョンは16.10.0 以上を推奨しているため推奨バージョン以上でお願いします。
# nodeインストール
$ nodenv install 16.10.0
# nodeバージョン確認
$ node -v
16.10.0
# フォルダ作成
$ npx nuxi init <プロジェクト名>
$ cd <プロジェクト名>
# 必要な依存関係をインストール
$ yarn install
# 起動
$ yarn dev
これでlocalhost:3000にアクセスできますね。
環境構築は以上になります。
ディレクトリ構成について
Nuxt3 ではプロジェクト作成時に.node_modules以外のディレクトリは存在しませんがそれぞれ異なる役割を持っているディレクトリを追加していくことでアプリケーションを構築していきます。
ディレクトリ名は Nuxt3 の中で事前に決められておりコンポーネントを利用する場合はcomponentsディレクトリを作成します。
componentsディレクトリの下にコンポーネントファイルを保存することで Auto Imports 機能により import 文を利用しなくても自動でコンポーネントの import が行われます。
そのためディレクトリ名や作成したディレクトリがどのような役割を持っているのかをディレクトリ毎に理解しておく必要があります。
この記事ではpages, layouts, componentsについて解説していきます。
pagesディレクトリ
ページ構成を作っていきます。
rootディレクトリにpagesというディレクトリを作成します。
作成したpagesの中にindex.vueファイルを作成します。
ディレクトリ構成は下記になります。
.
├── .nuxt
├── node_modules
├── public
├── server
├── pages ←新規作成
└── index.vue ←新規作成
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
index.vueは仮で下記のように書きます。
<template>
<h1>Hello World</h1>
</template>
その後rootディレクトリのapp.vueを修正します。
pages/index.vueファイルを作成しただけでブラウザ上の表示が変わるわけではなりません。
pages/index.vueファイルの内容を表示させるためにはapp.vueファイルにNuxtPageコンポーネントを追加する必要があります。
NuxtPageタグを追加するとNextPageタグを追加した箇所にpages/index.vueファイルのコンテンツが表示されます。
<template>
<div>
<NuxtWelcome />
</div>
</template>
↓
<template>
<div>
<NuxtPage />
</div>
</template>
これでapp.vueからpagesのindex.vueコンポーネントが入ってきます。
ページを追加したい場合にpagesディレクトリを利用します。Nuxtではファイルベースルーティングを採用しているのでpagesディレクトリの中にファイルを作成することで自動でルーティングが設定されます。
下記で新規ページを追加したいと思います。
パスは作成したファイル名になります。
例として下記のように作成した場合は...
.
├── pages
└── sports.vue ←新規作成
・
pages/sports.vueというファイルを作成した場合はパスが/sportsになります。
中身はIndex.vueと同様にします。
<template>
<div>
Sports
</div>
</template>
Layoutsディレクトリ
index.vueや、他作成したファイルのページ間を移動できるナビゲーションを追加したい場合にどちらのファイルにも同じ内容を追加することは非効率です。
そのためレイアウトファイルを作成することでページで共通する内容を1つのファイルに記述することができ、レイアウトファイルを共有するすべてのページに適用することができます。
レイアウトを利用したい場合には layouts ディレクトリを作成して default.vue ファイルを作成してください。
ディレクトリ構成は下記になります。
.
├── .nuxt
├── node_modules
├── public
├── server
├── pages
├── layouts ←新規作成
└── default.vue ←新規作成
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
default.vueに<slot />は必須です。
<template>
<div>
<nav>ナビゲーションバー</nav>
<slot />
</div>
</template>
layoutsフォルダにdefault.vueファイルを作成してだけでは何も変化はありません。
app.vueファイルにNuxtLayoutタグを追加しNuxtPageタグをラップします。
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
app.vueファイルにNuxtLayoutタグを追加することで自動でlayoutsディレクトリに存在するdefault.vueファイルの内容が適用されます。
componentsディレクトリ
再利用可能なコンポーネントファイルを保存するためにcomponentsディレクトリを作成します。
その場合プロジェクト直下にcomponentsディレクトリを作成して、その中に各コンポーネントを作成しましょう。
ディレクトリ構成は下記になります。
.
├── .nuxt
├── node_modules
├── public
├── server
├── pages
├── layouts
├── components ←新規作成
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
作成したcomponentsディレクトリにNavbar.vueファイルを作成します。Navbar.vueファイルはdefault.vueファイルでナビテーションバーを設定するために利用します。
(pages/sports.vueも作成して表示をします。)
<template>
<nav>
<a href="/">Home</a>
<br>
<a href="/sports">Sports</a>
</nav>
</template>
作成したNavbarコンポーネントをlayoutsのdefault.vueファイルに追加します。Vue.js では別ファイルに記述したコンポーネントを利用する場合には import を行う必要があります。Nuxt 3 では components ディレクトリに保存したコンポーネントファイルは自動で import されるため import 処理を行う必要がありません。
<template>
<div>
<Navbar />
<slot />
</div>
</template>
これで上部にリンクが設定されます。
最後に
駆け足で冒頭の部分を説明してしまいました。
今回のはNuxt3のごく一部になります。
今後記事にしていきますので続きとしてみていただけると嬉しいです。
またNuxt3を使ってみてとても楽しいです。
Nuxt3で何かプロジェクトを作れないかなと、日々考えています。
そして是非弊社で一緒に働きたい、という方を募集しております。
下記URLから応募できますので少しでも興味を持っていただけたら応募してください。