Vue 3 + Vite 5 boilerplate by @blatisgense

Note: file.txt within folders uses to include they in commits.

Getting started

Bundler

As a bundler used Vite 5 in case of its benefits:

• Fastest JS/TS bundler at this time.
• Less waiting time for reflecting file updates
• Lighter than Vite 4 by removing deprecated features.

Components

• global: Components registered as global.
• pages: Pages carcasses.
• sections: Sections components.
• ui: UI parts (Btns, inputs, ect.).
• views: Components that visibility depends on route.

Router

• router.ts: Vue-router 4 configuration and guards.
• routes.ts: List of routes.

State

Folder for Pinia stores.

Assets

• fonts: Font files, connected within fonts.scss.
• media: Any media files.
• styles: External styles.

Tools

• EsLint: Sets up rules for code.
• Prettier: Sets up styling for code.
• Docker compose: Deploy docker container and build frontend image. Ready to extend with other services.
• Sharp: Transform images with a Sharp library. There is a ready script to use it (sharp.ts)

TypeScript

TypeScript configured for newest features and with aliases for key folders

Define environment variables within vite-env.d.ts, Cypress command types in cypress.d.ts, Other types can be placed wherever with .d.ts extension or inside main types file index.d.ts

Testing

• Component and unit: Provided by Vitest
• E2E: Released with Cypress.

Public

Any static files.

Contacts

You can link me by the contacts below:

• Telegram: @Blatisgense (best way)
• Discord: blatisgense
• Email: lavr.marudenko@gmail.com