In this blog, we are going to provide you with the installation guide for Vite JS. It will help you easily install it on your device. Vite provides Hot Module Replacement (HMR) and makes use of native ES modules since it is very fast. In case of any change, it does not need to rebuild the whole bundle. We recommend you use HMR for compiling a mini version of your project that will serve in production. So, you will be able to attain faster updates for HMR, notwithstanding the size of your application. Additionally, Vite has a pre-configured build command that will help you in optimizing speed in the period of production.

Vite JS – The Installation Guide

Also Read: How to print quotation marks in python?

Vite JS – The Installation Guide

Before proceeding, you should note that it is compulsory for you to install Node on your system.

After the Node installing procedure, you have to run  npm init @vitejs/app. After doing so, you have to choose a project name and a template. You can select one from the options given below:

  • react
  • react-ts
  • vanilla
  • svelte
  • svelte-ts
  • vue
  • vue-ts
  • lit-element
  • lit-element-ts
  • preact
  • preact-ts

We are going to go with vanilla for now. A directory will be formed with some files on the basis of your project name. For example,  index.htmlmain.jsfavicon.svgstyle.css and other files for Git and npm.

Let’s move on to any of the directory paths now. Secondly, you have to open your terminal and execute the command given below:

npx create-vite-app
Vite JS – The Installation Guide

After completing the execution of the above command, now move into the project directory with the cd command. In order to install application dependency, you have to write and execute the command of  npm install.

cd vite-project npm install

The application will now open up in Vs code. You have to write  npm run dev for executing the application.

Vite JS – The Installation Guide

You will be able to view and access your application at http://localhost:3000/. In case of any edits in the project, you will be able to see the changes on the screen right away.

Working of HMR

We will now understand the working of HMR (Hot Module Replacement) as your application is running now. We will use  Hello.vue component present in the component folder to check the workings.

The execution code will look as follows:

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

But when you make changes in the markup, you will see that reloading time is much faster on the screen compared to the typical Vuejs application. While looking at the main.js file, you will be able to see it running on Vuejs under the hood.

If you use inspect menu for inspecting the code on the browser, you will be able to see that it is calling the main.js file as a module. The screenshot for it is given below:

You will find that the application has become faster because of Vite serving modules instead of a bundle, if you look at the main.js. The Vuejs code will run smoothly now.

Installation of ViteJS Vue Router

If you are planning on installing Vite Vue Router, you should install  vue.js packages first into your vite application. You can do so by executing the command given below:

npm i --save vue-router@v4.0.0-alpha.11

In this way, the latest version will now be available in your vite application. In the next step, you have to create a router.js file and define routes as given below:

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

After the execution of the above code, you will register your register.js file in main.js file with the help of the below-mentioned command:

import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from "./router"; createApp(App).use(router).mount('#app')

Now is the time for changing your App.vue root component for rendering all your components.

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

Single Page application

The answer to your question about whether you can set up a single-page application is Yes. We are going to try this with Vue. After execution of npm init @vitejs/app , you have to schedule the Vue template. Then, we will compile Vue, Vite, and a Vite plugin to Vue. Before moving forward, you should install Vue Router for the development of a Single-page Application for handling routes.

It may seem like Vite is not serving its purpose here. This is because it will be a plain Vue setup. So, we came across vite-plugin-Vue-router, which is a new community-made plugin. It will create a router on the basis of file paths in a similar way to Nuxt.

Vite JS for Backend Integration

When we are developing some projects, there are codebases that don’t aid Jamstack. However, they use .NET or PHP as a backend. Vite is a great option for the creation of optimized bundles of CSS and JavaScript as it offers vitejs for backend integration.

Vite has a manifest file containing information about all of its created bundles. You will be able to create  <script> and <link> tags through this file for the JavaScript and CSS bundles, respectively. In main.js each  import is tied up together but every dynamic imports (import(‘path/to/file.js’)) are separated into their own bundles.

Conclusion on Vite JS – The Installation Guide

We hope that our guide on the installation of Vite JS is helpful to you. We have also covered other related topics to Vite JS in this blog so that all your queries get resolved. Thank you for reading our blog!