✨[Nuxt3]The first thing I do when launching a nuxt3 project. (^3.5.2)

Check node env

$ node -v
v18.12.1

$ npm -v
8.19.2

Setup

Refer to the official documentation for Nuxt3.
Replace ${} with your project name.

$ npx nuxi init ${your-project-name}
$ cd ${your-project-name}
$ npm install

packafge.json

  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18",
    "nuxt": "^3.5.2"
  }

Init Git.

$ git init
$ git add .
$ git commit -m 'setup'
$ git branch -M main
$ git remote add origin git@github.com:${your git name}/${your repository name}.git
$ git push --force origin main 

Try running nuxt on your local server.

$ npm run dev

Change the frontend source directory.

nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  srcDir: "src/"
})

app.vue to src/app.vue and change content.

<template>
  <div>
    Hello world.
  </div>
</template>

Use pages directory.

src/app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

pages/index.vue

<template>
  <div>
    <h1>Title</h1>
    <p>contents</p>
  </div>
</template>

※ If you don't see it, restart the server.

Install sass

npm i sass -D

package.json

  "devDependencies": {
    "sass": "^1.63.4"
  },

assets/scss/main.scss

$color: red;

h1 {
  color: $color;
}

nuxt.config.json

export default defineNuxtConfig({
  css: [
    "@/assets/scss/main.scss"
  ]
})

Install Bootstrap

npm i bootstrap

package.json

  "dependencies": {
    "bootstrap": "^5.3.0"
  }

assets/scss/_bootstrap.scss

@import "../../../node_modules/bootstrap/scss/bootstrap.scss";

assets/scss/main.scss

@import 'bootstrap';

※Please refer to it together with the scss setting.

Install eslint & Prettier

Init eslint

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

package.json

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.59.11",
    "@typescript-eslint/parser": "^5.59.11",
    "@vue/eslint-config-typescript": "^11.0.3",
    "eslint": "^8.43.0",
    "eslint-plugin-vue": "^9.14.1",
  },

Init eslint (refferred to @kurararara)

$ npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

init prettier

npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

package.json

  "devDependencies": {
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.8",
  },

make .prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf"
}

edit .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    '@vue/prettier',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {},
}

If you have error Parsing error: '>' expected

  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module',
  },

If you have error Component name "index" should always be multi-word

  rules: {
    'vue/multi-word-component-names': 'off',
  },

Finally, I do the following:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    '@vue/prettier',
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}

Set head info

nuxt.config.json

export default defineNuxtConfig({ 
 app: {
    head: {
      htmlAttrs: {
        lang: 'en',
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
    },
  },
}