Nuxt3のまとめ

nuxt3の導入として、簡単なページを作りながら、公式サイトを参照して自分用にまとめてみました。

立ち上げ

※node.jsは18.0.0以上

プロジェクトの作成は、公式サイトを参照して順番に。

Nuxt|Docs|Instaration

構成

①nuxt.config.ts

・nuxtのデフォルトの設定に上書きできるファイル。このファイル内でdefineNuxtConfig関数をexportすることで、その中に記載された内容がglobalに作用する。

・runtimeConfigの中にサーバーサイドの環境変数を定義でき、runtimeConfig.publicでクライアントサイドの環境設定を記載する。

・ここにcssのパスを記述すると、スタイルシートが全てのページに自動的に適用される。

②Viewディレクトリのapp.vue

・デフォルトとして、このコンテンツをすべてのルートで描画する。

③Componentsディレクトリ内のファイル

・ボタンやメニューなど繰り返し使う部品を置いておく場所。明示的にimportと記述しなくても、コンポーネントを使用できる。

④Pagesディレクトリ内のファイル

・それぞれ異なるルートによって設定されるページを作成して置いておく場所。App.vueの中に表示される部分。

⑤Layoutsディレクトリ内のファイル

・ヘッダーやフッターなど、複数のページで共通して使用される部分を置く。

⑥Assetsディレクトリ

・スタイルシートやフォント、画像を置く。

ルーティング

・背後でvue-routerが動いている。このことでPagesディレクトリ以下のファイルは自動でルーティングされ、ファイル名を伴ったアドレスを生成する。

・ページ移動のリンクは<NuxtLink>で設定。

・useRoute() 関数。コンポーネントが個別具体的なルートにアクセスするために使う。

データのfetch

・useFetch()関数を使っておけば無難そう。