Nuxt3環境構築について

前提条件

  • Node.js v18.0.0
  • Visual Studio Code
  • ターミナル

この記事の内容は適宜見直しをする予定です。

ターミナルに以下のコマンドを入力してNuxt.jsの準備

npx nuxi@latest init <project-name>

ターミナルに以下のコマンドを入力してproject-nameフォルダを開く

code <project-name>

もしくは

cd <project-name>

開発サーバー

npm run dev -- -o

Vueファイルとページの作成

app.vueについて

Nuxt3のプロジェクト立ち上げ時にapp.vueファイルが生成されます。まずはこちらを使用する場合は下記のようにコードを追加し、layouts/とpages/のファイルを読み込みます。

app.vue

<template>
　<NuxtLayout>
　　<NuxtPage />
　</NuxtLayout>
</template>

app.vueに記述した内容は全てのコンポーネントに適用されます。全ての画面に反映させたい内容がある場合などに使用します。（app.vueを削除した場合、layout/pagesフォルダのものが読み込まれる→検証中）

layoutsについて

Nuxt3ではlayoutsディレクトリは自動で生成されなくなったので、まずはルートディレクトリ（プロジェクトフォルダ）にlayoutsディレクトリを作成します。

layouts/default.vue

<template>
　<div>
　　<nuxt />
　</div>
</template>

<script>
export default {
　}
</script>

<style>
</style>

pagesについて

layoutsと同じくNuxt3ではpagesディレクトリが自動で生成されなくなりました。まずはルートディレクトリにpagesを作成してください。

pages/index.vue

<template>
　<div class="container">
　　<h1>Hello Nuxt.js</h1>
　</div>
</template>

<script>
export default {
　}
</script>

<style>
</style>

下記の画面が表示されたら設定完了となります。

Hello Nuxt3.js

お疲れさまでした。

今後の課題

  • レイアウトの使い方
  • titleタグやmetaタグの設定

その他にあれば適宜追加してまいります。

TOP