Vue.js TypeScript Template

This template is based on the official vue starter app but is extended by common libraries:

• Pinia
• Vue I18n
• Sass
• Linting and formatting before committing

Recommended IDE Setup

VSCode + Volar + TypeScript Vue Plugin (Volar).

Project Setup

Install dependencies

npm ci

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint and fix file with ESLint + Prettier

npm run lint

Type Support for .vue Imports in TS with VS Code

TypeScript cannot handle type information for .vue imports by default. 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:

1. Disable the built-in TypeScript Extension
   1. Open VS Code extensions
   2. Enter @builtin typescript in search box, find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload VS Code

Deploying for production with Docker

To start the application for production using Docker, just run

docker-compose up -d