JavaScript

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

みなさん、こんにちは。どんぶラッコです。

私は普段Nuxt.jsを使って開発をしています。

そこで、私がよく使うなーと感じている作業をまとめてみようと思い立ちました!

思いつき次第、どんどん追加していこうと思います。

また、これらの機能をDashを使ってスニペット登録しておくととても便利です!!

Dash * 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.

よくする動作

Storeを設定(モジュールモードで動かす)

https://ja.nuxtjs.org/guide/vuex-store/

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', '引数を渡せる')

Vuetify

アプリケーションレイアウト

https://vuetifyjs.com/en/components/application

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

.envを使う

https://ja.nuxtjs.org/api/configuration-env/

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

その他設定(オプション)

TypeScript 設定

Axios Mock を使う

Composition API を使う

https://github.com/vuejs/composition-api

yarn add @vue/composition-api

Plugins に追加しておき、Vueインスタンスに注入されるようにしておく

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

Vue.use(VueCompositionApi)
export default {
  plugins: ['@/plugins/composition-api']
}

よく使うやつら

動的なルート生成

pages/ 内に動的ルートを使いたいものに _id.vue を作成。 _id 部を呼び出したい場合は

this.$route.params.id

で呼び出せる

VeeValidateを適用する

以前Qiita記事としてまとめました
VeeValidate3.X + Nuxt.js + Vuetify でバリデーション実装

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です