2. Using VITE

• Vite is created by Evan you and it is a rapid development tool for modern web projects. It focuses on speed and performance by improving the development experience.
• Vite uses HMR (Hot Module Replacement) functionalities to keep track of changes in your application without reloading the full page. With the HMR API, the browser will only load the modified section of the page and still retain the application's state.With HMR performance, you can design lighter and faster applications regardless of the number of modules or the size of your application.

• It can also be used with other frameworks, including React

Create Vue App Using Vite:

first run this command for creating vue app

   > npm init vue@latest

Now, It will give you some dependencies options. here you chose dependencies as your need. But if you are unsure about an option, simply choose No by hitting enter for now.

✔ Project name: … <your-project-name>
✔ 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
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.

screen shot: creating app using vue vite

Once the project is created, follow the instructions to install dependencies and start the dev server:

> cd <your-project-name>
> npm install

when npm successfully installed, it will give you directory structure like this.

Now: run your project using following command.

       > npm run dev

Now: copy this localhost url and past in browser and see the magic.

Output

When you run vue app then it will showing like this.