What the heck is Vue Vite?

Vue Vite

Vite is a Lightning 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 to 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

Let’s take a look at 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 your 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, the 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, let’s 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 that’s the reload time is much faster than the normal Vuejs Application.

If you take a look at the main.js file you will see that it’s 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

Follow up on the main.js file you will see that Vite serves modules instead of a bundle which actually makes the application quite faster.

Note that all your 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 your choice.

Looking for Vue Templates?

• Try our Vuejs Templates 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 functional in Vue 3. You could still integrate it into your Vue 2 applications just to get more familiarity on how it works.

This article is originally posted at WrapPixel - https://www.wrappixel.com/what-the-heck-is-vite/