🩻

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

2022/08/28に公開

この記事は

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

  1. 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
      }
    }
    
  2. 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)
    })
    
GitHubで編集を提案

Discussion