Sunil Joshi

Posted on Oct 9, 2020 • Updated on Apr 6, 2023 • Originally published at wrappixel.com

What the Heck is Vite?

#vue #javascript #webdev #productivity

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>

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 .

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

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

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

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>

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

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

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;

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')

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>

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.