本セッションの登壇者
セッション動画（YouTubeチャンネル登録もお願いします。）
「Vue 3って結局良いの?」というタイトルでやっていきます！ushironokoです。よろしくお願いします。
ここ最近のVueの振り返り - Vue 3がデフォルトに!
ここ最近のVueの振り返りからいきます。
最初のリリースから1年半弱が経ちました。ついに、Vue 3がデフォルトブランチになりました。
これに伴い、推奨ツールの変更がされています。vue-Cliはcreate-vue、IDEサポートであるVeturはVolar、Global State ManagementツールであるVuexはPiniaというライブラリが推奨されています。
またscript setup構文が正式リリースされました。これは後述します。
また、前述のsetup 構文を含むより実用的になった新しいドキュメントのリリースもされています。
Vue 3とは少し違うのですが、Better jQueryとしてのpetite-vueもリリースされました。また、Volarと似たようなものですが、Vue Extensionのプレビュー版(VueDX)もリリースされています。
Vue 3でできるようになったこと
ここまで振り返って「結局Vue3って良いんだっけ?」という話ですが、script setup構文がかなりイカしています。見た目はSvelteの構文に近いですが、Scriptタグの直下にすべて記述できるようになりました。
これにより、Propsオプションで定義していたPropsの定義をScriptタグ直下に書くことができるようになっています。definProps関数にジェネリクスで型を渡すだけでPropsが定義できるようになります。
emitの型定義も同様に、definEmits関数にジェネリクスに型情報を渡すだけで定義できるようになっています。Eventとpayloadの型は親のハンドラに伝わるようになっています。
コンポーネントの型を機械的に出力できるようになっています。vue-tscというtscのラッパーライブラリを使うことで、コンポーネントの型を.d.tsファイルで出力することができます。
これはまだリリースされていませんが、vue-routerの名前付きルートに型が付くようになっています。as constでルートを定義し、vue-routerの型を拡張すると、routerをプッシュするときに、存在しないルートへのプッシュが型エラーになります。
Nuxt 3の概要
ここまで見てきて、「結局Vue 3って良いの？」の回答としては「わりと良い」となります。ただし、Nuxt 3を使えばもっといい体験が得られます。いまNuxt 3はRelease Candidateというステータスですが、使用することはできます。
Nuxt 3の機能をざっくり紹介したものが以下になりますが、すべて説明していると時間がなくなってしまうので、一部抜粋して紹介します。
auto importがありますが、auto importされる関数やpluginsに登録されたオブジェクトの型が自動生成される機能があります。pluginsディレクトリやcomposablesディレクトリの配下に置いたTypeScriptファイルの関数やdefinNuxtPluginによって登録されるPluginsの型が自動生成されます。
ポイントとしては、#appの型を拡張している点やuseが付いた関数をエクスポートしている点です。これらがあると、Nuxtは自動的に検知して.nuxt/typesの配下に.d.tsファイルを自動生成します。
これらの.d.tsファイルは、nuxt.d.tsファイルに集約され、
.nuxt/tsconfig.jsonにインクルードされます。ユーザは .nuxt/tsconfig.jsonをルートの tsconfig.jsonで継承することで、生成された型を使用することができます。
こちらが例です。useSupabaseという関数はインポートされていませんが、グローバルに型情報が登録されているので、型を参照することができます。
余談ですが、ユニバーサルに動作するサーバエンジンという部分ですが、こちらはNuxt固有のものではなく、ライブラリとして切り出されています。なので、Nitro + Reactや、Nitto + Svelteなども構築することが可能です。
「結局Vue 3って良いんだっけ？」という回答に関しては、Nuxt 3が素晴らしいので、Nuxt 3でやっていきましょう！ ということになります。
以上です。
