Nuxt.jsの初期設定メモ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Nuxt.jsでインストール後にいつも行っている環境設定をまとめました。
自分用メモなのでかなり簡潔に書いています。

プロジェクト作成

npx create-nuxt-app client

create-nuxt-app設定

✨  Generating Nuxt.js project in client
? Project name: <project-name>-client
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Lint staged files, StyleLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using 
typescript)
? Continuous integration: None
? Version control system: None

ライブラリをインストール

npm i sass@1.34.0 sass-loader@10.1.1 fibers @nuxtjs/style-resources stylelint-scss stylelint-config-recommended-scss
npm i dayjs vue-js-modal --save

.editorconfig

[*]
indent_style = tab
indent_size = 4

eslintrc.js

rules: {
    indent: ["error", "tab"],
    "no-tabs": 0,
    "vue/html-indent": ["error", "tab"],
    "vue/script-indent": ["error", "tab"],
    quotes: ["error", "double", {
        avoidEscape: true,
        allowTemplateLiterals: true,
    }],
    "vue/v-bind-style": ["error", "longform"],
    "vue/v-on-style": ["error", "longform"],
    "vue/no-v-html": 0,
    "comma-dangle": ["error", "always-multiline"],
},

stylelint.config.js

extends: [
    ...
    "stylelint-config-recommended-scss",
],

plugins: [
    "stylelint-scss",
],

rules: {
    indentation: "tab",
    "no-empty-source": [true, {severity: "warning"}],
    "block-no-empty": [true, {severity: "warning"}],
        "no-descending-specificity": null,
    "selector-pseudo-element-no-unknown": [
        true,
        {
            ignorePseudoElements: ["v-deep"],
        },
    ],
},

nuxt.config.js


head: { ... titleTemplate: "%s - サイトタイトル", ... } buildModules: [ ... // https://github.com/nuxt-community/style-resources-module "@nuxtjs/style-resources", ], // ESLint Configuration: https://github.com/nuxt-community/eslint-module eslint: { fix: true, }, // StyleLint Configuration: https://github.com/nuxt-community/stylelint-module stylelint: { fix: true, }, // Style Resources Configuration: https://github.com/nuxt-community/style-resources-module styleResources: { scss: ["@/assets/scss/*.scss"], },

package.json

"scripts": {
    ...
    "lint:js": "eslint --ext \".js,.vue\" --fix --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css,scss}\" --fix --ignore-path .gitignore",
    ...
},
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)