2022年2月17日現在。
Nuxt.js でFullCalendarにGoogleCalendarのデータを取り込むのにものすごく苦労したので公開。

同じことをやろうとしているページをコピペしてやってもなかなかうまくいきませんでした。
ライブラリの仕様が変わったのか、それともvue.jsのバージョンが違うのかだと思いますが、自分が使っているフレームワークに合わせて記述方法が違うようです。

2022-2-18 追記
どうもFullCalendarの4系と5系では全然記述方法が違うみたいです。
コピペでうまくいかない時は、記事の作者がどのバージョンで使っているか確認した方が良さそうです。

動いた環境

npm nuxt -v
6.14.12
npx nuxt -v
@nuxt/cli v2.15.8

ポイントはFullCalendarコンポーネントのタグに渡すのは:optionsだけになっていること。
見る記事によっては:eventSourceとか、項目ごとにpropsを追加して渡していましたが、それだと今回はだめでした。
イベントもgoogleカレンダーのAPIキーもCalendarIdもoptionsの中に詰めこむ形でdata()に追記していきます。
この辺の階層が違うだけで、オプションの項目キー自体はどこの記事も大体同じようです。

あと、イベントソースが一つしかない記事がほとんどですが、このように配列の中にオブジェクトを追加していくことで、複数のカレンダーに対応できます。
この時、Apiキーは同じものを使い、カレンダーIDだけ固有のIDになっています。

japanese__ja@holiday.calendar.google.com　の部分はGoogleが一般公開している休日データでこのままコピペしたら使えるようになっています。


<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import googleCalendarPlugin from '@fullcalendar/google-calendar';

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin,googleCalendarPlugin ],
        initialView: 'dayGridMonth',
        eventSources: [
          {
            googleCalendarApiKey: 'googleで取得したカレンダーAPIキー',
            googleCalendarId: 'japanese__ja@holiday.calendar.google.com',
            display: 'background',
          },
          {
            googleCalendarApiKey: 'googleで取得したカレンダーAPIキー',
            googleCalendarId: 'googleで取得したカレンダーID',
          },
        ]
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions"/>
</template>

　参考

ここのコードをコピペしても動かなかったので上のように階層構造をNuxtに合わせました。

階層構造はここをヒントにしました。こっちにはgoogle連携の話がなかったので上の記事と見比べ。

Nuxtにフルカレンダーをインストールコマンドはここ。というか公式ページ。

ここには使えるオプションとか使用法が色々書いてある。見た中で一番わかりやすかったかも。

GoogleカレンダーのAPIキーとカレンダーキーの取得方法はここが書いてくれている。
メニュー構成がちょっと変わっていて写真の通りにはならないけど、文章に書いてくれている項目名を探していけばたどりつけた。

Nuxt.jsでFullCalendarをGoogleカレンダーと連携させる。

参考

　参考