Nuxt3の開発用テンプレート作った

この記事は

2022/8時点でNuxt3開発するための最低限のライブラリを入れたリポジトリを作ったときの記録です。

前提条件

• nuxt:3.0.0-rc.8
• vuetify:3.0.0-beta.9

完成物(是非git cloneして使ってみてください)

https://github.com/Gityosan/Nuxt3-template

目次

• とりあえずライブラリ群導入
• 設定

とりあえずライブラリ群導入

1. vuetifyとsass

   yarn add -D vuetify@next sass @mdi/font @mdi/js
   

2. eslint 関連

   yarn add -D eslint eslint-config-prettier eslint-plugin-nuxt prettier
   

3. stylelint関連

   yarn add -D stylelint stylelint-config-prettier stylelint-config-recess-order　stylelint-config-standard-scss postcss-html
   

4. typescript関連

   yarn add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript
   

最終的なpackage.json

{
  ...,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "lint:js": "eslint --ext \".js,.vue,.ts\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix"
  },
  "devDependencies": {
    "@mdi/font": "^7.0.96",
    "@mdi/js": "^7.0.96",
    "@nuxtjs/eslint-config-typescript": "^10.0.0",
    "@typescript-eslint/eslint-plugin": "^5.35.1",
    "@typescript-eslint/parser": "^5.35.1",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "nuxt": "^3.0.0-rc.8",
    "postcss-html": "^1.5.0",
    "prettier": "^2.7.1",
    "sass": "^1.54.5",
    "stylelint": "^14.11.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard-scss": "^5.0.0",
    "typescript": "^4.8.2",
    "vuetify": "^3.0.0-beta.9"
  }
}

設定

1. eslint 関連
   .eslintrc.js

   module.exports = {
     root: true,
     env: {
       browser: true,
       es2021: true,
       node: true
     },
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended',
       'plugin:vue/vue3-recommended',
       'plugin:nuxt/recommended',
       '@nuxtjs/eslint-config-typescript',
       'prettier'
     ],
     plugins: [],
     rules: {
       // global settings
       semi: [2, 'never'],
       'no-console': 'off',
       // typescript settings
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       // vue settings
       'vue/script-setup-uses-vars': 0,
       'vue/attribute-hyphenation': 0,
       'vue/require-default-prop': 0,
       'vue/no-mutating-props': 0,
       'vue/require-explicit-emits': 0,
       'vue/no-v-model-argument': 0,
       'vue/no-v-html': 0,
       'vue/multi-word-component-names': 0,
       'vue/no-useless-template-attributes': 0
       // nuxt settings
     }
   }
   

   以前はpluginsに

   {
     "plugins": ["@typescript-eslint"]
   }
   

   などと書いていましたが、下記記事を参考に消しました。

https://zenn.dev/kimromi/articles/b7cf98005f3193

2. stylelint関連
   .stylelintrc.js

   module.exports = {
     customSyntax: 'postcss-html',
     extends: [
       'stylelint-config-standard-scss',
       'stylelint-config-recess-order',
       'stylelint-config-prettier'
     ],
     plugins: [],
     rules: {
       'scss/at-rule-no-unknown': true,
       'scss/comment-no-empty': null,
       'string-quotes': 'single',
       'block-no-empty': null,
       'number-leading-zero': null,
       'color-hex-length': 'short',
       'color-no-invalid-hex': true,
       indentation: 2,
       'length-zero-no-unit': true,
       'media-feature-name-no-vendor-prefix': true,
       'shorthand-property-no-redundant-values': true,
       'no-invalid-position-at-import-rule': null,
       'no-irregular-whitespace': null,
       'selector-class-pattern': null,
       'property-no-unknown': null,
       // prettierのインラインスタイルの末尾のコロンを削除するとコンフリクトするため、回避設定
       'declaration-block-trailing-semicolon': null,
       // ::v-deepエラー回避
       'selector-pseudo-class-no-unknown': null
     }
   }
   

3. vuetify関連
   plugins/vuetify.ts

   import '@mdi/font/css/materialdesignicons.css'
   import { createVuetify } from 'vuetify'
   import * as components from 'vuetify/components'
   import * as directives from 'vuetify/directives'
   
   export default defineNuxtPlugin((app) => {
     const vuetify = createVuetify({
       directives,
       components
     })
     app.vueApp.use(vuetify)
   })