nuxt環境周りの理解を深める

プロジェクトのルートディレクトリ変更するには？

結論

nuxt.config.jsのsrcDirにルートディレクトリを定義する https://ja.nuxtjs.org/api/configuration-srcdir/

具体的には

• nuxt.config.jsのsrcDirにルートディレクトリを定義
• yarn(npm install)

srcDirへ定義後にプロジェクトが立ち上がらなくなり焦ったが、yarnすれば解決しました。

より詳しく

こちらの記事が参考になりました。 https://qiita.com/arthur_foreign/items/637f2976e9f5e7a89727

middlewareディレクトリの役割が分からない

結論

middleware/配下に置いたファイル名を、componentsのmiddlewareプロパティに記述する事で描画前にその処理を実行する事が出来る

より詳しく

nuxt.js middlewareについて - Qiita

pluginsディレクトリの役割が分からない

結論

この配下に処理を記載し、nuxt.config.jsのpluginsに指定する事で起動時にプラグインを読み込んでくれる。 そうする事で、複数のVueインスタンスから呼び出したい共通の処理を、各Vueインスタンス内に処理を記載せずに呼び出しが出来るようになる。

記載例

プラグイン - NuxtJS

injectって何？

結論

injectしたファイルをplugins/配下に置くことで、vueインスタンスの先頭に$を付ける事で呼び出せるようになる。

より詳しく

【Vue.js】injectしたメソッドの中で他のinjectされた処理を使う方法 | HAFILOG

process.envについて

定義されてる場所

nuxt.config.js

const envSet = require(`./app/config/env.${environment}.js`);
env: envSet,

参考記事

nuxt.config.js で定義された env プロパティは、process.env.xxxx によって、それぞれ個別にマップされて、コンパイル時に変換されます。 API: env プロパティ - NuxtJS

bootstrapを導入したい

結論

# With npm
npm install bootstrap-vue

# With yarn
yarn add bootstrap-vue

module.exports = {
  modules: ['bootstrap-vue/nuxt']
}

たったこれだけ。めちゃくちゃ簡単。

参考記事

Getting Started | BootstrapVue

axiosを使えるようになるまで

create-nuxt-app時にaxiosを選択しており、それを使えるようにするまで。

既に設定されている事

api/config.jsに以下の記載あり。

import axios from 'axios';

手順1

config.jsでaxiosメソッドを定義する。

手順1

plugin/配下にapi.jsというファイルを作成し以下の記載

import api from '~/api';

export default (_, inject) => {
  inject('api', api);
};

手順2

nuxt.config.jsのpluginsに以下の記載

    '@/plugins/api.js',

portを変更したい

結論

nuxt.config.jsに以下の記述を追記する

  server: {
    port: 8030,
  },

これでOK！

bootstrap-vueで iconを使いたい

  modules: [
    ['bootstrap-vue/nuxt', {
      icons: true,
    }],