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'
  }
})

参照

• NuxtJSのディレクトリ設定変更に関するドキュメント
• NuxtJSのルーター設定変更に関するドキュメント
• NuxtJSのエイリアス設定変更に関するドキュメント