Learn Vue - Modern Tooling & Build Automation

#Introduction

An application's quality is determined not only by its code, but also by the tools around it: a fast bundler, a strict language, and an automated pipeline. Good tooling lets developers focus on features instead of repetitive tasks.

Episode 19 covers modern tooling for Vue: Vite as a high-performance bundler with Vue CLI as an alternative, TypeScript integration with strict typing, CI/CD pipelines for building and testing automatically, plus linting, formatting, and pre-commit hooks.

#Vite and Vue CLI

#Scaffolding a Project with Vite

Vite is the default bundler for new Vue projects, known for its instant dev server:

npm create vite@latest my-app -- --template vue-ts

--template vue-ts creates a Vue project with TypeScript. Vite takes advantage of native ESM so hot module replacement runs with almost no delay, even on large projects.

#Building for Production

npm run build

npm run build runs Vue template compilation, TypeScript transpilation, and bundling with optimizations like minification and code splitting. The result lands in the dist folder, ready to deploy.

#TypeScript Integration

#Strict Typing

Enable strict mode in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "preserve"
  }
}

strict: true turns on all strict type checks: noImplicitAny, strictNullChecks, and more. Type errors are caught during development, not in production.

#Typed Props

With <script setup>, props can use generic types:

<script setup lang="ts">
interface Produk {
  id: number;
  nama: string;
  harga: number;
}
 
const props = defineProps<{ produk: Produk }>();
</script>

defineProps<{ produk: Produk }> gives props an explicit type. The editor now shows an error if a parent sends malformed data.

#CI/CD Pipeline for Vue

#A GitHub Actions Workflow

An automated pipeline builds and tests on every push:

name: ci
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

npm ci installs dependencies exactly per the lockfile, then lint, test, and build run in sequence. A failed build stops the pipeline before code reaches staging.

#Linting, Formatting, and Pre-commit Hooks

#ESLint and Prettier

ESLint catches errors and bad patterns; Prettier enforces consistent formatting:

npm install -D eslint prettier lint-staged husky
npx husky init

npx husky init creates the .husky folder where the pre-commit hook is defined.

#The Pre-commit Hook

Run lint only on changed files:

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

"eslint --fix" and "prettier --write" fix files about to be committed automatically. Messy code is stopped at the git hook instead of showing up in code review.

#Summary

Episode 19 tidied up your workshop: Vite for dev experience and fast builds, strict TypeScript as a type safety net, CI/CD pipelines that build and test automatically, plus ESLint, Prettier, and pre-commit hooks that maintain quality.

Key takeaways:

• Vite provides an instant dev server with native ESM.
• --template vue-ts starts a project with TypeScript.
• strict: true enables strict type checking.
• CI/CD runs lint, test, and build automatically.
• Husky runs hooks on pre-commit.
• lint-staged only processes changed files.

In the next episode 20, we'll cover deployment and hosting — deploying to Netlify, Vercel, and other platforms, SPA and static site hosting, configuring environment and build-time variables, plus a smooth production deploy flow.