バックエンドエンジニアが行うSvelte + Vite なフロントエンド構築
フルサーバーレスアーキテクチャの運用を重ねた先に見える価値 / The value that can be seen beyond the operation of a full serverless architecture
フルサーバーレスアーキテクチャの運用を重ねた先に見える価値 / The value that can be seen beyond the operation of a full serverless architecture
Remix 2.7がリリースされました。この2.7からは今までunstableであったVite対応が正式版として採用されたバージョンとして登場しました。 この2.7以前はunstableであったものNode.jsのランタイムでは動作するものが提供されていましたが、Cloudflare Pagesでの動作するものは提供されていませんでした。しかし、2.7のリリースと同時にCloudfalre Pagesで動作するものがリリースされたということで何が変わって、どう対応しているのかというのを調べた結果を纏めておきます。 2.7.0のリリース後にいくつかのバグが修正されているので、2.7.0ではなく移行のバグ修正版を使用することをオススメします。 また、Vite版への移行は公式にドキュメントがあるので合わせて読むと理解が深まると思います。 初期package.jsonの違い まずは、従来版とVit
個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。 まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。 実質ただのリンク集 理由 State of JS 2021のビルドツール部門でViteが1位になっていたが利用したことがなく気になっていたため。手元にある最小のフロントエンドプロジェクトが個人サイトだったのでplaygroundとして試してみた。 https://2021.stateofjs.com/en-US/libraries/build-tools より Viteとは Vite公式を斜め読みした。ランキング中だと経験あるビルドツールがwebpack, Parcel, Rollupあたりで止まっていたのでそこからの差分で理解すると... es
JSer.info #668 - Remix 2.2.0がリリースされました。 Release v2.2.0 · remix-run/remix Viteをサポートし、ViteのプラグインとしてRemixを使えるようになりました。 詳しくは次の記事で解説されていますが、既存のViteのエコシステムに乗れることで開発体験の改善やViteのプラグインの利用などができるようになっています。 Remix ❤️ Vite | Remix 他には、Fetcherにkeyを指定できるようになる変更が含まれています。 また、future.v3_fetcherPersistフラグで、Fetcherのクリーンアップの新しい挙動をopt-inで試せるようになっています。 Deno 1.38がリリースされてました。 Deno 1.38: HTML doc generator and HMR deno doc --
StorybookでバンドラーにViteを使うStorybookをViteで開発する方法を紹介します。preactプロジェクトではハマりどころがあるため、その点を丁寧に解説しています。また、Storybookの設定ファイルを型安全にする方法も紹介しています。 はじめにStorybook で Vite を使ってビルドできるようになったので紹介します。 iframe 内のビルドを Webpack から vite に切り替えることで次の利点があります。 ビルド速度の改善HMR の高速化アセット処理の自動化Vite プロジェクト設定との互換性Vite のプラグインエコシステムへのアクセスコンポーネントが少ない場合、速度の恩恵はあまり感じられない可能性があります。 Webpack と比較すると、ブラウザが表示されるまでのスピードは劇的に向上しますが、 ブラウザ上での読み込みに時間がかかるためです1。
1. 自動でブラウザを開いてほしい - server.open yarn dev（または npm run dev）したら自動でブラウザを開いてほしい場合は server.open を指定します。 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ server: { open: true, }, plugins: [react()], });
web制作環境にViteを導入する
WEB制作の効率を上げたいと思ってなにかいいのはないか探していたところ、 Viteが良さそうだったのでViteでWEB制作用の環境構築を行いました。 Viteについて Vite（ヴィート）は高速な開発環境を構築することができるフロントエンドのビルドツールです。 公式サイトが日本語化されており、ドキュメントも日本語で読むことができます。 Viteは「バンドルする」ということがコンセプトなツールのようですので、種々のファイルを分割して扱っている通常のWebサイトコーディングでの利用は想定していなさそうな印象ですが、検証したところ次項のような構成は組むことができたのでサンプルを作成しました。 この記事のViteでできること 複数のHTMLページ生成 HTMLファイルをejsのように扱う（ejsが利用できなかったのでその代替） ビルド後のHTMLファイルを整形（任意追加） SCSSの書き出し（Po
この記事の内容 PixiJSはJavaScript(TypeScript)で2Dのグラフィックスを描画するためのライブラリです。 ブラウザで2Dのゲームやアニメーション盛り盛りのページを作りたいときには結構な割合でお世話になるのですが、使いこなしてゲーム作ったりするのは結構大変です。 とは言え一番壁になるのは最初に環境構築して絵を自由に表示して動かす部分です。そこで、何回かに分けて最初の壁を超えて好きなゲーム制作の入り口に立てるようになるまでを解説したいと思います。 ちなみに、技術習得とか置いといて本当にゲーム作りたいだけなのであれば、phina.jsのようなPixiJSをゲーム用にラップしたフレームワークを使っても良いと思います。ここではより汎用的で自由な開発ができるよう、こうしたフレームワークは使用しません。 ▼ PixiJS使うとこんな感じのゲームも作れます 今回の内容 PixiJS
VSCode で React + Vite 環境に Tailwind CSS を導入して自動整形させてみた | DevelopersIO
Tailwind CSS を使っていると、class の書き順がバラバラになったり、冗長な class が増えたりなどの問題が起きてしまいました。 そこで VSCode で Tailwind CSS の自動整形をやってみました！ 環境 "react": "^18.2.0", "vite": "^5.0.0" "tailwindcss": "^3.3.6", "prettier": "^3.1.0", "eslint-plugin-tailwindcss": "^3.13.0", React + Vite の環境構築 まずは、React + Vite の環境を構築します。 npm create vite@latest my-app -- --template react-ts cd my-app npm install Tailwind CSS を導入 次に、Tailwind CSS を導入
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
GitHub - Akryum/peeky: A fast and fun test runner for Vite & Node 🐈️ Powered by Vite ⚡️
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
We made browser-vite - a patched version of Vite running in the browser with Workers. How it works - in a nutshell A Service Worker: replaces Vite’s HTTP server. Capturing the HTTP calls of an embedded iframe from example. A Web Worker: Run browser-vite to process off the main thread. Calls to the file system are replaced by an in-memory file system. Import of files with special extensions (.ts, .
Viteとは何なのか - Qiita
はじめに ちょっと前に話題になっていた Vite について、どのようなものなのか調べつつまとめてみました。 どのようなものなのか 従来のビルドツール(Vue CLI等)に比べて、高速で動作するビルドツールのようです。 公式サイトは下記。 https://vitejs.dev/ Vue.js を開発されたEvan You氏が開発されました。 リポジトリは下記。(2021/01/18段階では v2.0.0-beta.30 ) https://github.com/vitejs/vite Vue.js の他、 React Preact のビルドもサポートしているようです。 開発時はバンドルが不要なので、開発サーバーの起動が早い。 HMR(Hot Module Replacement)(画面の再描画なしに変更を適用してくれる機能)が、修正分のみを適応するため、 モジュールの総数に関係なくかなり高速
vue-cliをviteに移行する
viteとは一言で言うとめちゃくちゃ早いビルドツールです。 ビルドを超高速化することで開発時の生産性を大幅に向上させてくれます。 vite自体についての詳しい説明は本家を見ていただくとして、この記事ではvue-cliで開発しているプロジェクトをviteに移行する方法についてご紹介します。 実際どのくらい早くなるのかが気になるかと思うので、自分のプロジェクトで体感どのくらい早くなったかをご紹介します。 ちょっとわかりにくいですが、3秒くらい待ってたのが0.5秒くらいになっています。 導入前 導入後 スムーズにいけば1時間程度で導入でき、開発者全員が1日数百回ビルドすることを考えるとやって損はないと思います。(何よりビルドが早いと開発が楽しくなりますしね😆) では行ってみましょう！ バージョン情報 Vue 3.2.20(※Vue2でも基本的に同じ方法で移行できますが検証は行っていません🙏)
JSer.info #623 - Vite 4.0がリリースされました。 Vite 4.0 is out! | Vite SWCをサポートする@vitejs/plugin-react-swcを追加、デフォルトでES2020形式で出力するように変更、CSSを文字列としてインポートする方法の変更などの変更が含まれています。 SvelteベースのフレームワークであるSvelteKit 1.0がリリースされました。 Announcing SvelteKit 1.0 α版からの変更点は次のマイグレーションガイドにまとめられています。 Migration guide · Discussion #5774 · sveltejs/kit Node v19.3.0がリリースされました。 Node v19.3.0 (Current) | Node.js Node v19.3.0では、npm 9系となるnpm
Vite-lizing Rails: get live reload and hot replacement with Vite Ruby—Martian Chronicles, Evil Martians’ team blog
Recently, I upgraded my AnyCable demo application to Ruby 3 and Rails 7 with its new asset management tooling. As a result, assets:precompile became fast as lightning, but we lost one important productivity feature along the way: live reloading. Switching back to Webpacker in 2022 was not a good idea. Luckily, Vite Ruby had been on my radar for quite some time, so I decided to give it a try. Rails
GitHub - storybookjs/builder-vite: A builder plugin to run and build Storybooks with Vite
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - antfu-collective/vite-ssg: Static site generation for Vue 3 on Vite
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - histoire-dev/histoire: ⚡ Fast and beautiful interactive component playgrounds, powered by Vite
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
create-vueはVue公式のVueプロジェクト作成ライブラリです。npm init vue@latestコマンドを実行することでVueプロジェクトの骨組み(scaffolding)の作成とVueのアプリケーション構築に欠かすことできない機能を選択してプロジェクトに追加を行うことができます。本文書はVueの入門者の人がcreate-vueを利用してプロジェクトを作成する際に追加できるすべての機能がどのような役割を持っているのか理解できることを目的にしています。各機能の理解が進むことで機能追加時に迷うことなく自信を持って機能の選択を行うことができます。create-vueではビルドツールとして現在人気急上昇中のViteが利用されているのでViteについて動作確認をしながら説明を行なっているので開発環境と本番環境でのビルドツールの違いなども理解することができます。 VueのプロジェクトはV
JSer.info #641 - Vite 4.3がリリースされました。 Vite 4.3 is out! | Vite Vite 4.3では主にパフォーマンスの改善が含まれています。 起動速度を40%から80%程度改善、HMRの処理時間を20%から40%程度改善されています。 これらをどうやって改善したのかについては、次の記事で解説されています。 How we made Vite 4.3 faaaaster 🚀 | sun0day's blog - lost in code Deno 1.33がリリースされました。 Deno 1.33: Deno 2 is coming Deno 2に向けた変更が含まれています。 unstable APIとしてDeno KVを追加、deno.jsonの形式変更が含まれています。 新しい設定形式はよりネストが少なくなるようになっています。古い設定形式はD
Vite Plugin Node で Vite を Node.js Webアプリケーションの開発でも利用する - Webdelog
Vite で Node.js Webアプリケーションの開発を行えるようにするためのメモ書きです。 やりたかったこと Node.js Webアプリケーション開発でも TypeScript で型の恩恵を受けたい 開発時にサーバーを立ち上げたら、コードを修正する度にビルド -> サーバーを立ち上げ直すことなく動作確認できるようにしたい 前提 Vite のインストール方法についてはこの記事では取り扱いません。 以下は Vite がすでにインストールされている前提で進めています。 Vite Plugin Node を導入する 今回は vite-plugin-node を利用しました。 github.com Vite Plugin Node の特徴 Vite Plugin Node の README には以下の機能が紹介されています。 Node server の開発で HMR を利用できる (hot
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る | Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
以下の設定を追加する。 関連のある設定 rollupOptions.output.entryFileNames rollupOptions.output.chunkFileNames rollupOptions.output.assetFileNames rollupの設定が露出しているので不明点があればrollup側のドキュメントを読むと良い。 ref: https://rollupjs.org/guide/en/#outputentryfilenames import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { ou
JSer.info #680 - jQuery 4.0.0 Betaがリリースされました。 jQuery 4.0.0 BETA! | Official jQuery Blog IE 10以下のサポートを終了、非推奨のAPIを削除、jQuery prototypeオブジェクトからArrayメソッドを削除、focusとblurのイベント順を上書きしないように変更されています。 また、FormDataのサポート、自動的にJSONPへfallbackする挙動を削除、コードベースをAMDからESMへの移行、Trusted Typesのサポートなども含まれています。 jQuery 5では、IE 11のサポートを削除する予定となっています。 Storybook 8 Betaがリリースされました。 Storybook 8 Beta デフォルトのコンパイラをBabelからSWCに変更、モバイルUIの改善とい
ロンラン株式会社 CEO 兼 CTO の武部です。 もうすぐ Vuetify 3 の beta が取れて GA 版が届きそうですね！ 当社ロンランの主要 Web 製品では Vuetify 2 を採用しています。このため、必然 Vue 2 を使い続けざるを得なかったのですが、エコシステムがどんどん進化してゆくなか、いつまでも Vue 3 へ移行できないもどかしさがありました。 まずは来たるべき Vuetify 3 へ向けて、試しに一部機能を Vue 3 / Vuetify 3 beta / Vite へ移行してみることにしました。しかし、対処すべきことがなかなか多く、簡単な一部機能を移行し終えただけで燃え尽き気味。これはなかなか苦労することになるぞ...😫と渋い気持ちになりました。 ある日、Vite は Vue 2 にも対応していると気づき、対応ステップを分けて移行することに思い至りました
.env の変数(例：環境別のタグなど)を index.html から参照したい場合、Webpack を利用した環境だと何もしなくても読み込めるのですが、Vite を利用している場合だと少し頑張る必要があります。 参考 Issue:Accessing env variables from index.html #3105 検証環境 React v18.2.0 Vite v3.0.7 雛形を作成 以下の内容で新規プロジェクトを作成します。 npm create vite@latest ✔ Project name: … my-vite-project ✔ Select a framework: › react ✔ Select a variant: › react-ts .env ファイルを作成 次にルートディレクトリに.env ファイルを作成します。 VITE_MY_TITLE='環境変数
React ViteからNext.jsへ切り替えたプロセスとApp Router化のボトルネック | 株式会社ヘンリー
株式会社ヘンリーからFindy様のイベントに登壇した際の記事です。 https://findy.connpass.com/event/306714/
ep.155『Vue 3 + Vite マイグレーション座談会 〜 安全なログイン基盤のための戦略的な移行計画』 | UIT INSIDE
@odan3240 が @cola119、@kazuma0129 とともにLINEログインのフロントエンドのVue 3化について話しました。 マイグレーション対象の概要 シングルページアプリケーションの構成 Vue 2のサポート終了に伴うセキュリティ懸念 パフォーマンス向上とTypeScriptサポート 実施したこと Vue 2.6から2.7へ、そしてVue 3へアップグレード 静的解析の強化とESLintでの破壊的変更検出 外部依存性問題と非互換性のプラグイン対応 Viteへの移行でビルド速度向上 ビジュアルリグレッションテスト導入 Refs BGM&SE 魔王魂/騒音のない世界/OtoLogic
Is Turbopack really 10x Faster than Vite? · yyx990803/vite-vs-next-turbo-hmr · Discussion #8
Interestingly, the growth curve here shows that Next/turbo got 4x slower in the root case compared to the leaf case, whereas Vite only got 2.4x slower. This implies a curve where Vite HMR scales better in even larger components. In addition, switching to SWC should also improve Vite's cold start metrics in Vercel's benchmarks. Performance on Different Hardware Since this is a composite benchmark t
Vuetify 2 と @vue/composition-api を使用した TODO アプリを題材に Vue CLI から Vite / Vitest への移行を試して、とりあえず動くようになったので手順と設定を共有したいと思います。 ビルド速度やサイズの変化についてはこの記事の後ろにまとめてあります。 使用したコードは次のリポジトリにあります。 なお、この記事に記載している情報は 2022 年 1 月 30 日時点のものです。 記事の内容はあくまで一例であり、手順や設定が正しいものであるという保証はありませんのでご注意ください。 移行を試した背景 2022 年 1 月 18 日に Vue CLI がメンテナンスモードに入ったことが宣言されました。 1 Vue CLI 自体は引き続き利用可能で v5 安定版リリースに向けて作業が続けられています。 2 とはいえ今後の主流は Vite にな
初心者による「viteを使った開発環境構築！」
自己紹介 こんにちは。 駆け出したばかりの web エンジニア(24)です。 暇すぎてお遊び感覚で始めた Progate の HTML と CSS をやったら面白くなってしまい、一人前のフロントエンドエンジニアを目指し未経験から転職をいたしました。 最近は React のキャッチアップに勤しんでおります。 今回やること 早速本題ですが、今回は表題の通り開発環境の構築を紹介しようと思います。 なぜこうなったかといいますと、駆け出しエンジニアの自分が 「なにかポートフォリオを作ってみたいな〜」 となり、せっかくなら簡単な開発環境の構築からと思い立ちまして、せっせと調べながらやっていたんですが、せっかくなら自分と同じ状況になっているかもしれない駆け出しの方に共有しようと思った次第です。 では早速見ていきましょう:) 開発環境構築 どのようにやっていくかですが、今回はvoltaでnodeとnpmの
Viteの速さを知って以来その開発体験の虜になってしまい、Viteを使ったWordPress開発環境を考えたので紹介します。あくまで自分の開発フローに合わせたものであり、全ての開発シーンで利用できるとも限らないので予めご了承ください。 こちらがそのリポジトリになります ViteのHMRを効かせながら開発できるので高速なWordPress開発体験を提供できるはずです。 前提とコンセプト この開発環境は下記前提とコンセプトに基づいています。 旧来のPHPをベースとしたクラシックテーマでの開発を想定しています。新しいブロックテーマ開発で適用できるかどうか分からないです。 MacOS環境を前提としています。（Windowsでも動くと思いますが、NPM Scriptsにrmコマンドが入っているので適宜置き換えてください） 静的なHTMLを作成してからWordPress開発を行うフローを前提としていま
If you've been developing with Vue prior to 2021 there's a good chance that your build tool of choice was the Vue CLI. It's been the de-facto standard for scaffolding Vue.js projects for a while. Now though, Evan You's next generation build tool Vite, has been garnering a lot of attention and is a great alternative to the Vue CLI. Why migrate from Vue CLI to Vite? The primary reason for making the
流行りのViteを使ってフロントの環境を構築したので、備忘録として残しておきます firebaseなどの細かい設定方法に関しては、他の解説記事を貼っておきます 環境 Docker Vite Vue3 firebase M1 macを使ってます Docker周りのファイルの作成 FROM node:12.4.0-alpine WORKDIR /srv/app RUN npm install -g npm@8.1.3 RUN npm install -g @vue/cli@4.5.15 RUN npm install -g @vitejs/create-app RUN npm install -g vuex@next ADD . /srv/app ADD package.json /srv/app ↓ m1 macでscssを使うときは以下が必要です RUN apk update && apk
こんにちは！のせっち@nosecchi01です。 最近流行りのViteを導入し、Web制作に使える環境構築をしていきます。 Viteはとにかくコンパイルの早さが売りのようです。(vite:ヴィットはフランス語で早い） この辺はまだ中・大規模な案件で使用していないのでわからないですが、Gulpではjsのバンドルで特に時間がかかる印象がありますが、Viteは爆速なので期待できます。 今回は、Webエンジニア（コーダー）がViteを使うための設定を解説していきます。
React + Viteで新規プロダクトを開発している話 | HiCustomer Lab - HiCustomer Developer's Blog
こんにちは、エンジニアの尾島(@daikiojm)です。 最近は「社内にパリピ感が足りない」という課題感から Slack で「おじ卍ドレミ」を名乗っています。 最近開発を進めている新プロダクトで React と Vite の組み合わせを採用したので、技術選定の背景と使用している Vite プラグインについて簡単に紹介します。 これまでの HiCustomer のフロントエンド開発 これまで HiCustomer 社では HiCustomer のフロントエンドを Vue.js を用いて開発を進めてきました。 開発初期から現在まで、フロントエンドのコードベースは次のような変化をしてきました。 開発初期~ Vue 2 + JavaScript ~リリース 1 年 Vue 2 + TypeScript + Vue Class Component ~現在 Vue 2 + TypeScript + C
JSer.info #560 - Vite 2.6.0がリリースされています。 vite/CHANGELOG.md at main · vitejs/vite デフォルトのminifyをterserからesbuildに変更、script要素のasync属性のサポート。 静的サイトジェネレーターであるAstroのコンポーネントファイル(.astro)のサポート。 また、importしているファイルが別のファイルをimportするように連鎖しているケースで、連鎖的にimportされるファイルを事前にtransformすることでコンパイルの待ち時間を減らす最適化などが含まれています。 feat: pre transform direct imports before requests hit the server by yyx990803 · Pull Request #5037 · vitej
VitePressはVite & Vueで構築されたオープンソースの静的サイトジェネレーター（SSG）です。 VueのSSGといえばVuePressですが、VitePressはその後継的な存在となるようVue.jsが公式に開発しているもので、UXの改善、パフォーマンスの向上、より柔軟なカスタマイズを可能にするAPIなどを提供してくれるとの事です。 尚、VitePressの主な使用例の1つとして技術ドキュメントが挙げられており、このためのデフォルトテーマも用意されています。VuePressでドキュメントを作成する予定がある方はVitePressを検討されてみては如何でしょうか。ライセンスはMITとの事です。 VitePress
Vite Plugin PWA
PWAVite Plugin PWA integrations for Vite and the ecosystem Zero-config and framework-agnostic PWA Plugin for Vite
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remix 2.7で安定版となったCloudflare PagesのVite対応の実現方法を読み解く
個人サイトのビルドツールをwebpackからViteに移行した - valid,invalid
2023-11-08のJS: Remix 2.2.0(Vite)、Deno 1.38、Angular.dev
StorybookでバンドラーにViteを使う | miyauci.me
Vite で最速 React & TypeScript
PixiJS＆TypeScriptで2Dゲームを作る ①viteで爆速環境構築編
フロントエンドWeb開発用ツール「Vite 2.0」がリリース、フレームワークに依存しない設計に
Vite in the browser - ‹div›RIOTS
2022-12-20のJS: Vite 4.0、SvelteKit 1.0、Node v19.3.0(npm 9)、RUM Archive
【完全解説】create-vueでVue3プロジェクト作成〜Vite爆速開発〜 | アールエフェクト
2023-04-30のJS: Vite 4.3、Deno 1.33、Node.js 14から18へのアップデート
viteのbuild時のファイル名ハッシュを辞める - Qiita
2024-02-12のJS: jQuery 4.0.0、Storybook 8 Beta、Vite 5.1(Runtime API)
Vue 3 / Vuetify 3 に備えてまず Vite への移行をお勧めしたい
Vite 環境で index.html から環境変数を参照する | DevelopersIO
Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita
wp-envとViteで作る爆速WordPress開発環境
How to Migrate from Vue CLI to Vite - Vue School Articles
DcokerでVite + vue3 + firebase認証 環境構築 - Qiita
Webエンジニア（コーダー）向けVite環境の紹介【初心者向け解説】
2021-10-04のJS: Vite 2.6.0、Safari Technology Preview 133、TypeScript 4.5 Beta
Vite & Vueで構築されたオープンソースの静的サイトジェネレーター・「VitePress」