Nuxt.js 2.0でvue2-google-mapsを動かす

Nuxt.js 2.0でvue2-google-mapsを動かそうとしていろいろとハマったのでメモ。

普通にYarnでインストール

yarn add vue2-google-maps

宗教上NPMしか使えない人は好きにしてください。

~/plugins/vue2-google-maps.jsに下記を書く

~/plugins/vue2-google-maps.js

import Vue from 'vue';
import * as VueGoogleMaps from '~/node_modules/vue2-google-maps/src/main';

Vue.use(VueGoogleMaps, {
  load: {
    key: process.env.GOOGLE_MAPS_API_KEY,
    libraries: 'places',
  },
});

process.env.GOOGLE_MAPS_API_KEYは適宜置き換えてください。
あとドキュメントどおりにVueGoogleMapsをimportすると死にます。

nuxt.config.jsのWebpack設定を置き換える

nuxt.config.js

    extend(config, ctx) {
      ...
      config.externals = config.externals || [];
      if (!ctx.isClient) {
        config.externals.splice(0, 0, function(context, request, callback) {
          if (/^vue2-google-maps($|\/)/.test(request)) {
            callback(null, false);
          } else {
            callback();
          }
        });
      }
    }

config.externals = config.externals || [];

を入れないでドキュメントどおりに書いちゃう学生まで許されるお偉いくんは死にます。

nuxt.config.js

vendor: ['vue2-google-maps']

と

nuxt.config.js

plugins: [{ src: '~/plugins/vue2-google-maps.js', ssr: false }]

も忘れずに。
ネコに作業を妨害されてるので今日はここまで。