Перейти к основному содержимому

Использование с SvelteKit

В SvelteKit проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта SvelteKit и принципами FSD:

  • Изначально, SvelteKit предлагает файловую структуру внутри папки src/routes, в то время как в FSD роутинг должен быть частью слоя app.
  • SvelteKit предлагает складывать всё, что не относится к роутингу в папку src/lib.

Настроим конфиг​

svelte.config.ts
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config}*/
const config = {
  preprocess: [vitePreprocess()],
  kit: {
    adapter: adapter(),
    files: {
      routes: 'src/app/routes',              // перемещаем роутинг внутрь app слоя
      lib: 'src',
      appTemplate: 'src/app/index.html',     // Перемещаем входную точку приложения внутрь слоя app
      assets: 'public'
    },
    alias: {
        '@/*': 'src/*'                       // Создаём алиас для директории src
    }
  }
};
export default config;

Перемещение файлового роутинга в src/app​

Создадим слой app, переместим в него входную точку приложения index.html и создадим папку routes. Таким образом, ваша файловая структура должна выглядеть так:

├── src
│   ├── app
│   │   ├── index.html
│   │   ├── routes
│   ├── pages                               # Папка pages, закреплённая за FSD

Теперь, вы можете создавать роуты для страниц внутри app и подключать к ним страницы из pages.

Например, чтобы добавить главную страницу в проект, вам нужно сделать следующие шаги:

  • Добавить слайс страницы внутри слоя pages
  • Добавить соответствующий роут в папку routes из слоя app
  • Совместить страницу из слайса с роутом

Для того чтобы создать слайс страницы, воспользуемся CLI:

fsd pages home

Создайте файл home-page.vue внутри сегмента ui, откройте к нему доступ с помощью Public API

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

Создайте роут для этой страницы внутри слоя app:


├── src
│   ├── app
│   │   ├── routes
│   │   │   ├── +page.svelte
│   │   ├── index.html
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.svelte
│   │   │   ├── index.ts

Добавьте внутрь index.svelte файла компонент вашей страницы:

src/app/routes/+page.svelte
<script>
  import { HomePage } from '@/pages/home';
</script>


<HomePage/>

См. также​