Nuxt.jsの初期設定メモ

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: None
? 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 @nuxt/http sass@1.34.0 sass-loader@10.1.1 @nuxtjs/style-resources stylelint-scss@3.19.0 stylelint-config-recommended-scss@4.3.0
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"],
},

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
    // https://http.nuxtjs.org/
    "@nuxt/http",
],

// http module configuration: https://http.nuxtjs.org/options
http: {
    baseURL: "/",
},

package.json

"scripts": {
    ...
    "lint:js": "eslint --ext \".js,.vue\" --fix --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css,scss}\" --fix --ignore-path .gitignore",
    ...
},

Dockerfile

FROM node:16.14-alpine

COPY ./package.json /usr/src/app/
WORKDIR /usr/src/app
RUN npm install -g npm && npm install

COPY . /usr/src/app
COPY ./entrypoint.sh /usr/local/bin/entrypoint.sh
RUN chmod 755 /usr/local/bin/entrypoint.sh

RUN chown -R node /usr/src/app/node_modules

ENV HOST 0.0.0.0
EXPOSE 3000

ENTRYPOINT [ "entrypoint.sh" ]
# DEBUG=falseの場合の実行コマンド
# SSR用
CMD npm run start
# SSG用
# CMD npm run generate

entrypoint.sh

#!/bin/sh

npm install -g npm && npm install;

if "$DEBUG"; then
  exec npm run dev
else
  exec "$@"
fi