@vue/compatで作成したcomponentライブラリをVue2プロジェクトでPluginとしてVue.useすることは可能でしょうか？

Question

質問したいこと

@vue/compat + TypeScriptでVue2の書き方(OptionsAPI)のまま移植したComponentがあります。

ex) Hogeコンポーネント

<template>
  <div>
      {{ text }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Hoge',
  props: {
    text: {
      type: String,
      required: true
    }
  }
})
</script>

上記はnpm run build実行時にindex.tsで以下のようにexportしてpluginとして登録しています。

import type { App } from 'vue'
import Hoge from '@/components/Hoge.vue'
export const MyHoge = Hoge
const components = {
  Hoge
}
const Plugin = {
  install(app: App) {
    Object.entries(components).forEach(([name, component]) => {
      app.component(`my-${componentName}`, component)
    })
  }
}
export default Plugin

また、 vue はviteのaliasにより、以下のように@vue/compatである旨を宣言しています。

resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },

npm run build はpackage.jsonのscriptsにより以下のようにvite buildが走ります。

"build": "vite build"

結果、distディレクトリが作成され、my-component.mjs が作成されます。

次に、上記distをVue2 / Nuxt2プロジェクトで使用したいと思い、以下のようなPluginを作成しました。

import Vue from 'vue'
import MyComponents from 'my-component'
Vue.use(MyComponents)

※「my-component」はpackage.jsonでinstallする際に付けれたaliasです。

"my-component": "git+ssh://[e-mail]/hogefugapiyo/my-component.git",

Pluginに登録したので、以下のように使って見ました。

<template>
  <div class>
    <section>
      <my-hoge text="hello" />
    </section>

上記を実行すると、Hoge,vueはブラウザのVueDevToolでも認識されているようで、propsとして何が渡されているかも認識されていました。
しかし画面には表示されず、Hogeコンポーネントは真っ白のままです。

特にエラーが出るわけでもなく、気になるwarningは以下くらいでした。

 WARN  [Vue warn]: resolveComponent can only be used in render() or setup(). 

そもそも「vue/compat or Vue3で作成したコンポーネントをVue2で使う」ことは可能なのでしょうか？

できると思って試してましたが、あと一歩で難儀な感じとなり、皆様の意見・お知恵をお借りしたいなと思いました。

よろしくお願いします。

Answer 1

利用できない可能性が高いです。
「vue2」と全く同じ、形式で記載されている場合は動作すると思いますが、「vue3」になり「emits」等の機能が増え、それが利用されていた場合は、アウトかと思います。
開発(リファクタリング)バージョンよりも低いバージョンでは動作しないと思っていた方が、なにかと問題が起きにくいかと思います。

詳しくは、張り付けたリンクの「破壊的変更」部の「コンポーネント」を参照すると、「vue3」で利用可能で「vue2」で利用不可なものがわかります。

はじめに

Comments

[yu-na]

ありがとうございます！

>「vue2」と全く同じ、形式で記載されている場合

今回は一応こちらになります。基本的には元々Vue2で作っていたcomponentを丸っと移行し、defineComponentだけ書き換えたという形になります。
中には$listenersを使っている箇所などはv-bind="$attrs"に書き換えたりはしてますが

参考) https://v3.ja.vuejs.org/guide/migration/attrs-includes-class-style.html

> 「emits」等の機能が増え
確かにemitなどで警告は出てます

Vue2からの丸っと移行でしたが、難しそうですね。。。そろそろ諦めも肝心かもです。
ダメなら、使う側、今回ならNuxtなので、vue3 nuxt bridgeにupgradeすればいけるかもしれないですね。。労力大変そうですが、試してみようと思います！

[Matsumon0104]

移行コストと相談して、移行しても問題ないようであれば、移行した方がよいと思いますね。
もし、メジャーバージョンが突然、4になってvue4に移行しなければならなくなってしまった場合、vue 2 -> 3 -> 4といった移行手順を踏まなければならないので、可能なら移行した方がよいです。

現状の注意点としては、もしvuetifyを利用している場合、近日対応予定ですが、現在はvue3に対応していません。

[yu-na]

どうもVue cmpatで作成したcomponent pluginはVue2のプロジェクトからは使えないようなので、切り口を変えました。

https://antfu.me/posts/make-libraries-working-with-vue-2-and-3

こちらにあるように、vue-demiを使ってcomponent pluginを作成し、Vue2/Vue3対応のpluginを作ってみることにしています。

現在検証中のため、しばらくOPENのままにしておきます。