Nuxt3入門チュートリアル(1)

## 概要

開発環境を特に用意せずにブラウザ上でNuxt3フレームワークを入門できるものとなります。
[公式ページ](https://v3.nuxtjs.org/guide/concepts/introduction) に書かれていることがほとんどですが、チュートリアル的にまとめてみました。


## Nuxt3実行環境の準備

StackBlitzを使用してブラウザ上で試すことができます。
xiaoluobodingさんがGithub上で公開されているnuxt3-starterリポジトリを使うと便利です。

https://github.com/xiaoluoboding/nuxt3-starter

上記サイトにある「Preview: Open in StackBlitz」のアイコンでブラウザ上で試すことが可能な環境が試すことができます。[^1]
左ペインの「FILES」でファイルを選択すると中央ペインでファイルを編集が可能で、
右ペインに実行中のNuxtアプリのプレビューブラウザ（URL入力機能付き）が表示されます。

以下、StackBlitzサービスを利用してNuxt3を学んでいきます。

## エントリポイント

`app.vue` ファイルを以下のように編集してみましょう。

```vuejs:app.vue
<template>
  <div>Hello, World!!</div>
</template>
```

右ペインのプレビューが「Hello, World!!」と表示されたらOKです。

### Vue3の記法

以下のようにデータの装飾（Styleタグ）やデータを与えたりすることが可能です。

https://v3.nuxtjs.org/examples/essentials/hello-world/

以下のように `app.vue` を編集してみましょう。
「Hello Nuxt 3!」と表示されたらOKです。

```vuejs:app.vue
<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タグ周辺を編集してみましょう。


```vuejs:app.vue
<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ディレクトリ

https://v3.nuxtjs.org/guide/directory-structure/pages

pagesディレクトリ配下のvueファイルは `<NuxtPage />` タグによってディレクトリ構造に対応して内容を表示できます。（実質、ルーティング機能となります）

`app.vue` を以下で設定してください。

```vuejs:app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>
```

`pages` ディレクトリを作成し、 `pages/index.vue` を以下で作成します。

```vuejs:pages/index.vue
<template>
  <h1>Index page</h1>
</template>
```


プレビューブラウザで「Index Page」が表示されたらOKです。

:::note info
プレビューブラウザ表示が更新されない場合、ディレクトリ生成などを行った場合は開発サーバ再起動が必要な場合があり、
その場合は中央ペインでキーボードの Ctrl+C を押下し、キーボードの↑ボタンを押下して「npm install && npm run dev」の表示でEnterキーを押下すると反映されます。（一度の操作で反映されず、何度か操作を実行すると反映される場合があります）
:::

同様に `pages/working.vue` ファイルを作成してみてください。

```vuejs:pages/working.vue
<template>
  <div>
    Page content
  </div>
</template>
```

右ペインのプレビューブラウザURLの末尾を「/working」に変更してEnterを押下すると「Page content」が表示されたらOKです。

## layoutsディレクトリ

https://v3.nuxtjs.org/guide/directory-structure/layouts

`layouts` ディレクトリに存在するvueファイルは、`<NuxtLayout>`タグを利用することで数多あるページに対して共通の描画・デコレーションを行う処理を記載することができます。

:::note warn
あらかじめ、プレビューブラウザのURLをトップページ（/）に戻しておいてください。
:::


`app.vue` を以下で設定してください。

```vuejs:app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
```

`layouts/default.vue` を定義すると `<NuxtLayout>` タグで囲んだ全てのページで共通のデコレーション用のレイアウトが設定できます。

```vuejs:layouts/default.vue
<template>
  <div>
    Some default layout shared across all pages
    <slot />
  </div>
</template>
```


ページごとに異なるカスタムレイアウトを設定したい場合は、`definePageMeta` を使用すると変更できます。


```vuejs:layouts/custom.vue
<template>
  <div>
    カスタムレイアウト
    <slot />
    カスタムレイアウト
  </div>
</template>
```

```vuejs:pages/working.vue
<template>
  <div>
    Page content
  </div>
</template>

<script setup>
definePageMeta({
  layout: "custom"
});
</script>
```

開発サーバを再起動し、プレビューブラウザのURLの末尾を「/working」としてEnterを押下すると、「カスタムレイアウト」で囲まれたページが表示されたらOKです。

## componentsディレクトリ

https://v3.nuxtjs.org/guide/directory-structure/components/


`components` ディレクトリに存在するvueファイルは、すべてのVueコンポーネントを配置する場所で、ページまたは他のコンポーネント内にインポートすることができます。

`components` ディレクトリを作成し、 `components/TheHeader.vue` ファイルを以下で作成してください。

```vuejs:components/TheHeader.vue
<template>
  <div>
  ヘッダー
  </div>
</template>
```

また、 `components/TheFooter.vue` ファイルも以下で作成してください。

```vuejs:components//TheFooter.vue
<template>
  <div>
  フッター
  </div>
</template>
```

`layouts/default.vue` を以下のように修正してください。
＃`<slot />` タグは子コンポーネントの表示を行うものとなります。

```vuejs:layouts/default.vue
<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>
```

開発用サーバを再起動し、トップページを表示すると以下が表示されたらOKです。

```
ヘッダー
Index page
フッター
```

# まとめ

* Nuxt3の入門として、`pages`、`layouts`、`components`について実際に動かしてみることができました


[^1]: AdBlock系のブラウザ拡張が入っている場合は動作しませんのでご注意ください