メインコンテンツにスキップ

NuxtJSとの併用

NuxtJSプロジェクトでFSDを実装することは可能ですが、NuxtJSのプロジェクト構造要件とFSDの原則の違いにより、以下の2点でコンフリクトが発生してしまいます。

  • NuxtJSはsrcフォルダーなしでプロジェクトのファイル構造を提供している。つまり、ファイル構造がプロジェクトのルートに配置される。
  • ファイルルーティングはpagesフォルダーにあるが、FSDではこのフォルダーはフラットなスライス構造に割り当てられている。

srcディレクトリのエイリアスを追加する​

設定ファイルにaliasオブジェクトを追加します。

export default defineNuxtConfig({
  devtools: { enabled: true }, // FSDには関係なく、プロジェクト起動時に有効
  alias: {
    "@": '../src'
  },
})

ルーター設定方法の選択​

NuxtJSには、コンフィグを使用する方法とファイル構造を使用する方法の2つのルーティング設定方法があります。 ファイルベースのルーティングの場合、app/routesディレクトリ内にindex.vueファイルを作成します。一方、コンフィグを使用する場合は、router.options.tsファイルでルートを設定します。

コンフィグによるルーティング​

app層にrouter.options.tsファイルを作成し、設定オブジェクトをエクスポートします。

app/router.options.ts
import type { RouterConfig } from '@nuxt/schema';

export default <RouterConfig> {
  routes: (_routes) => [],
};

プロジェクトにホームページを追加するには、次の手順を行います。

  • pages層内にページスライスを追加する
  • app/router.config.tsのコンフィグに適切なルートを追加する

ページスライスを作成するには、CLIを使用します。

fsd pages home

home-page.vueファイルをuiセグメント内に作成し、公開APIを介してアクセスできるようにします。

src/pages/home/index.ts
export { default as HomePage } from './ui/home-page';

このように、ファイル構造は次のようになります。

|── src
│   ├── app
│   │   ├── router.config.ts
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.vue
│   │   │   ├── index.ts

最後に、ルートをコンフィグに追加します。

app/router.config.ts
import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('@/pages/home.vue').then(r => r.default || r)
    }
  ],
}

ファイルルーティング​

まず、プロジェクトのルートにsrcディレクトリを作成し、その中にapp層とpages層のレイヤー、app層内にroutesフォルダーを作成します。 このように、ファイル構造は次のようになります。

├── src
│   ├── app
│   │   ├── routes
│   ├── pages # FSDに割り当てられたpagesフォルダー

NuxtJSがapp層内のroutesフォルダーをファイルルーティングに使用するには、nuxt.config.tsを次のように変更します。

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // FSDには関係なく、プロジェクト起動時に有効
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes'
  }
})

これで、app層内のページに対してルートを作成し、pages層からページを接続できます。

例えば、プロジェクトにHomeページを追加するには、次の手順を行います。

  • pages層内にページスライスを追加する
  • app層内に適切なルートを追加する
  • スライスのページをルートに接続する

ページスライスを作成するには、CLIを使用します。

fsd pages home

home-page.vueファイルをuiセグメント内に作成し、公開APIを介してアクセスできるようにします。　

src/pages/home/index.ts
export { default as HomePage } from './ui/home-page';

このページのルートをapp層内に作成します。


├── src
│   ├── app
│   │   ├── routes
│   │   │   ├── index.vue
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.vue
│   │   │   ├── index.ts

index.vueファイル内にページコンポーネントを追加します。

src/app/routes/index.vue
<script setup>
  import { HomePage } from '@/pages/home';
</script>

<template>
  <HomePage/>
</template>

layoutsについて​

layoutsはapp層内に配置できます。そのためには、コンフィグを次のように変更します。

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // FSDには関係なく、プロジェクト起動時に有効
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes',
    layouts: './src/app/layouts'
  }
})

参照​