フロントエンド・PHPカンファレンス北海道2026の公式ウェブサイトにVizeを入れた話

はじめに

フロントエンド・PHPカンファレンス北海道2026の公式ウェブサイトをNuxt 4で作った。ほぼVibe Codedな状態なので作った、というと微妙なんだけど。

作り始めようかなとしているくらいかの前後に知り合いの大パイセン、ubugeeeiパイセンがVizeというVueツールチェインを作っていた（！）ので、導入しようとした奮闘記。

Vizeとは？

@ubugeeei パイセンが手がけるRust製Vueの非公式ツールチェイン。なんだそれって感じだけど実在している。個人で作っている大規模OSSの非公式ツールチェイン、字面だけで面白い。

Vizeには静的解析ツール、フォーマットツール、タイプチェックだけでなくVue SFCのコンパイラとVue版Storybookのmuseaが含まれる。

VoidZeroが提供するVite+(vp)と一緒に使うことが推奨されているのでもちろんウェブサイト作りにもVite+を利用している。

今回は、Vizeが提供するNuxt向けのpluginを利用した。

Intergrate with Vize

基本はドキュメントの通りに導入した。

https://vizejs.dev/integrations/nuxt/index.html

終わり。

そんな訳はない...

最初compilerをtrueに設定して、vp run buildしたら動かなかった。

そこからubugeeiパイセンにDMやらbuildログやらを送り付け（ありがとうございました）、色々対応してもらった。

結果動くようになった。0.5x.0くらいから導入を試み（確か1ヶ月くらい前かな？）0.155.0で最終的にバージョンfixして本番環境readyになった。

変わった？

実はそんなに体感がない...というのもCloudflare Workersにデプロイしていてnitroが吐くCloudflare向けのビルド時間が長いので早くなった！みたいな感覚がない。

とはいえ、scoped CSS周りのコーナーケースやNuxtでのstyle export周りのバグ解決に役立ってそうなので良い。 ViewTransitionも動いている。

この後少しVueでゴリッとしたコンポーネントを記述するので問題が起きたらまた対応してもらうかなと（（（

最後に

導入が結果うまくいってよかった。フロントエンド・PHPカンファレンス北海道2026当日までに終わらせるのが1つの目標だったのでubugeeiパイセンには改めて感謝を。