This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
See Vite Configuration Reference.
npm installnpm run devnpm run buildRun Unit Tests with Vitest
npm run test:unitThis boilerplate has a grid to structure the views with a header, main and footer containers. It has also a simple example of store manager with Pinhia and is responsive for its menubar. There is a example of a vue composable for http requests.
There are 3 routes: "/login" (it is a fake login, just to add a form example), "/" (home, where there are some variables managed by the Pinia store manager) and "/about" (with a button to increment a counter in the home page. This is a Pinhia store example)
- Responsive: there is a navbar that helps to have a responsive design.
- Routing: there are some general routes.
- State manager: Added Pinia as state manager.
- Composables: there is one compasable for http requests.
- Form example: There is a login form as example. It is just and example and it has not any log in functionality. I don't want to add a login functionality to the boilerplate since a lot of projects has not any login.
- Custom types (TS interfaces).
- Unit tests.
- [...] Global css variables: Added theme css variables.
- [...] BEM: block-element-modifier css style is yet to be improved
- [...] Http requests config. Already have the composable to help with http requests
- Guards.
- ESLint and prettier config.
- i18n
- Style-lint config
- Husky and lint-staged conig
- Environment Varables (dot env)
- Global error handling with toaster