☰  [ ![Vue
School](https://vueschool.io/img/logo/vueschool_logo_multicolor_negative.svg)
](/ "Go to VueSchool.io, home of Vue.js courses")

×

Courses

  * [ Video Courses ](/courses)
  * [ Vue.js Master Class 2024 Edition ](/the-vuejs-master-class-2024)
  * [ Vue.js Master Class ](/the-vuejs-master-class)
  * [ Workshops ](/workshops)
  * [ Mastering Nuxt ](https://masteringnuxt.com/?ref=vueschool)

[ Plans ](/plans)

Business Services

  * [ Vue.js Corporate Training ](/vue-corporate-training)
  * [ Workshops ](/workshops)
  * [ Hiring ](/hiring)

[ Learning Paths ](/learning-paths) [ Articles ](/articles)

Events

  * [ Frontend Nation ](https://frontendnation.com/)
  * [ Vue.js Nation ](https://vuejsnation.com/)
  * [ Nuxt Nation ](https://nuxtnation.com/)
  * [ Vue.js Forge ](https://vuejsforge.com/)

[ Get Certified
](https://certificates.dev/vuejs/?utm_source=vueschool_TLN&utm_medium=link&utm_campaign=vueschool.io_TLN_Link)
[ 40% OFFER  ](/sales/spring24)

* * *

[ Login ](/login) [ Create account ](/register)

×

[ ![Banner](/images/banners/static/NUXT_CERT_EB_LAUNCH/floating.png)
![Banner](/images/banners/static/NUXT_CERT_EB_LAUNCH/floating-mobile.png)
](https://certificates.dev/nuxt)

[ Home ](/) / [ Blog ](/articles) /  How to Migrate from Vue CLI to Vite

Share:

[
](https://twitter.com/intent/tweet?text=How%20to%20Migrate%20from%20Vue%20CLI%20to%20Vite%20-%20Vue%20School%20Articles&url=https://vueschool.io/articles/vuejs-
tutorials/how-to-migrate-from-vue-cli-to-vite/) [
](https://www.facebook.com/sharer/sharer.php?u=https://vueschool.io/articles/vuejs-
tutorials/how-to-migrate-from-vue-cli-to-vite/)

[ ![How to Migrate from Vue CLI to Vite](https://blog.vueschool.io/wp-
content/uploads/2021/11/how-to-migrate-from-vue-cli-to-vite-social.jpg)
](/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/)

#  How to Migrate from Vue CLI to Vite

[ ![Daniel Kelly](https://blog.vueschool.io/wp-content/uploads/2022/09/vue-bg-
headshot-sqaure-96x96.jpg) Daniel Kelly  November 11th 2021
](/articles/author/daniel-kelly)

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 move is all about speed. Vite's development
server is fast. Because it uses native browser support for JavaScript modules,
the server start time is instant. The approach also means that Hot Module
Replacement remains fast no matter the size of the application since the
entire bundle doesn't have to be reconstructed.

To demonstrate, here are the benchmarks of a brand new Vue CLI project
compared to the exact same project using Vite.

  * Start time: 
    * Vue CLI - 2591ms (over 2 seconds) 
    * Vite - 259ms (well under half a second - 10x faster) ⚡️ 
  * Hot Module Replacement (HMR): 
    * Vue CLI - 171ms 
    * Vite - Not printed to console by Vite but from observation... essentially instant 

And remember this is just the scaffolded boilerplate. As your project grows,
the Vue CLI version would just get incrementally slower, while Vite promises
to perform at the same levels no matter the size of your project.

##  How to migrate from Vue CLI to Vite

So you're convinced that Vite is right for you, how do you go about migrating
your project from using Vue CLI to Vite?

In order to answer that question, I built a brand new project with Vue CLI and
I'm going to go through the steps with you to convert it to Vite. Of course,
you wouldn't typically be starting with a brand new Vue CLI project, but many
of these steps will be the same for your established projects.

Also, I've chosen to work from a Vue 2 codebase, as most of you probably have
your well established codebases still running on Vue 2. However