create-nuxt-app メモ

## create-nuxt-app
```
yarn create nuxt-app [out-dir]
```
or
```
# 一度だけ実施
npm install create-nuxt-app -g
# 以降は
create-nuxt-app [out-dir]
```

<details><summary>実行例：</summary>

``` sh
$ yarn create nuxt-app app
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@5.0.0" with binaries:
      - create-nuxt-app

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in app
? Project name: app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Template engine: HTML
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? 
? Version control system: Git
warning nuxt > (...)

🎉  Successfully created project app

  To get started:

        cd app
        yarn dev

  To build & start for production:

        cd app
        yarn build
        yarn start

Done in 74.95s.
```
</details>

## 入力事項

1. Project name: 
2. Programming language: 
3. Package manager: 
4. UI framework: 
5. Template engine: 
6. Nuxt.js modules:
7. Linting tools:
8. Testing framework: 
9. Rendering mode: 
10. Deployment target: 
11. Development tools:
12. Continuous integration: 
13. What is your GitHub username?
14. Version control system: 

### Project name: 

### Programming language: 
- JavaScript
- <details><summary>TypeScript</summary>

  - package.json
    ``` json
      "devDependencies": {
        "@nuxt/types": "^2.15.8",
        "@nuxt/typescript-build": "^2.1.0"
      }
    ```
  - nuxt.config.js
    ``` json
      "devDependencies": {
        "@nuxt/types": "^2.15.8",
        "@nuxt/typescript-build": "^2.1.0"
      }
    ```
  </details>

### Package manager: 
- Yarn
- Npm

### UI framework: 
- None
- <details><summary>Ant Design Vue</summary>

    - package.json
      ``` json
        "dependencies": {
          "ant-design-vue": "^1.7.8",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
          'ant-design-vue/dist/antd.css'
        ],
        plugins: [
          '@/plugins/antd-ui'
        ],
      ```
    - plugins/antd-ui.js
  </details>
- <details><summary>BalmUI</summary>

    - package.json
      ``` json
        "dependencies": {
          "balm-ui": "^8.55.0",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
          'balm-ui/dist/balm-ui.css'
        ],
        plugins: [
          '@/plugins/balm-ui'
        ],
      ```
    - plugins/balm-ui.js
  </details>
- <details><summary>Bootstrap Vue</summary>

    - package.json
      ``` json
        "dependencies": {
          "bootstrap": "^4.6.2",
          "bootstrap-vue": "^2.22.0",
        }
      ```
    - nuxt.config.js
      ``` js
        modules: [
          // https://go.nuxtjs.dev/bootstrap
          'bootstrap-vue/nuxt',
        ],
      ```
  </details>
- <details><summary>Buefy</summary>

    - package.json
      ``` json
        "dependencies": {
          "nuxt-buefy": "^0.4.24",
        }
      ```
    - nuxt.config.js
      ``` js
        modules: [
          // https://go.nuxtjs.dev/buefy
          'nuxt-buefy',
        ],
      ```
    - assets/buefy.png
    - components/Card.vue
    - layouts/default.vue
    - pages/inspire.vue
  </details>
- <details><summary>Chakra UI</summary>

    - package.json
      ``` json
        "dependencies": {
          "@chakra-ui/nuxt": "^0.6.0",
          "@nuxtjs/emotion": "^0.1.0",
        }
      ```
    - nuxt.config.js
      ``` js
        modules: [
          // https://go.nuxtjs.dev/chakra
          '@chakra-ui/nuxt',
          // https://go.nuxtjs.dev/emotion
          '@nuxtjs/emotion',
        ],
      ```
    - layouts/default.vue
  </details>
- <details><summary>Element</summary>

    - package.json
      ``` json
        "dependencies": {
          "element-ui": "^2.15.10",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
          'element-ui/lib/theme-chalk/index.css'
        ],
        plugins: [
          '@/plugins/element-ui'
        ],
        build: {
          transpile: [/^element-ui/],
        }
      ```
    - plugins/element-ui.js
  </details>
- <details><summary>Oruga</summary>

    - package.json
      ``` json
        "dependencies": {
          "@oruga-ui/oruga": "^0.5.6",
        }
      ```
    - nuxt.config.js
      ``` js
        modules: [
          // Doc: https://oruga.io/documentation/#nuxt
          '@oruga-ui/oruga/nuxt',
        ],
      ```
    - assets/oruga.png
  </details>
- <details><summary>Primevue</summary>

    - package.json
      ``` json
        "dependencies": {
          "primeflex": "^3.2.1",
          "primeicons": "^6.0.1",
          "primevue": "^2.10.0",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
            'primeflex/primeflex.css'
        ],
        modules: [
          // Doc: https://www.primefaces.org/primevue/showcase-v2/#/setup
          'primevue/nuxt',
        ],
        build: {
          // https://github.com/primefaces/primevue/issues/844
          transpile: ['primevue'],
        }
      ```
  </details>
- <details><summary>Tachyons</summary>

    - package.json
      ``` json
        "dependencies": {
          "tachyons": "^4.12.0",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
          'tachyons/css/tachyons.css'
        ],
      ```
  </details>
- <details><summary>Tailwind CSS</summary>

    - package.json
      ``` json
        "devDependencies": {
          "@nuxtjs/tailwindcss": "^5.3.3",
          "postcss": "^8.4.17"
        }
      ```
    - nuxt.config.js
      ``` js
        buildModules: [
          // https://go.nuxtjs.dev/tailwindcss
          '@nuxtjs/tailwindcss',
        ],
      ```
  </details>
- <details><summary>Windi CSS</summary>

    - package.json
      ``` json
        "devDependencies": {
          "nuxt-windicss": "^2"
        }
      ```
    - nuxt.config.js
      ``` js
        buildModules: [
          'nuxt-windicss',
        ],
      ```
    - windi.config.ts
  </details>
- <details><summary>Vant</summary>

    - package.json
      ``` json
        "dependencies": {
          "vant": "^2.12.50",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
          'vant/lib/index.css'
        ],
        plugins: [
          '@/plugins/vant'
        ],
      ```
    - plugins/vant.js
  </details>
- <details><summary>View UI</summary>

    - package.json
      ``` json
        "dependencies": {
          "view-design": "^4.7.0",
        }
      ```
    - nuxt.config.js
      ``` js
        css: [
          'view-design/dist/styles/iview.css'
        ],
        plugins: [
          '@/plugins/view-ui'
        ],
      ```
    - plugins/view-ui.js
  </details>
- <details><summary>Vuetify.js</summary>

    - package.json
      ``` json
        "dependencies": {
          "vuetify": "^2.6.10"
        },
        "devDependencies": {
          "@nuxtjs/vuetify": "^1.12.3"
        }
      ```
    - nuxt.config.js
      ``` js
      import colors from 'vuetify/es5/util/colors'
      
      export default {
        // Global page headers: https://go.nuxtjs.dev/config-head
        head: {
          titleTemplate: '%s - app',
        }
        buildModules: [
          // https://go.nuxtjs.dev/vuetify
          '@nuxtjs/vuetify',
        ],
        // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
        vuetify: {
          customVariables: ['~/assets/variables.scss'],
          theme: {
            dark: true,
            themes: {
              dark: {
                primary: colors.blue.darken2,
                accent: colors.grey.darken3,
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
              }
            }
          }
        },
      }
      ```
    - assets/variables.scss
    - components/VuetifyLogo.vue
    - layouts/default.vue
    - layouts/error.vue
    - pages/inspire.vue
    - static/v.png
    - static/vuetify-logo.svg
  </details>


### Template engine: 
- HTML
- <details><summary>Pug</summary>

  - package.json
    ``` json
      "dependencies": {
        "pug": "^3.0.2",
        "pug-plain-loader": "^1.1.0",
      },
    ```
  - pages/index.vue
    ``` vue
    <template lang="pug">
      tutorial
    </template>
    ```
  </details>

### Nuxt.js modules:
- <details><summary>[ ] Axios - Promise based HTTP client</summary>

  - package.json
    ``` json
      "dependencies": {
        "@nuxtjs/axios": "^5.13.6",
      },
    ```
  - tsconfig.json
    ``` json
      "compilerOptions": {
        "types": [
          "@nuxtjs/axios",
        ]
      },
    ```
  - nuxt.config.js
    ``` js
      modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
      ],
      // Axios module configuration: https://go.nuxtjs.dev/config-axios
      axios: {
        // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
        baseURL: '/',
      },
    ```
  </details>
- <details><summary>[ ] Progressive Web App (PWA)</summary>

  - package.json
    ``` json
      "dependencies": {
        "@nuxtjs/pwa": "^3.3.5",
      },
    ```
  - nuxt.config.js
    ``` js
      modules: [
        // https://go.nuxtjs.dev/pwa
        '@nuxtjs/pwa',
      ],
      // PWA module configuration: https://go.nuxtjs.dev/pwa
      pwa: {
        manifest: {
          lang: 'en'
        }
      },
    ```
  - static/icon.png
  </details>
- <details><summary>[ ] Content - Git-based headless CMS</summary>

  - package.json
    ``` json
      "dependencies": {
        "@nuxt/content": "^1.0.0",
      },
    ```
  - tsconfig.json
    ``` json
      "compilerOptions": {
        "types": [
          "@nuxt/content",
        ]
      },
    ```
  - nuxt.config.js
    ``` js
      modules: [
        // https://go.nuxtjs.dev/content
        '@nuxt/content',
      ],
      // Content module configuration: https://go.nuxtjs.dev/config-content
      content: {},
    ```
  - content/hello.md
  </details>

### Linting tools:
- <details><summary>[ ] ESLint</summary>

  - package.json
    ``` json
      "scripts": {
        "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
        "lint": "yarn lint:js",
        "lintfix": "yarn lint:js --fix"
      },
      "devDependencies": {
        "@babel/eslint-parser": "^7.19.1",
        "@nuxtjs/eslint-config-typescript": "^11.0.0",
        "@nuxtjs/eslint-module": "^3.1.0",
        "eslint": "^8.24.0",
        "eslint-plugin-nuxt": "^4.0.0",
        "eslint-plugin-vue": "^9.5.1"
      }
    ```
  - .eslintrc.js
  </details>
- <details><summary>[ ] Prettier</summary>

  - package.json
    ``` json
      "scripts": {
        "lint:prettier": "prettier --check .",
        "lint": "yarn lint:prettier",
        "lintfix": "prettier --write --list-different ."
      },
      "devDependencies": {
        "eslint-config-prettier": "^8.5.0",
        "prettier": "^2.7.1"
      }
    ```
  - .prettierrc
  - .prettierignore
  </details>
- <details><summary>[ ] Lint staged files</summary>

  - .git/config
    ``` 
    [core]
      hooksPath = .husky
    ```
  - package.json
    ``` json
      "scripts": {
        "prepare": "husky install"
      },
      "lint-staged": {},
      "devDependencies": {
        "husky": "^8.0.1",
        "lint-staged": "^13.0.3"
      }
    ```
  - .husky/_/.gitignore
  - .husky/_/husky.sh
  </details>
- <details><summary>[ ] StyleLint</summary>

  - package.json
    ``` json
      "scripts": {
        "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
        "lint": "yarn lint:style",
        "lintfix": "yarn lint:style --fix"
      },
      "devDependencies": {
        "@nuxtjs/stylelint-module": "^4.1.0",
        "postcss-html": "^1.5.0",
        "stylelint": "^14.13.0",
        "stylelint-config-recommended-vue": "^1.4.0",
        "stylelint-config-standard": "^28.0.0"
      }
    ```
  - nuxt.config.js
    ``` js
      buildModules: [
        // https://go.nuxtjs.dev/stylelint
        '@nuxtjs/stylelint-module',
      ],
    ```
  - stylelint.config.js
  </details>
- <details><summary>[ ] Commitlint</summary>

  - .git/config
    ``` 
    [core]
      hooksPath = .husky
    ```
  - package.json
    ``` json
      "scripts": {
        "prepare": "husky install"
      },
      "lint-staged": {},
      "devDependencies": {
        "@commitlint/cli": "^17.1.2",
        "@commitlint/config-conventional": "^17.1.0",
        "husky": "^8.0.1",
      }
    ```
  - .husky/_/.gitignore
  - .husky/_/husky.sh
  - .husky/commit-msg
  - .husky/common.sh
  </details>

### Testing framework: 
- None
- <details><summary>Jest</summary>

  - package.json
    ``` json
      "scripts": {
        "test": "jest"
      },
      "devDependencies": {
        "@vue/test-utils": "^1.3.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-jest": "^29.1.2",
        "jest": "^29.1.2",
        "jest-environment-jsdom": "^29.1.2",
        "ts-jest": "^29.0.3",
        "vue-jest": "^3.0.4"
      }
    ```
  - .babelrc
  - jest.config.js
  - test/NuxtLogo.spec.js
  </details>
- <details><summary>AVA</summary>

  - package.json
    ``` json
      "scripts": {
        "test": "yarn test:unit && yarn test:e2e",
        "test:unit": "cross-env TEST=unit ava ./test/specs/**/*",
        "test:e2e": "cross-env TEST=e2e ava ./test/e2e/**/*"
      },
      "devDependencies": {
        "@vue/test-utils": "^1.3.0",
        "ava": "^4.3.3",
        "babel-plugin-module-resolver": "^4.1.0",
        "cross-env": "^7.0.3",
        "jsdom": "^20.0.1",
        "jsdom-global": "^3.0.2",
        "require-extension-hooks": "^0.3.3",
        "require-extension-hooks-babel": "^1.0.0",
        "require-extension-hooks-vue": "^3.0.0"
      }
    ```
  - .babelrc
  - ava.config.cjs
  - test/e2e/index.spec.js
  - test/helpers/ava.setup.js
  - test/specs/NuxtLogo.spec.js
  </details>
- <details><summary>WebdriverIO</summary>

  - package.json
    ``` json
      "scripts": {
        "test:e2e": "wdio wdio.conf.js"
      },
      "devDependencies": {
        "@wdio/cli": "^7.25.1",
        "@wdio/local-runner": "^7.25.1",
        "@wdio/mocha-framework": "^7.25.1",
        "@wdio/spec-reporter": "^7.25.1",
        "@wdio/sync": "^7.25.1",
        "eslint-plugin-wdio": "^7.21.0",
        "webdriverio": "^7.25.1"
      }
    ```
  - wdio.conf.js
  - test/e2e/pageObjects/main.page.js
  - test/e2e/specs/index.spec.js
  </details>
- <details><summary>Nightwatch</summary>

  - package.json
    ``` json
      "scripts": {
        "test:e2e": "nightwatch"
      },
      "devDependencies": {
        "chromedriver": "^106.0.1",
        "nightwatch": "^2.3.9"
      }
    ```
  - nightwatch.conf.js
  - nightwatch_globals.js
  - test/e2e/pageObjects/main.js
  - test/e2e/specs/index.spec.js
  </details>

### Rendering mode: 
- Universal (SSR / SSG)
- <details><summary>Single Page App</summary>

  - nuxt.config.js
    ``` js
      // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
      ssr: false,
    ```
  </details>

### Deployment target: 
- Server (Node.js hosting)
- <details><summary>Static (Static/Jamstack hosting)</summary>

  - nuxt.config.js
    ``` js
      // Target: https://go.nuxtjs.dev/config-target
      target: 'static',
    ```
  </details>

### Development tools:
- <details><summary>[ ] jsconfig.json (Recommended for VS Code if you're not using typescript)</summary>

  - jsconfig.json
  </details>
- <details><summary>[ ] Semantic Pull Requests</summary>

  - .github/semantic.yml
  </details>
- <details><summary>[ ] Dependabot (For auto-updating dependencies, GitHub only)</summary>

  - .github/dependabot.yml
  </details>

### Continuous integration: 
Linting tools の選択が必要

- None
- <details><summary>GitHub Actions (GitHub only)</summary>

  - .github/workflows/ci.yml
  </details>
- <details><summary>Travis CI</summary>

  - .travis.yml
  </details>
- <details><summary>CircleCI</summary>

  - .circleci/config.yml
  </details>

### What is your GitHub username?

### Version control system: 
- Git
- None