【Nuxt２→Nuxt3】ディレクティブ追加【メモ】

概要

Nuxt2のプロジェクトをNuxt3に書き換え中に以下のエラーが発生

[nuxt] [request error] [unhandled] [500] Cannot read property 'getSSRProps' of undefined

独自実装していたカスタムディレクティブ(v-〇〇)が原因だと発覚。
※Nuxt2とNuxt3ではディレクティブの書き方が変更されていた。
参考：https://github.com/nuxt/framework/issues/3154

---

ドキュメント

ドキュメントでは以下のようになる

Nuxt2

Nuxt2

import Vue from 'vue';

// 第一引数はv-〇〇の部分
Vue.directive('〇〇', {
  bind(el, binding, vnode) {
   // 処理の内容
  }
})

Nuxt3

Nuxt3

const app = Vue.createApp({})

app.directive('〇〇', {
  beforeMount(el, binding, vnode) {
  }
})

---

実際の対応

今回はPluginsに追加

Nuxt3のplugin

export default defineNuxtPlugin((nuxt) => {
  nuxt.vueApp.directive('〇〇', (el, binding, vnode) {
  });
});

nuxt.config.tsでpluginを読み込ませてを追加して対応

nuxt.config.ts

// 作成したファイルを設定
plugins: [{ src: '@/plugins/〇〇' }],