DEV Community

Cover image for What the Heck is Vite?
Sunil Joshi
Sunil Joshi

Posted on • Updated on • Originally published at wrappixel.com

What the Heck is Vite?

Vite is a Lightening fast cold server that offers instant hot modules replacement and True on demand compilation.This tool was created by the Creator of Vuejs, but this doesn’t mean that it can only be used in Vuejs, it could be used by libraries like Reactjs.

Vite allows you serve your code via native ES Module imports during development, allowing you to develop Vue single file components without a bundle step.

Getting Started with Vite

Lets take a look on how we can use Vite. Primarily Vite was built for Vue 3 but nevertheless we can still use it in our Vue 2 Application.

Head over to any directory of your choice and open up your terminal and type the following:

npx create-vite-app <name-of-project>
Enter fullscreen mode Exit fullscreen mode

Getting Started

After running this command you will have to move into you project directory by using the cd command and the install run npm install to install application dependency.

    cd vite-test
    npm install
    code .
Enter fullscreen mode Exit fullscreen mode

The code . command will open up our application in Vs code.

Next up we can run npm run dev to run our application.

Run Command

By default Vite runs on port 3000, so we can access our application using localhost:3000

Output

Now that our application is running, lets see how Hot Module Replacement actually works.

We will be using the HelloWorld.vue component inside the components folder to test how the Hot Module Replacement work.The codes there actually looks like this:

    <template>
      <h5>{{ msg }}</h5>
      <button @click="count++">count is: {{ count }}</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test hot module replacement.
      </p>
    </template>
    <script>
    export default {
      name: "HelloWorld",
      props: {
        msg: String,
      },
      data() {
        return {
          count: 0,
        };
      },
    };
    </script>
Enter fullscreen mode Exit fullscreen mode

If you actually change anything in the markup, you will notice thats the reload time is much faster than the normal Vuejs Application.

If you take a look at main.js file you will see that its still running on Vuejs under the hood.

If we inspect our code on the browser we will see that it is calling the main.js file as a module

Inspect Code

If you follow up the main.js file you will see that Vite serves modules instead of a bundle which actually make the application quite faster.

Note that all you Vuejs codes will still run effectively.

Installing Vue Router in Vite

You could still install your normal vuejs packages into your vite application like the Vue router by running:

 npm i --save vue-router@v4.0.0-alpha.11
Enter fullscreen mode Exit fullscreen mode

This will install the latest version of the Vue Router into your application.Next up create a router.js file and define some routes:

    import {
        createWebHistory,
        createRouter
    } from "vue-router";
    import Home from "./components/HelloWorld.vue";
    const history = createWebHistory();
    const routes = [{
            path: "/",
            component: Home
        },
    ];
    const router = createRouter({
        history,
        routes
    });
    export default router;
Enter fullscreen mode Exit fullscreen mode

After doing this we can now register our router.js file in our main.js file like this:

    import {
        createApp
    } from 'vue'
    import App from './App.vue'
    import './index.css'
    import router from "./router";

    createApp(App).use(router).mount('#app')
Enter fullscreen mode Exit fullscreen mode

With this done,we have to change our App.vue root component to this so that it will render all our components:

    <template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <HelloWorld msg="Hello Vue 3.0 + Vite" />
      <router-view />
    </template>
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    export default {
      name: "App",
      components: {
        HelloWorld,
      },
    };
    </script>
Enter fullscreen mode Exit fullscreen mode

And there you go you can register any other custom route of you choice.

Looking for Vue Templates?

  • Try our VueJs Templates at AdminMart and WrapPixel and create stunning web applications for unlimited client projects and personal projects.
  • Start building web applications and products using our Free Vuejs Templates without any investment.

Conclusion

The Vuejs Vite is still Experimental and will be fully function in Vue 3. You could still integrate it into you Vue 2 applications just to get more familiarity on how it works.

Top comments (8)

Collapse
 
jmfayard profile image
Jean-Michel 🕵🏻‍♂️ Fayard

Is "vite" fast? 🇫🇷

Collapse
 
lexplt profile image
Alexandre Plt

At least it means fast in French

Collapse
 
jmfayard profile image
Jean-Michel 🕵🏻‍♂️ Fayard

That was the joke yes :)

Thread Thread
 
lexplt profile image
Alexandre Plt

Woops my bad ^^'

Collapse
 
suniljoshi19 profile image
Sunil Joshi

:)

Collapse
 
suniljoshi19 profile image
Sunil Joshi

Check this out - github.com/vitejs/vite

Collapse
 
gab profile image
Gabriel Magalhães dos Santos

Long short story: is Vue

Collapse
 
suniljoshi19 profile image
Sunil Joshi

It is.