【2020年最新】初心者必見！ Nuxt.js で頻発する操作まとめ【チートシート】

$ npx create-nuxt-app [アプリ名]

create-nuxt-app v2.11.1 
✨  Generating Nuxt.js project in app
? Project name app
? Project description My wonderful Nuxt.js project
? Author name hoge
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
yarn run v1.19.1
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨  Done in 4.82s.

const state = () => ({
  param: ''
})

const getters = {
  paramLength: state => {
    return state.param.length
  }
}

const mutations = {
  doMutation (state, data) {
    state.param = data
  }
}

const actions = {
  async doAction ({ commit }, data) {
    const actionData = "data"
    commit('doMutation', actionData)
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

// ストアのデータを呼び出す
this.$store.state.example.param

// ディスパッチする
this.$store.dispatch('example/doAction', '引数を渡せる')

// コミットする
this.$store.commit('example/doMutation', '引数を渡せる')

<v-app>
  <v-navigation-drawer app>...</v-navigation-drawer>
  <v-app-bar app>...</v-app-bar>

  <v-content>
    <v-container fluid>
      ...
    </v-container>
  </v-content>

  <v-footer app>...</v-footer>
</v-app>

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

yarn add @vue/composition-api

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

export default {
  plugins: ['@/plugins/composition-api']
}

this.$route.params.id