This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
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 TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint
I used auto import for components, icons, layout and also file system routing for the project.
In this folder, we have the components
related to our page
In this folder, we have the composables
that we use in the project. For adding API
composables with vue-query
, put them in the composables/api
folder.
In this folder, we have the layout
components. For adding a new layout
you should add a component in this folder.
In this folder, we added the mock server. For creating a mock server, we used miragejs
In this folder, we have the pages
We have our types
and interfaces
declaration in this folder, and it's imported into other components
In this folder, we have the utility
functions and also the axios
instance
This project is deployed on https://vermillion-hummingbird-1b050a.netlify.app/
with netlify
deployment
If you have any further questions or feedback, don't hesitate to contact me