Nuxt.jsでgooglemapを読み込む

教えてもらったのでメモ。
googlemapの読み込みがいい感じにできた。

---

ディレクトリ構造

・pages
　└ index.vue
・plugins
　└ maps.js
・nuxt.config.js
・.env

使ったパッケージ

・load-google-maps-api
・dotenv

yarnで入れた。

$ yarn add load-google-maps-api
$ yarn add dotenv

内容

・.env

API_KEY=apiキーを入力

・nuxt.config.js

import dotenv from 'dotenv'
dotenv.config()

export default {
  env: {
    apiKey: process.env.API_KEY
  },
  plugins: [
     { src:  '~/plugins/maps', ssr: false }
  ]
}

envプロパティに使いたい環境変数を書くことで
フロント・サーバーどちらにも環境変数が共有されるよ
ということだそう。
API: env プロパティ - Nuxt.js

そしてpluginsプロパティには、使いたいプラグイン設定ファイルのパス名を書けば読み込んでくれるよと。
今回の場合はサーバーサイドでは使えないし、使わないプラグインなので
ssr: falseにしているよ。
そうすることで、フロントでのみ使うことができる。
API: plugins プロパティ - Nuxt.js

pluginsのsrcに書くパス名はドキュメント見る限り
~/plugins/設定ファイル名でも~/plugins/設定ファイル名.jsでも
どっちでも良さそうなのですね。

ここでdotenv.config()している理由は下記に記します。

・plugins/maps.js

import loadGoogleMapsApi from 'load-google-maps-api'

export default async (context, inject) => {
 const gmap = await loadGoogleMapsApi({
   key: context.env.apiKey
 })

 inject('gmap', gmap)
}

ここでだいぶ困りました。
設定したはずの環境変数が読み込まれなくて、いくらやってもundefined。
どうすればいいんじゃ〜と思ってた時に Use environment variables inside nuxt.config.js · Issue #2998 · nuxt/nuxt.js · GitHub environment variables not working · Issue #1386 · nuxt/nuxt.js · GitHub
↑読んで、nuxt.config.jsにdotenv読み込でみたらいいのかと思い実践したら解決。

あと環境変数の呼び出し方だけど、
ドキュメントに書いてあったcontext.envのキーだとダメだった。。
上記を踏まえていうなら

・process.env.apiKey
・context.env.apiKey

だったら読み込めた。

inject()に関してはあまりピンときてないけど、
とにかくpluginsに設定するとpagesの各コンポーネントで
this使ってそのプラグインを使えるようになるんですよ。
だから今回の場合はthis.$gmap.~って呼べるようにしてるってことなのかな。
[docs] What does inject do? · Issue #2233 · nuxt/nuxt.js · GitHub
↑ふわっと読んだもの

・pages/index.vue

<style>
#map {
  width: 600px;
  height: 500px;
}
</style>

<template>
  <div id="map"></div>
</template>

<script>
  export default {
   data() {
     return {
       map: null
     }
   },
   mounted() {
     const element = document.getElementById('map')
     const map = new this.$gmap.Map(element, {
       center: { lat: 35.685175, lng: 139.7528 },
       zoom: 15
     }
     this.map = map
   }
  }

</script>

dataプロパティに入れてgooglemapのインスタンス保持しておけば
なんか地図を切り替えるってなった時も
setOptions()で設定を変更するだけでokだと信じています。
要は新しくインスタンスを生成しなくてよくて、使い回しできるという。
　　

---

おわり。
ブログ書くって大変だな。