🚀

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

2022/10/27に公開約900字

概要

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/〇〇' }],

Discussion

ログインするとコメントできます