More than 1 year has passed since last update.

create-nuxt-app メモ

Nuxt

Last updated at 2023-05-07Posted at 2023-05-07

create-nuxt-app

yarn create nuxt-app [out-dir]

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

実行例：

$ 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.

入力事項

Project name:
Programming language:
Package manager:
UI framework:
Template engine:
Nuxt.js modules:
Linting tools:
Testing framework:
Rendering mode:
Deployment target:
Development tools:
Continuous integration:
What is your GitHub username?
Version control system:

Project name:

Programming language:

JavaScript

TypeScript

package.json

  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0"
  }

nuxt.config.js

  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0"
  }

Package manager:

Yarn
Npm

UI framework:

None

Ant Design Vue

package.json

  "dependencies": {
    "ant-design-vue": "^1.7.8",
  }

nuxt.config.js

  css: [
    'ant-design-vue/dist/antd.css'
  ],
  plugins: [
    '@/plugins/antd-ui'
  ],

plugins/antd-ui.js

BalmUI

package.json

  "dependencies": {
    "balm-ui": "^8.55.0",
  }

nuxt.config.js

  css: [
    'balm-ui/dist/balm-ui.css'
  ],
  plugins: [
    '@/plugins/balm-ui'
  ],

plugins/balm-ui.js

Bootstrap Vue

package.json

  "dependencies": {
    "bootstrap": "^4.6.2",
    "bootstrap-vue": "^2.22.0",
  }

nuxt.config.js

  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
  ],

Buefy

package.json

  "dependencies": {
    "nuxt-buefy": "^0.4.24",
  }

nuxt.config.js

  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
  ],

assets/buefy.png
components/Card.vue
layouts/default.vue
pages/inspire.vue

Chakra UI

package.json

  "dependencies": {
    "@chakra-ui/nuxt": "^0.6.0",
    "@nuxtjs/emotion": "^0.1.0",
  }

nuxt.config.js

  modules: [
    // https://go.nuxtjs.dev/chakra
    '@chakra-ui/nuxt',
    // https://go.nuxtjs.dev/emotion
    '@nuxtjs/emotion',
  ],

layouts/default.vue

Element

package.json

  "dependencies": {
    "element-ui": "^2.15.10",
  }

nuxt.config.js

  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],
  plugins: [
    '@/plugins/element-ui'
  ],
  build: {
    transpile: [/^element-ui/],
  }

plugins/element-ui.js

Oruga

package.json

  "dependencies": {
    "@oruga-ui/oruga": "^0.5.6",
  }

nuxt.config.js

  modules: [
    // Doc: https://oruga.io/documentation/#nuxt
    '@oruga-ui/oruga/nuxt',
  ],

assets/oruga.png

Primevue

package.json

  "dependencies": {
    "primeflex": "^3.2.1",
    "primeicons": "^6.0.1",
    "primevue": "^2.10.0",
  }

nuxt.config.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'],
  }

Tachyons

package.json

  "dependencies": {
    "tachyons": "^4.12.0",
  }

nuxt.config.js

  css: [
    'tachyons/css/tachyons.css'
  ],

Tailwind CSS

package.json

  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.3.3",
    "postcss": "^8.4.17"
  }

nuxt.config.js

  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

Windi CSS

package.json

  "devDependencies": {
    "nuxt-windicss": "^2"
  }

nuxt.config.js

  buildModules: [
    'nuxt-windicss',
  ],

windi.config.ts

Vant

package.json

  "dependencies": {
    "vant": "^2.12.50",
  }

nuxt.config.js

  css: [
    'vant/lib/index.css'
  ],
  plugins: [
    '@/plugins/vant'
  ],

plugins/vant.js

View UI

package.json

  "dependencies": {
    "view-design": "^4.7.0",
  }

nuxt.config.js

  css: [
    'view-design/dist/styles/iview.css'
  ],
  plugins: [
    '@/plugins/view-ui'
  ],

plugins/view-ui.js

Vuetify.js

package.json

  "dependencies": {
    "vuetify": "^2.6.10"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3"
  }

nuxt.config.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

Template engine:

HTML

Pug

package.json

  "dependencies": {
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
  },

pages/index.vue

<template lang="pug">
  tutorial
</template>

Nuxt.js modules:

[ ] Axios - Promise based HTTP client

package.json

  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
  },

tsconfig.json

  "compilerOptions": {
    "types": [
      "@nuxtjs/axios",
    ]
  },

nuxt.config.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: '/',
  },

[ ] Progressive Web App (PWA)

package.json

  "dependencies": {
    "@nuxtjs/pwa": "^3.3.5",
  },

nuxt.config.js

  modules: [
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],
  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

static/icon.png

[ ] Content - Git-based headless CMS

package.json

  "dependencies": {
    "@nuxt/content": "^1.0.0",
  },

tsconfig.json

  "compilerOptions": {
    "types": [
      "@nuxt/content",
    ]
  },

nuxt.config.js

  modules: [
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
  ],
  // Content module configuration: https://go.nuxtjs.dev/config-content
  content: {},

content/hello.md

Linting tools:

[ ] ESLint

package.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

[ ] Prettier

package.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

[ ] Lint staged files

.git/config
```
[core]
  hooksPath = .husky
```

package.json

  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {},
  "devDependencies": {
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3"
  }

.husky/_/.gitignore
.husky/_/husky.sh

[ ] StyleLint

package.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

  buildModules: [
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
  ],

stylelint.config.js

[ ] Commitlint

.git/config
```
[core]
  hooksPath = .husky
```

package.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

Testing framework:

None

Jest

package.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

AVA

package.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

WebdriverIO

package.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

Nightwatch

package.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

Rendering mode:

Universal (SSR / SSG)

Single Page App

nuxt.config.js

  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

Deployment target:

Server (Node.js hosting)

Static (Static/Jamstack hosting)

nuxt.config.js

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

Development tools:

[ ] jsconfig.json (Recommended for VS Code if you're not using typescript)
- jsconfig.json
[ ] Semantic Pull Requests
- .github/semantic.yml
[ ] Dependabot (For auto-updating dependencies, GitHub only)
- .github/dependabot.yml

Continuous integration:

Linting tools の選択が必要

None
GitHub Actions (GitHub only)
- .github/workflows/ci.yml
Travis CI
- .travis.yml
CircleCI
- .circleci/config.yml

What is your GitHub username?

Version control system:

Git
None

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up