What the Heck is Vite?
Tags: vue, javascript, webdev, productivity
Published: 2020-10-09 06:00:16

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>


![Getting Started](https://www.wrappixel.com/demos/images/getting-started-with-vite-vue.jpg)


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.


![Run Command](https://www.wrappixel.com/demos/images/vite-js-new-img-1.jpg)


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


![Output](https://www.wrappixel.com/demos/images/vue-vite-preview-new-2.jpg)


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

![Inspect Code](https://www.wrappixel.com/demos/images/html-code-vue-vite-new-3.jpg)


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](https://adminmart.com/?ref=6) and [WrapPixel](https://www.wrappixel.com/templates/category/vuejs-templates/?ref=232) and create stunning web applications for unlimited client projects and personal projects.
- Start building web applications and products using our [Free Vuejs Templates](https://adminmart.com/templates/vuejs/?ref=6) 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.