Nuxt 3 Boilerplate

A Nuxt 3 starter boilerplate with a lot of useful features.

Quick Start

This project using yarn or npm as package manager
Install dependencies yarn or npm install
Run yarn dev or yarn dev to start development server and open http://localhost:3000 in your browser

Available scripts

Setup

Make sure to install the dependencies:

yarn

DevTools

Enable devtools:

yarn devtools:enable

Disable devtools:

yarn devtools:disable

Lint & format

Manually check types:

yarn typecheck

Find ESLint errors:

yarn lint

Find ESLint errors and try to fix them:

yarn lint:fix

Development Server

Start the development server on http://localhost:3000

yarn dev

Production

Build the application for production:

yarn build

Locally preview production build:

yarn preview

Check out the deployment documentation for more information.

Docker

Create and start the development container:

make dev-up

Stop and remove the development container:

make dev-down

Create and start the production container:

make prod-up

Stop and remove the production container:

make prod-down

Features

Setup notes

src directory

Set srcDir option in nuxt.config file.

// nuxt.config.ts

export default defineNuxtConfig({
  srcDir: 'src/',
});

ESLint

Install needed devDependencies

npm i -D eslint eslint-plugin-vue

npm i -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript

Generate config file

npx eslint --init

> How would you like to use ESLint? To check syntax and find problems
> What type of modules does your project use? JavaScript modules (import/export)
> Which framework does your project use? Vue.js
> Does your project use TypeScript? Yes
> Where does your code run? Node
> What format do you want your config file to be in? JavaScript
> Would you like to install them now? No

// .eslintrc.cjs

module.exports = {
  "env": {
      "es2021": true,
      "node": true
  },
  "extends": [
      "eslint:recommended",
      "plugin:vue/essential",
      "plugin:@typescript-eslint/recommended",
      "@nuxtjs/eslint-config-typescript" // Add here
  ],
  "parserOptions": {
      "ecmaVersion": 13,
      "parser": "@typescript-eslint/parser",
      "sourceType": "module"
  },
  "plugins": [
      "vue",
      "@typescript-eslint"
  ],
  "rules": {
  }
};

Add task scripts

"scripts": {
  "lint": "eslint --ext .ts,.js,.vue .",
  "lint:fix": "eslint --fix --ext .ts,.js,.vue ."
},

Update your VS Code settings to look like this:

{
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

Strict type-checking

Install needed devDependencies
```
npm i -D vue-tsc typescript @types/node
```

Enable the typescript.typeCheck option in your nuxt.config file.

export default defineNuxtConfig({
  typescript: {
    strict: true,
    typeCheck: true,
  },
});

Optionally add task script to manually check your types with nuxi.

{
  "scripts": {
    "typecheck": "npx nuxi typecheck",
  },
}

Husky & Lint-staged

Install Husky
```
npx husky-init && npm install
```
Install Lint-staged
```
npm install --save-dev lint-staged
```

Inside .husky/pre-commit replace yarn test with npx lint-staged.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

In the root directory of your project, create the file .lintstagedrc.json with the following contents:
```
{
  "*.{js,jsx,vue,ts,tsx}": "yarn lint:fix"
}
```

VueUse

Install VueUse
```
npm i -D @vueuse/nuxt @vueuse/core
```

Add VueUse to nuxt.config file

// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})

Pinia

Install Pinia
```
npm i pinia @pinia/nuxt
```

Add Pinia to nuxt.config file

// nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    // Auto-import pinia stores defined in `~/stores`
    dirs: ['stores']
  },
  modules: [
    '@pinia/nuxt',
  ],
  pinia: {
    autoImports: [
      'defineStore',
      'storeToRefs',
    ],
  },
});

Nuxt DevTools

To enable devtools run:
```
yarn devtools:enable
```
To disable devtools run:
```
yarn devtools:disable
```

Vitest

Install the following dependencies:

npm i -D vitest jsdom @vitejs/plugin-vue

npm i -D @vue/test-utils @nuxt/test-utils

Create your Vitest configuration file (vitest.config.js):

// vitest.config.js

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

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

Add the following script to your project:

{
  "scripts": {
    "test": "vitest"
  }
}

Create your first test:

// tests/components/HelloWorld.vue

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

import HelloWorld from '../../src/components/HelloWorld.vue';

describe('HelloWorld', () => {
  it('renders correctly', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.html()).contain('Hello, world!')
  })
})

Global types

At the root of your project create a directory named types with an index.ts file.

Add your global types declaration like in the example below.

// ~/types/index.ts

export { };

declare global {
  interface User {
    id: string;
    name: string;
    email: string;
  }
}

Templates

Other templates you may be interested in:

License

MIT @yuzumi

ExcuseMeBro/nuxt-boilerplate