Learn Nuxt - Modern Tooling & Build Automation

#Introduction

Good developers delegate repetitive work to machines. Episode 19 covers modern tooling and build automation in Nuxt: making full use of the CLI and Vite, tightening TypeScript, building a CI/CD pipeline, and automating linting and formatting so quality is guaranteed on every commit.

This episode brings together a lot of what you've already built: ESLint and Prettier from episode 3, typecheck from episode 16, and tests from episode 16. All of it gets wired into a pipeline that runs automatically.

#Nuxt CLI, Vite, and Build Tooling

#Essential Nuxi Commands

Nuxi provides the core commands you'll use every day:

npx nuxi dev
npx nuxi build
npx nuxi preview
npx nuxi typecheck
npx nuxi analyze

nuxi dev runs the dev server, nuxi build builds for production, nuxi preview starts a server for the build output, while typecheck and analyze inspect code and bundles. npm scripts in package.json usually wrap these commands.

#Vite as the Bundler

Nuxt uses Vite as the default bundler. Vite provides a fast dev server and an optimal build. Additional Vite configuration can be written in nuxt.config.ts:

Opsi Vite di nuxt.config

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: { protocol: "ws" },
    },
    build: {
      target: "esnext",
    },
  },
})

The vite.build.target option sets the build target version — esnext leverages the latest JavaScript features for modern browsers.

#TypeScript Integration and Strict Typing

#Strict TypeScript Across the Project

Nuxt is TypeScript-native. Enable strict mode and make sure .vue files are checked too:

npx nuxi typecheck

Add "strict": true in tsconfig.json if it isn't already. Strict mode catches many potential bugs early — for example, null values used without checking.

#Typing for Auto-imports

Nuxt generates type declarations for auto-imports in .nuxt/imports.d.ts. Leverage useFetch and useAsyncData, which already have generic typing:

Typed data fetching

interface Produk {
  id: string
  nama: string
  harga: number
}
 
const { data: produk } = await useFetch<Produk[]>("/api/produk")

useFetch<Produk[]>("/api/produk") tells TypeScript the shape of the expected data. Errors accessing the wrong field are caught while typing, not when the application runs in production.

#CI/CD Pipeline for Nuxt Apps

#A Basic Pipeline in GitHub Actions

Set up a pipeline that runs typecheck, lint, and tests for every push:

.github/workflows/ci.yml

name: CI
on:
  push:
    branches: [main]
  pull_request:
 
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npx nuxt typecheck
      - run: npx eslint .
      - run: npm test

This pipeline runs typecheck, lint, and unit tests on every pull request. Adding an npm run build step ensures the project can always be built too.

#Automatic Build and Deploy

The production pipeline adds build and deploy:

npm run build

The build output is then deployed to the platform of your choice — deployment details are covered in episode 20. The key to good CI: every change that passes the pipeline is a safe release candidate.

#Linting, Formatting, and Pre-commit Hooks

#Automating with pre-commit

Make sure committed code is clean by running lint and format automatically before committing:

npm install --save-dev husky lint-staged
npx husky init

Then configure package.json:

lint-staged config

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

lint-staged only processes changed files, so it's fast. With husky, these commands run before every commit — bad code never reaches the repository.

#A Consistent Flow

The end result: developers write code, pre-commit tidies it, CI verifies it, and deployment happens automatically after it passes. Quality becomes built into the system, not dependent on memory.

#Conclusion

Episode 19 wires your tooling into a system: nuxi commands and Vite for fast builds, strict TypeScript for type safety, CI/CD pipelines for automatic verification, and husky and lint-staged to enforce quality before code enters the repository.

Key takeaways:

• nuxi dev, build, preview, and typecheck are the core daily commands.
• Nuxt uses Vite; bundler options are configured through nuxt.config.ts.
• Strict TypeScript catches bugs earlier across the whole project.
• A CI pipeline runs typecheck, lint, and tests on every PR.
• Production builds must be part of the pipeline so they're always tested.
• Husky and lint-staged automate linting and formatting before commits.

In the next episode, episode 20, we will discuss deployment and hosting — deployment options on Vercel, Netlify, Cloudflare, and self-hosting, Nitro deployment targets for serverless, managing build output and caching, and a production-ready deployment flow.