Help us understand the problem. What is going on with this article?

Nuxt.js Tips

※ 随時更新予定

目次

概要

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

環境構築

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

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

機能

  • 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/○○ でアクセスする。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした