Easy way to install VueJS 3 using Vite(Modern Build tool) with Demo for beginners

VueJS is a JavaScript framework that helps build single-page websites and web applications in a simple way. It has a component-based structure that allows to split the whole structure and reuse it anywhere. You can install VueJS via cdn and html and through modern build tools like Vite in Laravel. In this tutorial we will learn in detail on how to install VueJS 3 using Vite.

Install VueJS 3 using Vite

As a perquisite to use this way of installation, you must first install the latest version of Node.js.

Once you install node.js, open your command line or terminal, move to the directory where you want to install the VueJS project files and run the command as shown below.

npm init vue@latest

When executing the command above you will be asked to select specific features as follows:

Need to install the following packages:
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … Demo
✔ Package name: … package.json
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

You can select ‘No’ to options you are not sure about.

Next, navigate to your project folder, install npm and run dev as shown below.

> cd Demo
> npm install
> npm run dev

That’s all done now, you may navigate to your localhost URL http://localhost:3000/ (Open in browser) to display your Laravel and VueJS app.

Install Vuejs 3 using Vite

That’s it, you may now open your project files in any code editor, open the App.vue file under the src folder and edit with your own code!

Leave a Comment