【イラスト付き】Nuxt3の書き方を把握する【要点一気読み】

はじめに

皆さんこんにちは。

今回はNuxtの書き方をご紹介します。

Nuxtには意味のあるフォルダがあり、作ったコードは所定の場所に配置する必要があります。

こんな人にオススメ

• Nuxtの書き方を大まかに把握したい
• 公式だと情報が多すぎて分かりづらい

初めて学習する方にも分かるように、要点を絞って丁寧に解説していきます。

😋 Nuxtの書き方を紹介します♪

コンポーネントの自動インポート

まずポイントをチェック

• componentsフォルダに配置したコンポーネントは自動インポートされる
• ファイル名がコンポーネント名になる
• 階層がある場合はフォルダ名もコンポーネント名に含む

Nuxtはコンポーネントを自動インポートする仕組みがあります。これにより開発者はimport文を書かずともコンポーネント利用することができます。

自動インポートの対象はcomponentsフォルダ内です。作成したコンポーネントはcomponentsフォルダ内に配置します。

Nuxtではコンポーネント名は大文字開始でも小文字開始でもどちらでもOKです。componentsフォルダ内はVue.jsの慣習に沿って大文字開始のコンポーネントを配置することが多いようです。

自動インポートしたコンポーネントはファイル名がそのままコンポーネント名として採用されます。componentsフォルダ内にさらにフォルダを作成した場合、自動インポートするコンポーネント名はフフォルダ名＋ファイル名になります。

🍕 例えば、components/sample/compo.vue は <SampleCompo>となります。

結果的に同名として解釈されるコンポーネントがある場合は、実行時に警告がでます。

🍕 例えば、components/sample/Item.vue と components/SampleItem.vue はどちらも <SampleItem>と解釈されます。

このように同名のコンポーネントにならないように注意しましょう。

😋 コンポーネントはcomponentsフォルダ内に配置しましょう♪

自動インポートのシンプルなサンプルを掲載します。

components/Compo1.vue（components直下の例）

<template>
    <div>compo1</div>
</template>

components/sample/Compo2.vue（フォルダを追加した例）

<template>
    <div>compo2</div>
</template>

components/AutoInport.vue（インポートして利用する側）

<template>
    <Compo1 /> <!-- ファイル名のみ -->
    <SampleCompo2 /> <!-- フォルダ名 + ファイル名 --> 
</template>

Nuxtのレイアウト

まずポイントをチェック

• layoutsフォルダにレイアウト定義コンポーネントを配置
• デフォルトのレイアウトと名前付きレイアウトを定義可能

Nuxtには各ページの共通レイアウトを適用する仕組みがあります。デフォルトのレイアウトと名前付きレイアウトの２種類の定義方法があります。

デフォルトのレイアウトはアプリケーション全体の代表的なレイアウトを定義します。layoutsフォルダにdefault.vueを配置しレイアウト定義を行います。default.vueには<slot />を配置し、具体的なコンテンツを親から受け取れるようにしておきます。

名前付きレイアウトは特定のページやパートで利用したいレイアウトを定義します。layoutsフォルダに任意の名前.vueを配置しレイアウト定義を行います。defalut.vueと同様に<slot /> を配置します。

レイアウトの適用には<NuxtLayout>を利用します。<NuxtLayout>で囲った要素がレイアウト定義の<slot />に渡されます。名前付きレイアウトの適用はnameというpropsにレイアウトファイル名を指定します。

レイアウトがdefault.vueの一種類しかない場合は、app.vueに直接レイアウトを定義することを公式では推奨しています。

😋 共通的な構造はレイアウトに定義しましょう♪

レイアウト利用のシンプルなサンプルを掲載します。

layouts/default.vue（デフォルトのレイアウト）

<template>
  <header>
    <div>ヘッダー</div>
  </header>
  <slot /> <!-- 親からの要素を挿入 -->
  <footer>
    <div>フッター</div>
  </footer>
</template>

layouts/layout2.vue（名前付きレイアウト）

<template>
    <div>Layout2</div>
    <slot /> <!-- 親からの要素を挿入 -->
</template>

Layout.vue（利用する側）

<template>
  <NuxtLayout> <!-- default.vue を適用 -->
      <div>Layout</div>
  </NuxtLayout>
  <NuxtLayout name="layout2"> <!-- layout2.vue を適用 -->
    <div>NamedLayout</div>
  </NuxtLayout>
</template>

Nuxtのルーティング

まずポイントをチェック

• pagesフォルダにルーティングと対応するコンポーネントを配置
• フォルダをネストするとフォルダ名がパスに含まれる
• パラメータの利用はファイル名に各カッコで指定
• 遷移は<NuxtLink>とpushメソッドの方法がある
• 表示位置は<NuxtPage />で指定

Nuxtはpagesフォルダにコンポーネント配置するだけでルーティングの設定を自動的に行ってくれます。

pagesフォルダに配置したコンポーネント名がそのままパスに利用されます。フォルダをネストするとフォルダ名もパスに含まれます。また、パラメータを利用する場合はファイル名に角カッコを指定します。

画面遷移をリンクで行うには<NuxtLink>を利用します。toで遷移先のパスを指定します。処理としての遷移はrouter.pushの引数に遷移先のパスを指定します。routerオブジェクトはuseRouterの戻り値で取得します。遷移したページの表示位置は<NuxtPage />で指定します。

パラメータを受け取る場合はroute.params.パラメータ名で取得します。routeオブジェクトはuseRouteの戻り値で取得します。

😋 pagesフォルダに配置するだけでルーティングの設定ができちゃいます♪

ルーティングのシンプルなサンプルを掲載します。

pages/index.vue（トップページ）

<template>
  <div>トップ</div>
</template>

pages/page1.vue（pages直下の例）

<template>
  <div>ページ1</div>
</template>

pages/nest/page2.vue（フォルダを追加した例）

<template>
  <div>ページ2</div>
</template>

pages/page[no].vue（パラメータの例）

<template>
  <div>ページ{{paramNo}}</div>
</template>
<script setup lang="ts">
  const route = useRoute();
  const paramNo = route.params.no; // パラメータの取得
</script>

Routing.vue（表示する側）

<template>
    <NuxtLink to="/page1">ページ１</NuxtLink> <!-- リンクで遷移 -->
    <button @click="goPage2">ページ２</button>
    <NuxtLink to="/page99">ページ99</NuxtLink> <!-- リンクで遷移 99はパラメータ -->
    <div>-----</div>
    <NuxtPage /> <!-- ページの表示位置 -->
</template>
<script setup lang="ts">
const router = useRouter();
const goPage2 = () => {
    router.push('/nest/page2'); // 処理で遷移
};
</script>

ネスティングルーティング

まずポイントをチェック

• 小画面を追加する際もpagesフォルダを利用する
• 親画面と同名のフォルダを作成し小画面を配置する

ネストされたルーティングを実現する場合もpagesフォルダに配置します。親画面と同名のフォルダを用意することで、小画面を配置できます。遷移や表示については通常通り<NuxtLink>や<NuxtPage>を利用できます。

😋 小画面は親と同じ名前のフォルダに入れるだけです♪

ネストしたルーティングのシンプルなサンプルを掲載します。

pages/page1.vue（親画面）

<template>
    <div>ページ1</div>
    <NuxtLink to="/page1/child1">子画面１へ</NuxtLink> <!-- リンクで遷移 -->
    <NuxtLink to="/page1/child2">子画面２へ</NuxtLink> <!-- リンクで遷移 -->
    <NuxtPage /> <!-- 子画面の表示位置 -->
</template>

pages/page1/child1.vue（子画面１を親と同名のフォルダに配置）

<template>
    <div>ページ1の子画面1</div>
</template>

pages/page1/child2.vue（子画面２親と同名のフォルダに配置）

<template>
    <div>ページ1の子画面2</div>
</template>

コンポーザブル関数の自動インポート

まずポイントをチェック

• composablesフォルダにコンポーザブル関数を配置
• exportの場合、名前指定で利用
• export defaultの場合、ファイル名がコンポーザブル関数名になる

Nuxtではコンポーザブル関数を仕組みとしてサポートしています。composablesフォルダに配置することで自動インポートされます。

composablesフォルダでの自動インポートの注意点として、自動インポートのスキャン対象はcomposables直下のみになっています。よってcomposablesの下にフォルダを作成し、そこにコンポーザブル関数を配置した場合はスキャンされません。この場合はcomposables直下のファイルで再エクスポートします。

コンポーザブル関数はuseXXXといった命名にします。コンポーザブル関数はexportとexport defaultのどちらを使うかで、関数名が変わります。exportを使う場合は関数名がそのまま自動インポート時に採用されます。export defaultの場合はファイル名がコンポーザブル関数名として扱われます。

コンポーザブル関数はコンポーネント内のロジックを関数として切り出したものです。関数として切り出すことで複数のコンポーネントでロジックを使い回すことができます。

😋 composables直下のみしかスキャンされないので注意です♪

コンポーザブル関数の自動インポートのシンプルなサンプルを掲載します。

composables/index.ts（再エクスポート）

export { useThankYou } from './nest/useThankYou';

composables/nest/useThankYou.ts（composablesの下にフォルダを用意、exportを利用）

export const useThankYou = () => { // export なので関数名を採用
  const thanks = 'ThankYou';
  return { thanks };
};

composables/useHello.ts（composablesの直下に配置、export defalutを利用）

export default  () => { // export default なのでファイル名を採用
  const hello = 'Hello';
  return { hello };
};

Composable.vue（利用する側）

<template>
    <div>{{ hello }}</div>
    <div>{{ thanks }}</div>
</template>
<script setup lang="ts">
const { hello } = useHello(); // コンポーザブル関数を実行(export default)
const { thanks } = useThankYou(); // コンポーザブル関数を実行(export)
</script>

serverフォルダでWebAPI作成

まずポイントをチェック

• server\middlewareにExpressアプリを配置でWebAPI作成ができる
• server内は他のフォルダを作成してもOK

Nuxtではserverフォルダにサーバーサイドアプリケーションを配置することで、簡単にWebAPIを用意することができます。今回はExpressを利用した例をご紹介します。

server/middlewareにExpressアプリを配置します。ファイル名はなんでも大丈夫ですが、関係ないファイルを配置するとNuxtが実行可能なファイルだと勘違いしてしまうので注意してください。またserverフォルダ内には他のフォルダを作成しても問題ありません。

作成したExpressアプリはfromNodeMiddlewareを実行することで有効化されます。

😋 server/middlewareにはアプリケーション本体のみを配置します♪

Expressを利用したシンプルなサンプルを掲載します。

Expressの導入（npm コマンド）

実行するコマンド
1. npm install express
2. npm install @types/express -D

server/middleware/index.ts（GET /api/items のルートハンドラーを配置）

import express from 'express';
const app = express();
app.use(express.json());

app.get('/api/items', (req, res) => {
  const items = [
    { title: 'title1' },
    { title: 'title2' },
  ];
  res.json(items);
});

export default fromNodeMiddleware(app); // 有効化

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

Nuxtの書きかたを確認をしていただきました。基本的な記述はVue.jsベースですが、配置するフォルダやNuxtコンポーネントの利用など一部Nuxtの書き方があります。より簡潔にVue.jsアプリケーションが作れるように工夫されているので、Vue.jsを学習後に取り組んでみましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（Nuxt公式のリンク）

Components Directory：https://nuxt.com/docs/guide/directory-structure/components
Views：https://nuxt.com/docs/getting-started/views
<NuxtLayout>：https://nuxt.com/docs/api/components/nuxt-layout#nuxtlayout
Pages：https://nuxt.com/docs/getting-started/routing#pages
Pages Directory：https://nuxt.com/docs/guide/directory-structure/pages
Composables Directory：https://nuxt.com/docs/guide/directory-structure/composables
Server Directory：https://nuxt.com/docs/guide/directory-structure/server