This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
.vue
Imports in TSTypeScript 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:
Extensions: Show Built-in Extensions
from VSCode's command palette
2) Find TypeScript and JavaScript Language Features
, right click and select Disable (Workspace)
Developer: Reload Window
from the command palette.See Vite Configuration Reference.
VITE_BACKEND_URL=http://localhost:3000
VITE_PROXY_URL=http://localhost:5001
LAYER8_CLIENT_ID=
LAYER8_CLIENT_SECRET=
LAYER8_URL=http://localhost:5001
OAUTH_JWT_SECRET_KEY=secret
OAUTH2_CALLBACK_URL=http://localhost:5173/oauth2/callback
Note: Make sure you have the layer8 running on localhost:5001, register there as a client, and add the client id and secret to the .env file.
npm install && npm install layer8_interceptor && cd backend && npm install && npm install layer8_middleware && cd ..
OR
make install
cd backend && npm run start // will start the backend at port 3000
OR
make run-backend
npm run dev // will start the frontend at port 5173
OR
make run-frontend
npm run dev
npm run build
npm run test:unit
npm run test:e2e:dev
This runs the end-to-end tests against the Vite development server. It is much faster than the production build.
But it's still recommended to test the production build with test:e2e
before deploying (e.g. in CI environments):
npm run build
npm run test:e2e
npm run lint