Vite JS – The Installation Guide

In the first article of the Vite JS introduction series, we have covered what Vite JS is, its advantages, features, and how to build an app. In case if you did not get a chance to walk through the basic introduction, you can read it here: Vite JS – the next-gen frontend build tool.

However, the first (previous) article might have led you towards app development with the Vite JS dev tool. And now you are clueless and have no idea how to install Vite JS. Well, this second article from the Vite JS series will help you install the Vite JS tool on your device.

Since Vite is really fast, it offers Hot Module Replacement (HMR) and uses native ES modules. It doesn’t require rebuilding the whole bundle when you make any changes. You can use HMR to compile a minified version of your project to serve in production. This way, you can achieve faster updates for HMR, regardless of the size of your application.

Furthermore, you can rapidly get started with a TezJS or Vue or React project without the help of Vue CLI or Create React App. This makes it perfect for rapid prototyping and small projects, yet nothing prevents you from using it in a larger project as well. Vite also has a pre-configured build command that helps optimize speed while bundling for production.

So, now is the time to take Vite for a spin, and get started with the Vite JS installation guide.

Vite JS Tutorial: How to Install Vite JS?

Well, you are just a step closer to installing Vite JS.

Without having you wait, let’s move ahead.

Gentle Reminder – It’s necessary to install Node on your system to proceed further.

Once you are done with the Node installation process, you need to run npm init @vitejs/app. After that, you can select a project name and a template. Just to let you know, Node.js plays a crucial role in application development and you should know the use of Node.js.

However, there are various options you can choose from the below:

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

As of now, we are choosing vanilla. This will create a directory with some files based on your project name. You will find index.html, main.js, favicon.svg, style.css and some other files for Git and npm. Actually, package.json has vite as a dependency. It also some scripts to initiate the dev environment and start a build.

Now, move to any of the directory paths and open your terminal and execute the following command:

npx create-vite-app

Once you are done with the above command execution, you will have to move into your project directory with cd command. Now, write and execute npm install command to install application dependency.

cd vite-project npm install

Now the application will be opened in Vs code.

Now write npm run dev to execute the application.

We can view and access our application at http://localhost:3000/. If you edit any of the project files, changes will be reflected on the screen immediately.

Since our application is running, let’s understand how HMR (Hot Module Replacement) works.

Here, we are going to use Hello.vue component inside the component folder to check how HMR works.

The execution code will look like this:

However, if you make any changes in the markup, you will see that on your screen as it reloads time is much faster than the typical Vuejs application.

If you look at the main.js file, you can see it running on Vuejs under the hood.

In case if we inspect code on the browser using inspect menu, we can see that it’s calling the main.js file as a module.

Allow me to show you that with the given screenshot.

If you look at the main.js, you can see that Vite serves modules instead of a bundle, making the application faster.

Now your Vuejs code will run seamlessly.

When Opportunity Knocks, Get the Developers You Need, Fast.

Find Frontend Developers

How to Install ViteJS Vue Router?

If you plan to install Vite Vue Router, you first have to install vue.js packages into your vite application like the Vue router by executing the below command.

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

Now the latest version of Vue Router will be installed into your vite application.

The next step is to create a router.js file and define some routes as 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;

Once the above code is executed, we can now register our register.js file in our main.js file with the given command:

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

After that, we need to change our App.vue root component to render all our components.

Now you have all the power to register any other custom route of your choice.

Single-page Application

Now, you have a question: Can I set up a single-page application?

The short answer is Yes!

Let’s try with Vue. After executing npm init @vitejs/app and scheduling the Vue template, we can compile Vue, Vite and a Vite plugin to Vue. However, we need to install Vue Router to develop a Single-page Application to handle routes.

It seems like Vite is not useful here. It’s a plain Vue setup, and we are responsible for what we plug into Vue. It will work perfectly after installing vue-router and configuring Vue to use it. As per the documentation in multi-page app, we can also create several pages using Vite, though it needs tweaking Vite’s Rollup configuration.

I did come across vite-plugin-vue-router, a new community-made plugin that builds a router based on file paths, similar to Nuxt.

As a tech person, I feel that some developers will come up with Vue + Vue Router + Vuex template for Vite, but I know it will never be the same or better than Nuxt. I guess, this same thing goes for React and Next.js, and Svelte and SvelteKit/ Sapper. These web app frameworks are optimized for specific libraries and complex web applications.

If there isn't a battle-tested web app framework for the language of your choice, I believe Vite is a viable solution, albeit it will need some configuration.

ViteJS for Backend Integration

While developing some projects, we work on codebases that don’t support Jamstack. But, as a backend, they use .NET or PHP. Generally, Vite can be used to create optimized bundles of CSS and JavaScript. Vite offers vitejs for backend integration to facilitate this feature.

Now, Vite creates a manifest file that contains information about all created bundles. This file will create <script> and <link> tags for the JavaScript and CSS bundles, respectively. Every import is bundled together in main.js, but all dynamic imports (import(‘path/to/file.js’)) are split up into their own bundles.

Have You Tried to Install Vite Yet?

This second article from the Vite introduction series comes to the conclusion part.

So, now the actual question comes, did you try to install Vite for your upcoming project? If you get confused or face an issue, you can ask the expert from the top frontend development company, Radixweb. Don’t worry; we will guide you through the right step to install Vitejs.

However, if I talk about Vite, it will be fully functional in Vue 3. But you can still integrate it into your Vue 2 apps.

In the next article from the Vite introduction series, we are going to bring up something interesting and new from our desk. I ensure that will make you a game-changer in the frontend development if you use Vite correctly.