Nuxt/Vue」カテゴリーアーカイブ

nuxt.config.jsに、dotenvの環境変数を反映させる

.envファイルに設定した環境変数をnuxt.config.jsでも反映される方法。firebaseなどのプラグインを設定するときに、便利。

動作環境

.env.* ファイル

各環境毎の.envファイルをつくる。

your-app
|-- .env.development 開発サーバ用
|-- .env.local       ローカル開発用
|-- .env.production  本番サーバ用
`-- package.json

例えば、次の様な環境変数を設定する

FIREBASE_API_KEY="*****************"
FIREBASE_AUTH_DOMAIN="*****************.firebaseapp.com"
FIREBASE_PROJECT_ID="*****************"
FIREBASE_STORAGE_BUCKET="*****************.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="*****************"
FIREBASE_APP_ID="*****************"
FIREBASE_MEASUREMENT_ID="*****************"

nuxt.config.js

nuxt.config.js内で、.env.*ファイルで設定した環境変数を読み込むには、以下の設定を冒頭の2行に加える。

// ...
const envPath = `.env.${process.env.NODE_ENV || 'local'}`
const envSet = require('dotenv').config({ path: envPath })

// ...

export default defineNuxtConfig({

//..

})

nuxt.config.js内から、次の様な形で環境変数を読み込める。

//..

export default defineNuxtConfig({

//..

  firebase: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID
    },
    services: {
      auth: true,
      firestore: true,
    },
  },

//..

package.json

dotenvとcross-envを組み合わせて、以下の様なスクリプトを組む

// ..

    "generate:prod": "cross-env NODE_ENV='production' nuxt generate",
    "generate:dev": "cross-env NODE_ENV='development' nuxt generate",

// ..

NODE_ENVの引数で、開発環境を指定する

Nuxt(Vue)の<template>でエラーが出る

VS Code上で、<template>でエラーが出る場合、tsconfig.jsonの設定を変更

動作環境

*.vue

1行目の<template>でエラーが出る

tsconfig.jsonの設定

以下の設定を追加する

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    ...
    "vueCompilerOptions": {
      ...
      "experimentalDisableTemplateSupport": true
    },
}

配列やオブジェクトを更新しても、画面が更新されない

Nuxt/Vueでリアクティブな配列やオブジェクトを更新しても、Template側が更新されない場合の対処方法

基本的な内容は公式ドキュメントにも掲載されている
https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

反映されない例(失敗例)

state.items[indexOfItem] = newValue

配列のインデックスを直接指定して、値を更新しても、画面は更新されない。もしくは、遅延が起こる。

反映される例(成功例)

Vue.setを使って、配列かオブジェクトを更新する。

import Vue from 'vue'
...
Vue.set(state.items, indexOfItem, newValue)

this.$setで、更新することもできる。