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
ファイルを作成し、設定オブジェクトをエクスポートします。
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を介してアクセスできるようにします。
export { default as HomePage } from './ui/home-page';
このように、ファイル構造は次のようになります。
|── src
│ ├── app
│ │ ├── router.config.ts
│ ├── pages
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.vue
│ │ │ ├── index.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
を次のように変更します。
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を介してアクセスできるようにします。
export { default as HomePage } from './ui/home-page';
このページのルートをapp
層内に作成します。
├── src
│ ├── app
│ │ ├── routes
│ │ │ ├── index.vue
│ ├── pages
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.vue
│ │ │ ├── index.ts
index.vue
ファイル内にページコンポーネントを追加します。
<script setup>
import { HomePage } from '@/pages/home';
</script>
<template>
<HomePage/>
</template>
layouts
について
layouts
はapp
層内に配置できます。そのためには、コンフィグを次のように変更します。
export default defineNuxtConfig({
devtools: { enabled: true }, // FSDには関係なく、プロジェクト起動時に有効
alias: {
"@": '../src'
},
dir: {
pages: './src/app/routes',
layouts: './src/app/layouts'
}
})