helper-center/packages/web

vue3-starter

A minimal template for new Vue3 projects

   

Features | Installation | Development | Production | Continuous Integration

Features

• 🪧 File-based routing (vue-router, plugin)
• 🖼️ Page layouts (plugin)
• 🌎 Internationalization (vue-i18n)
• 🔄 Auto imports (plugin, plugin)
• ⚡ Unit tests (vitest)
• 🧪 e2e tests (cypress)
• ✨ TypeScript, ESLint & Prettier

Installation

The template runs in bun, a NodeJS compatible JavaScript environment.

git clone https://github.com/FjellOverflow/vue3-starter.git
cd vue3-starter
bun install

To install the recommended extensions for VSCode, open the Extensions tab and type @recommended.

Development

To start the dev-server run bun run dev. All commands are called with bun run <command>, the most common ones are:

• dev: start dev server
• build: build project
• test:unit: run unit tests
• test:e2e:dev: interactive e2e tests

For a full list of all commands, check the scripts section in package.json.

[!WARNING]
While the scripts can also be run with just bun <script>, the build commands needs to be run with bun run build, as bun build will instead use bun's built-in builder, instead of Vite.

Production

To build the project for production, use

bun install --production --frozen-lockfile
bun run build-only

To build a Docker image with the provided Dockerfile, use

docker build -t vue3-starter .
docker run -p 80:80 vue3-starter

which will start an nginx container that serves the application at localhost:80

Continuous Integration

A CI pipeline for Github is configured in .github/workflows/ci.yaml. When changes are pushed to Github, a Github action will run typecheck, lint as well as test:unit and test:e2e. On any errors, the pipeline fails.