概要
開発環境を特に用意せずにブラウザ上でNuxt3フレームワークを入門できるものとなります。
公式ページ に書かれていることがほとんどですが、チュートリアル的にまとめてみました。
Nuxt3実行環境の準備
StackBlitzを使用してブラウザ上で試すことができます。
xiaoluobodingさんがGithub上で公開されているnuxt3-starterリポジトリを使うと便利です。
上記サイトにある「Preview: Open in StackBlitz」のアイコンでブラウザ上で試すことが可能な環境が試すことができます。1
左ペインの「FILES」でファイルを選択すると中央ペインでファイルを編集が可能で、
右ペインに実行中のNuxtアプリのプレビューブラウザ（URL入力機能付き）が表示されます。
以下、StackBlitzサービスを利用してNuxt3を学んでいきます。
エントリポイント
app.vue ファイルを以下のように編集してみましょう。
<template>
<div>Hello, World!!</div>
</template>
右ペインのプレビューが「Hello, World!!」と表示されたらOKです。
Vue3の記法
以下のようにデータの装飾（Styleタグ）やデータを与えたりすることが可能です。
以下のように app.vue を編集してみましょう。
「Hello Nuxt 3!」と表示されたらOKです。
<script>
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const version = 2 + 1
return { version: version }
}
})
</script>
<template>
<div class="hello">
Hello Nuxt {{ version }}!
</div>
</template>
<style scoped>
.hello {
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
padding: 10rem;
}
</style>
上記のdefineComponent自体を以下のように省略することが可能です。
<script setup> タグ内で定義している定数・変数は <template> タグ内で参照が可能です。
以下のように app.vue のscriptタグ周辺を編集してみましょう。
<script setup>
const version = 2 + 1
</script>
<template>
<div class="hello">
Hello Nuxt {{ version }}!
</div>
</template>
<style scoped>
.hello {
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
padding: 10rem;
}
</style>
pagesディレクトリ
pagesディレクトリ配下のvueファイルは <NuxtPage /> タグによってディレクトリ構造に対応して内容を表示できます。（実質、ルーティング機能となります）
app.vue を以下で設定してください。
<template>
<div>
<NuxtPage />
</div>
</template>
pages ディレクトリを作成し、 pages/index.vue を以下で作成します。
<template>
<h1>Index page</h1>
</template>
プレビューブラウザで「Index Page」が表示されたらOKです。
プレビューブラウザ表示が更新されない場合、ディレクトリ生成などを行った場合は開発サーバ再起動が必要な場合があり、
その場合は中央ペインでキーボードの Ctrl+C を押下し、キーボードの↑ボタンを押下して「npm install && npm run dev」の表示でEnterキーを押下すると反映されます。（一度の操作で反映されず、何度か操作を実行すると反映される場合があります）
同様に pages/working.vue ファイルを作成してみてください。
<template>
<div>
Page content
</div>
</template>
右ペインのプレビューブラウザURLの末尾を「/working」に変更してEnterを押下すると「Page content」が表示されたらOKです。
layoutsディレクトリ
layouts ディレクトリに存在するvueファイルは、<NuxtLayout>タグを利用することで数多あるページに対して共通の描画・デコレーションを行う処理を記載することができます。
あらかじめ、プレビューブラウザのURLをトップページ（/）に戻しておいてください。
app.vue を以下で設定してください。
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
layouts/default.vue を定義すると <NuxtLayout> タグで囲んだ全てのページで共通のデコレーション用のレイアウトが設定できます。
<template>
<div>
Some default layout shared across all pages
<slot />
</div>
</template>
ページごとに異なるカスタムレイアウトを設定したい場合は、definePageMeta を使用すると変更できます。
<template>
<div>
カスタムレイアウト
<slot />
カスタムレイアウト
</div>
</template>
<template>
<div>
Page content
</div>
</template>
<script setup>
definePageMeta({
layout: "custom"
});
</script>
開発サーバを再起動し、プレビューブラウザのURLの末尾を「/working」としてEnterを押下すると、「カスタムレイアウト」で囲まれたページが表示されたらOKです。
componentsディレクトリ
components ディレクトリに存在するvueファイルは、すべてのVueコンポーネントを配置する場所で、ページまたは他のコンポーネント内にインポートすることができます。
components ディレクトリを作成し、 components/TheHeader.vue ファイルを以下で作成してください。
<template>
<div>
ヘッダー
</div>
</template>
また、 components/TheFooter.vue ファイルも以下で作成してください。
<template>
<div>
フッター
</div>
</template>
layouts/default.vue を以下のように修正してください。
＃<slot /> タグは子コンポーネントの表示を行うものとなります。
<template>
<div>
<TheHeader />
<slot />
<TheFooter />
</div>
</template>
開発用サーバを再起動し、トップページを表示すると以下が表示されたらOKです。
ヘッダー
Index page
フッター
まとめ
- Nuxt3の入門として、
pages、layouts、componentsについて実際に動かしてみることができました
-
AdBlock系のブラウザ拡張が入っている場合は動作しませんのでご注意ください ↩