How to Create a Vue 3 Project Using Vue CLI and Vite

 

Creating a Vue 3 Project with Vue CLI

Vue CLI is a powerful command-line tool designed to make setting up and managing Vue projects a breeze. Here’s how you can get started:

Step 1: Update Vue CLI

To ensure you’re working with the latest features and fixes, update Vue CLI globally by running this command in your terminal:

npm update -g @vue/cli  

This will upgrade Vue CLI to the most recent version.

---

Step 2: Create Your Vue 3 Project

Next, create a new Vue project by entering:

vue create <PROJECT-NAME>  

Replace <PROJECT-NAME> with the name you want for your project.

Project Setup Options

During setup, Vue CLI will prompt you to select a preset.

• Be sure to choose the preset that supports Vue 3.
• If needed, you can include additional tools like Vue Router, Vuex, or TypeScript.

---

Step 3: Run Your Application

Once the project is ready, navigate into the project folder and start the development server:

cd <PROJECT-NAME>  
npm run serve  

Open your browser and visit http://localhost:8080/ to see your Vue 3 app in action.

---

Creating a Vue 3 Project with Vite

If you prefer a modern, lightning-fast build tool, Vite is an excellent alternative to Vue CLI.

Step 1: Set Up Your Project with Vite

Initialize a new Vue 3 project by running:

npm create vite@latest  

You’ll be asked to name your project and select a framework.

Framework Selection

• Choose Vue as your framework.
• You’ll also have the option to pick between JavaScript or TypeScript, depending on your preference.

---

Step 2: Install Dependencies

After setting up the project, go to your project directory and install the required dependencies:

cd <PROJECT-NAME>  
npm install  

---

Step 3: Run the Development Server

To preview your app, start the Vite development server by running:

npm run dev  

The server URL (e.g., http://localhost:3000/) will appear in your terminal. Open it in your browser to see your app live!

---

Vue CLI vs. Vite: Which Should You Choose?

Feature	Vue CLI	Vite
Speed	Slower build time	Lightning-fast build and hot reload
Features	Rich ecosystem and plugins	Lightweight and modern tooling
Use Case	Advanced configuration needs	Quick setups and modern apps

Both tools are fantastic. Vue CLI is ideal for complex projects with advanced configurations, while Vite shines in speed and simplicity, perfect for modern web apps.

---

Conclusion

I hope this guide helps you decide between Vue CLI and Vite for your Vue 3 project. Both tools are great in their own ways, so it’s all about what works best for your project. Happy coding, and feel free to share your thoughts or questions in the comments!

---