| .. | ||
| .storybook | ||
| i18n | ||
| public | ||
| public-msw | ||
| src | ||
| .browserslistrc | ||
| .editorconfig | ||
| .env.development | ||
| .env.test | ||
| .eslintrc-auto-import.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.json | ||
| CHANGELOG.md | ||
| chromatic.config.json | ||
| dir2json.d.ts | ||
| env.d.ts | ||
| eslint.config.ts | ||
| index.html | ||
| openapi-generator.mts | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| uno.config.ts | ||
| vite.config.mts | ||
| vitest.shims.d.ts | ||
OpenAPI
OpenAPI-fetch is used to generate a fully typed client from the Komga OpenAPI documentation.
The openapi-generate tasks will generate bindings, and should be run when the OpenAPI definition has changed.
Pinia Colada
Pinia Colada is used for all the API queries and mutations.
Tests
Vitest projects are used to specify different kind of tests:
unit: unit testsstorybook: component tests, defined in Storybook stories. Those can be run from Storybook directly or through Vitest.
Mock Service Worker is used to mock the Komga API.
Code formatting
Both ESLint and Prettier are used in combination.
Tasks:
- ESLint:
lintandlint:fix - Prettier:
prettierandprettier:fix
Type checking
Vite does not perform type-checking and leaves the job to the IDE. The type-check task can be used to perform type checking.
Storybook
Storybook is used for component development and testing. Run storybook:dev to start the Storybook server.
i18n
FormatJS is used for i18n.
Message IDs are generated automatically using the ESLint plugin, and hard-coded message IDs should be avoided.
Tasks:
i18n:extract: extracts the messages from the source into thei18nfolder. This folder is what Weblate uses.i18n:compile: compiles the translated files ini18ninto./src/i18n. This folder is what the application uses at runtime.
The Vite plugin dir2json is used to load the available translation files, see ./src/utils/locale-helper.ts for more details.
Components
Vue template files are segregated in different categories depending on usage:
./src/components: UI components../src/pages: Pages make use of components as well as API / Pinia stores. Each Component in that folder is converted to a navigable route using unplugin-vue-router. Pages contain a special<route>to define the layout to use as well as other router meta attributes../src/layouts: Wrapper component around Pages.
Components are automatically imported using unplugin-vue-components.
Icons
UnoCSS Icons preset is used for icons, with the MDI set from Iconify.