※ 随時更新予定

概要

Vue.jsをベースに、更に色々な機能を取り揃えたフレームワーク。
SPA、SSR、Vue Router+自動ルーティング、Vuex、デフォルトテンプレート等の機能がある。
Vue CLIよりも使いやすくなっている。簡単なSPAでもNuxtで作るのが最適解だと思う。

環境構築

create-nuxt-appを使うのがベスト！下記の手順で基本的にok

npm i -g create-nuxt-app ※create-nuxt-appを準備していない時
npx create-nuxt-app アプリ名 ※各設定は必要に応じて選択。基本enterでok。
デフォルトの画像やコンポーネントを削除し、環境の準備完了

機能

vue-router標準装備で、なおかつpageディレクトリに配置したファイルを元に自動ルーティングを行ってくれる。
vuex標準装備で、this.$storeでアクセス可能。
axiosやbootstrapもインストールの時に設定することで、this.$axiosのような形で利用が簡単。
Express.jsの利用も視野に入れられているため、サーバサイドJSも組み込みやすい。

Tips

ルーティングのルール

pagesディレクトリ内で任意のディレクトリとindex.vueを作成することで、自動的にルーティングが作成される。

例1:） page1/index.vue を作成

npm run dev を実行
localhost:3000/page1/ にアクセスできる。

例2:） page1/_id.vue を作成

npm run dev を実行
localhost:3000/page1/(任意の値) にアクセスできる。

※ (任意の値)部分は、this.$route.params.id で取得可能
※ asyncDataで利用する場合は、 context.route.params.id

Vuex(Store)は、モジュールモード推奨

まず、Vuexとは、コンポーネント間でやり取りする共通の値や処理をまとめてあるもので、コンポーネントのどこからでも利用可能です。

モジュールモードとは、store ディレクトリ内のすべての *.js ファイルが名前空間付きモジュールに変換されます（index はルートモジュールとして存在します。）

index内で、名前空間を分ける従来の書き方は廃止される様です。

例:)store/namaekuukantest.jsというファイルを作り、stateにアクセスする場合

this.$srore.state.namaekuukantest.プロパティ名になります。

Vuex(Store)のモジュールのテンプレート

state, getters, mutations, actionsが基本構成です。

state → 共通で利用する値を保持する役割。
getters → stateの値を取得する役割。コンポーネントのcomputedで利用しやすい。
mutations → stateの値を変更する役割。コンポーネントから直接実行するかactionsから利用。
actions → 通信処理で値を取得したり、複雑な共通処理を行ったりする役割。

export const state = () => ({
  list: {},
  targetId: '',
})


export const getters = {
  getList(state) {
    return state.list
  },
  getTargetId(state) {
    return state.targetId
  },
  getListById(state){
    return state.list[state.targetId] || {}
  },
}


export const mutations = {
  setList(state, register) {
    state.list = register
  },
  setTargetId(state, id) {
    state.targetId = id
  },
}


export const actions = {
  async getAll({commit}) {
    const res = await this.$axios.$get('/api/register/all/')
    commit('setList', res)
  },
  async getById({commit}, id) {
    const res = await this.$axios.$get(`/api/register/${id}`)
    return res
  }
}

コンポーネントからVuexの値を参照する場合

直接参照する場合

this.$store.state.モジュール名（ファイル名）.stateに記述したプロパティ

gettersを利用する場合

script部でvuexを読み込みmapGettersを利用する

import { mapGetters } from 'vuex'

computedでgettersを取得
※記述はgetListというゲッターをlistという名前で利用する場合

computed: {
  ...mapGetters({
    list: 'モジュール名（ファイル名）/getList'
  })
}

異なるコンポーネントで、共通のmethods等を利用したい場合

mixin を利用しましょう！

1.分かりやすい様にNuxtプロジェクトの直下に mixins というディレクトリを作成する。
2.作成したいmixinファイルを作成する。

例： mixins/InputValidation.js を作成

export const InputValidation = {
  methods: {
    isEmpty(str) {
      return str === "" || str === undefined || str === null
    },
    isLength(length, str) {
      const validStr = String(str)
      return validStr.length > length
    }
  }
}

3.mixinを利用するコンポーネントファイルのscript部でimportする

import { FileEvaluableImage } from '@/mixins/FileEvaluableImage'

4.mixins という項目を作成し、利用するmixinを指定する。

export default {
  mixins: [ FileEvaluableImage ],
  ...
}

どのファイルからでも参照可能なutilを作成する方法

1.pluginsディレクトリにutils.jsを作成（名前はなんでもok）
2.nuxt.config.jsのpulginsに下記を記述する。

plugins: [
  '@/plugins/utils'
],

3.utils.jsに共通で利用したい処理を記述する。

const deepCopy = (obj) => {
  return JSON.parse(JSON.stringify(obj))
}

export default ({}, inject) => {
  inject('deepCopy', deepCopy)
}

4.実際に利用する時は、 this.$登録名で記述する。

this.$deepCopy(state.list)

Nuxt.jsでapiを利用する

1.nuxt.config.jsの任意の場所に下記を記述する。

serverMiddleware: [
  '~/api/'
],

2.api/にindex.jsを作成し、apiの設定を記述する。
（設定内容は、Express.jsでミニマムなローカルサーバ構成で説明）

npm run devでローカルサーバを立ち上げた際に、他の機器からAPIにアクセスする場合

nuxt.config.jsに以下を記載。

server: {
  port: (任意のポート番号),
  host: '0.0.0.0'
},

ただし、アクセスする際は、 http://localhost:ポート/api/○○ でアクセスする。

Nuxt.js Tips

目次

概要