Projekt erstellen

Ein modernes Vue-Projekt benötigt verschiedene Tools für Build, Qualitätssicherung und Testing.

Bundler: Übersicht

Bundler transformieren und bündeln Source-Code für den Browser.

Bundler	Beschreibung	Vue-Support
Vite	Schnell, ESM-basiert, von Vue-Team	Erstklassig
Webpack	Etabliert, sehr konfigurierbar	Via vue-loader
Parcel	Zero-Config	Via Plugin
esbuild	Extrem schnell, Go-basiert	Limitiert
Rollup	Library-Bundling	Via Plugin

Tipp

Empfehlung: Vite - offizielles Build-Tool für Vue, beste DX

Vite

Vorteile

• Blitzschneller Dev-Server (ESM)
• Hot Module Replacement (HMR)
• Optimierter Production Build
• TypeScript out-of-the-box
• Von Vue-Core-Team entwickelt

Installation

npm create vue@latest
# oder
npm create vite@latest --template vue

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    port: 3000
  }
})

Linting: Übersicht

Linter analysieren Code statisch und finden Fehler, Bugs und Style-Probleme.

Tool	Sprache	Geschwindigkeit	Vue-Support
ESLint	JavaScript	Mittel	eslint-plugin-vue
oxlint	Rust	Sehr schnell	Ja
Biome	Rust	Sehr schnell	Experimentell
typescript-eslint	-	Mittel	Via ESLint

Hinweis

ESLint ist der Standard, aber Rust-basierte Tools werden immer beliebter

ESLint

Installation

npm install -D eslint @eslint/js
npm install -D eslint-plugin-vue
npm install -D typescript-eslint  # Für TS

Scripts

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

eslint.config.js (Flat Config)

import js from '@eslint/js'
import vue from 'eslint-plugin-vue'
import ts from 'typescript-eslint'

export default [
  js.configs.recommended,
  ...ts.configs.recommended,
  ...vue.configs['flat/recommended'],
  {
    rules: {
      'vue/multi-word-component-names': 'off'
    }
  }
]

Formatting: Übersicht

Formatter sorgen für konsistenten Code-Stil im gesamten Projekt.

Tool	Beschreibung	Vue-Support
Prettier	Standard-Formatter	Vollständig
Biome	Linter + Formatter	Experimentell
dprint	Rust, konfigurierbar	Via Plugin

Tipp

Empfehlung: Prettier - beste Vue-Unterstützung, breite Akzeptanz

Prettier

Installation

npm install -D prettier

Scripts

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "vueIndentScriptAndStyle": true
}

Hinweis

vueIndentScriptAndStyle kontrolliert Einrückung in .vue Dateien

ESLint + Prettier zusammen

ESLint und Prettier können sich in die Quere kommen. Lösung:

npm install -D eslint-config-prettier

eslint.config.js

import js from '@eslint/js'
import vue from 'eslint-plugin-vue'
import prettier from 'eslint-config-prettier'

export default [
  js.configs.recommended,
  ...vue.configs['flat/recommended'],
  prettier,  // Muss als letztes kommen!
  {
    rules: {
      // Eigene Regeln
    }
  }
]

Hinweis

eslint-config-prettier deaktiviert alle ESLint-Regeln, die mit Prettier kollidieren

Testing: Übersicht

Tool	Typ	Geschwindigkeit	Vue-Support
Vitest	Unit/Integration	Sehr schnell	Erstklassig
Jest	Unit/Integration	Mittel	Via Config
Cypress	E2E	-	Component Testing
Playwright	E2E	-	Via Setup

Tipp

Empfehlung: Vitest für Unit-Tests, Playwright oder Cypress für E2E

Vitest vs Jest

Vitest

npm install -D vitest @vue/test-utils

vite.config.js

export default defineConfig({
  test: {
    environment: 'happy-dom',
    globals: true
  }
})

• Nutzt Vite-Config
• Native ESM
• HMR für Tests
• Jest-kompatible API

Jest

npm install -D jest @vue/vue3-jest
npm install -D babel-jest @babel/preset-env

jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest'
  }
}

• Mehr Setup nötig
• Etabliertes Ecosystem
• CommonJS-basiert

Komplettes Setup: Empfehlung

npm create vue@latest my-project

# Auswahl:
# TypeScript? Yes
# JSX? No
# Vue Router? Yes
# Pinia? Yes
# Vitest? Yes
# E2E Testing? Playwright
# ESLint? Yes
# Prettier? Yes
# Vue DevTools? Yes

Ergebnis:

• Bundler: Vite
• Linting: ESLint + eslint-plugin-vue
• Formatting: Prettier
• Testing: Vitest + Playwright

Minimales Setup: create-vite

Für kleinere Projekte oder schnelle Prototypen bietet create-vite einen leichtgewichtigen Start:

create-vite

npm create vite@latest my-app -- --template vue
# oder mit TypeScript
npm create vite@latest my-app -- --template vue-ts

• Nur Vite + Vue
• Minimale Abhängigkeiten
• ~15 MB node_modules
• Kein Router, Pinia, Testing

create-vue

npm create vue@latest my-app

• Interaktive Auswahl
• Router, Pinia, Vitest optional
• ESLint, Prettier optional
• ~80-150 MB node_modules
• Für vollständige Apps

Hinweis

Starte mit create-vite für Experimente, create-vue für echte Projekte

Pre-Commit Hooks mit lint-staged

npm install -D husky lint-staged
npx husky init

.husky/pre-commit

npx lint-staged

package.json

{
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,md,json}": [
      "prettier --write"
    ]
  }
}

Tipp

Automatische Formatierung und Linting vor jedem Commit

Tool-Vergleich: Zusammenfassung

Kategorie	Standard	Schnelle Alternative
Bundler	Vite	-
Linting	ESLint	oxlint, Biome*
Formatting	Prettier	Biome*
Unit Testing	Vitest	Jest
E2E Testing	Playwright	Cypress
Type Checking	TypeScript	-

* Vue-Support noch experimentell

Tipp

Standard-Stack (Vite + ESLint + Prettier + Vitest) ist ausgereift und empfohlen

Dokumentation

Offizielle Dokumentation:

• Vite - Build Tool
• ESLint - Linter
• Prettier - Formatter
• Vitest - Test Framework

Alternative Tools:

• oxlint - Schneller Linter
• Biome - Linter + Formatter
• Playwright - E2E Testing