Vue.js3 de Class コンポーネント

はじめに

※ この文章はベータ版です。

Vue.js3.x では、Classコンポーネントの作成は
(オフシャルには)サポートされていません。
おわり。

ではなく、ノンオフィシャルな方法...もありません...

でした、一昨年(2022年)まで。

ノンオフィシャルな方法

その名も ...

vue-facing-decorator

Vue.js公式の2.x用Classコンポーネント・ライブラリ
vue-class-component & vue-property-decorator、
ほぼ互換。

vue-class-component & vue-property-decorator
を用いて作成したVue2.x対応Classコンポーネント(ES Class)
のコードベースをほとんど変更することなく、Vue.js3.x に
移行できるはずです。

注意点

vue-facing-decorator は 作成した ES Class を(内部で)
Options API での(オブジェクトリテラルの形の)コンポーネント
定義に変換するため、ES Class 内で Composition API を利用
することはできません。

Vue.jsの未来は、Composition APIにあり、
Options API は 後方互換性のために
残されている印象ですので、

vue-facing-decorator の利用は、
継続的に開発されていくプロジェクトなら、
一時的なモノ、と、考え、Composition API
への移行を検討してください、
既にほぼ開発が終了していて、メンテナンス・モード
に入っているプロジェクトなら、新規に追加する
機能については、Compostion APIベースにすることを
検討してください。

追記 (2024/01/19)

最後に

vue-facing-decorator の日本語での紹介記事が
ググってみてヒットしなかった、ので、書いてみました。

Let’s Vue.js