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

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について

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

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

参照