Guide to Engineering a Nuxt Project

Modern front-end development places high demands on engineering rigor, code standardization, and automation. As a modern full-stack framework powered by Vue.js, Nuxt offers out-of-the-box capabilities that significantly boost development velocity. However, in enterprise-grade production environments, default configurations alone fall short. Establishing a comprehensive engineering workflow is essential to guarantee code quality, streamline team collaboration, and ensure long-term maintainability.

This article outlines how to build a production-grade engineering pipeline for a Nuxt project from scratch, focusing on four key dimensions: code style enforcement, Git hooks, automated linting workflows, and environment variable management.
In multi-developer projects, maintaining a unified code style is paramount. ESLint catches syntax and logical errors in the codebase, while Prettier handles code formatting.

To integrate these tools in a Nuxt 3 environment—which typically includes @nuxtjs/eslint-module by default—you need to install the necessary peer dependencies:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Create a .prettierrc file in your project root to define your formatting rules:

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

Next, integrate Prettier into eslint.config.mjs (Nuxt 3's default flat configuration file) to prevent rule conflicts:

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
  rules: {
    'prettier/prettier': 'error',
    'vue/no-multiple-template-root': 'off'
  }
})

Standardizing Commit Messages: Commitlint and Husky

Code quality extends beyond source files to include version control history. Standardized commit messages facilitate automated changelog generation and rapid debugging. We use Husky and Commitlint to intercept and validate non-compliant commits.

1. Install Husky and Commitlint dependencies:

npm install --save-dev husky @commitlint/cli @commitlint/config-conventional

2. Initialize Husky:

npx husky init

This generates a .husky directory in your root folder. Update the .husky/commit-msg file as follows:

npx --no -- commitlint --edit ${1}

3. Create a commitlint.config.js file in the root directory:

module.exports = {
  extends: ['@commitlint/config-conventional']
}

Now, vague commit messages like git commit -m "fix bug" will be rejected. Developers must adhere to the Conventional Commits specification, such as fix(auth): fix login token expired error.

Automated Workflows: Leveraging Lint-staged

While ESLint and Commitlint ensure code and commit quality, running linters across the entire codebase on every commit becomes a performance bottleneck as the project grows. lint-staged runs linters strictly against staged files in the Git index, targeting only modified code.

1. Install lint-staged:

npm install --save-dev lint-staged

2. Add configuration to package.json:

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

3. Update the .husky/pre-commit hook file:

npx lint-staged

With this setup, every git commit automatically formats and statically analyzes only the staged changes, preventing unformatted or non-compliant code from entering the repository.

Multi-Environment and Security Management

Nuxt provides a robust and secure runtime configuration mechanism. In enterprise environments, hardcoding sensitive information—such as database credentials or API keys—is strictly prohibited.

Maintain distinct environment configuration files in your project root:

• .env: Local development environment variables
• .env.production: Production environment variables

Centralize these settings in nuxt.config.ts using runtimeConfig:

export default defineNuxtConfig({
  runtimeConfig: {
    // Private variables available only on the server side
    apiSecret: process.env.API_SECRET,
    
    // Public variables exposed to the client side
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

Access these configurations safely and conveniently within your application code using useRuntimeConfig():

const config = useRuntimeConfig()
console.log(config.public.apiBase)

Conclusion

By implementing these steps, you establish a robust engineering architecture for your Nuxt project, encompassing code style checking (ESLint/Prettier), commit message standards (Commitlint), automated workflows (Husky/Lint-staged), and secure environment management (Runtime Config). This framework not only elevates code quality but also minimizes communication overhead as teams scale, laying a rock-solid foundation for long-term project iteration.