【Vue.js】Nuxt3でpluginの設定を行う

概要

Nuxt3がとうとうリリース（2021年12月時点ではまだベータ版ですが）されたので、軽く触ってみました。色々変わっている点はあるのですが、触っていた中でpluginの設定がかなり変更されてると感じましたので、メモ書きしておきます。

Nuxt2でのplugin設定

Nuxt.jsにおけるプラグイン導入方法(初学者向けハンズオン)Vue.jsの記事で解説されている通りです。
pluginsディレクトリ配下にjsファイルを設置してVue.useで使用したいライブラリなどを読み込みます。そして、nuxt.config.jsへpluginsディレクトリに設置したjsのパスを設定します。

Nuxt3の場合

Nuxt3のドキュメントのPlugins directoryに解説されています。ざっくり大まかな変更は以下の通りです。

• pluginsディレクトリ配下のjsファイルは自動的に読まれるので、nuxt.config.jsへの設定は不要。
• defineNuxtPluginというplugin読み込み用の関数が用意されているので、これを使う。
• nuxtApp.vueApp.useで使用したいライブラリなどを読み込む。プロパティがあれば別途引数に設定する。

以下が私の方で設定してみたサンプルです。

plugin.js

import { defineNuxtPlugin } from "#app";
import GAuth from "vue3-google-oauth2";
import Toaster from "@meforma/vue-toaster";

export default defineNuxtPlugin((nuxtApp) => {
  // googleの認証で使用する設定
  const $config = useRuntimeConfig();
  const gauthOption = {
    clientId: $config.GOOGLE_CLIENT_ID,
    scope: "email profile openid https://www.googleapis.com/auth/drive.apps.readonly",
    prompt: "consent",
  };
  // 使用ライブラリの設定
  nuxtApp.vueApp.use(GAuth, gauthOption);
  nuxtApp.vueApp.use(Toaster);
});

その他

この記事を書いている2021年12月時点でNuxt3はベータ版の状態ですので、正式版では変わる可能性があること、ご了承ください。