Nuxt.jsのmodulesの使い方

2021年7月16日Vue.js

Nuxt.jsのmodulesの使い方を紹介します。

Nuxt.jsのmodulesとは

modelesはNuxt.jsの拡張機能です。

modulesを使う手順

1. モジュールを探す
2. モジュールをインストールする
3. nuxt.config.jsに登録する

モジュールの探し方

モジュールの探し方ですが、https://github.com/nuxt-community/awesome-nuxtという便利なモジュールをまとめてくれているページがあります。Officialのところにたくさん使えるモジュールが記載されています。

モジュールをインストールする

#npm install --save [モジュール名]

上のコマンドにモジュール名を入れてインストールします。

nuxt.config.jsに登録する

  modules: [
    'モジュール名'
  ],

上のように登録します。
具体例として、axiosを設定してみます。

nuxtjs/axiosの例

たとえば、axiosであれば、上のサイトでsetupのところまでたどると次のコマンドが見つかります。

#npm install @nuxtjs/axios

そして、nuxt.config.jsに登録します。

  modules: [
    '@nuxtjs/axios'
  ],

baseURLを設定

オプションでaxiosにbaseURLを設定することができます。

  axios: {
    baseURL: process.env.BASE_URL || 'https://ここにurl'
  }

使い方

      nuxtServerInit(vuexContext, context) {
        return axios.get(`${process.env.baseUrl}/posts.json`)...
      },

vuexのactionsで使う場合、もともとが上のような記述なら、

      nuxtServerInit(vuexContext, context) {
        return context.app.$axios.$get('/posts.json')...
      },

という記述だけでよくなります。
axiosでbaseURLを登録しているのであれば、process.env.baseUrlの記述も不要になります。
また、axiosを個別ファイルでインポートする必要もありません。

また、続きで次のようなthen()ブロッグも

        .then(res => {
          const postsArray = []
          for (const key in res.data) {
            postsArray.push({ ...res.data[key], id: key })
          }
          vuexContext.commit('setPosts', postsArray)
        })

responseがダイレクトにdata部分が取得できるので、上のres.の部分が不要になります。

        .then(data => {
          const postsArray = []
          for (const key in data) {
            postsArray.push({ ...data[key], id: key })
          }
          vuexContext.commit('setPosts', postsArray)
        })

asyncData(context) {
 return axios.get(process.env.baseUrl+'/posts/'...

上のような記述なら、

asyncData(context) {
 return context.app.$axios.$get('/posts/'...

となります。また、importしているaxiosも削除できます。