Scaffolding a Vue 3 project using create-vue ⚡️

Overview

Vue.js the progressive JavaScript framework, one of three modern frontend framework with Angular and React.
What is the reasons why many developers choose this framework?

1. Vue is very simple to learn, also for beginner, thanks to its simple and declarative syntax.
2. You decide when to increase the difficulty: Vue is great for small or large projects such as enterprise software.
3. It's compose by a large ecosystem maintened by a community of insider and passionate people.

This article will show you how to scaffolding a Vue.js application with create-vue, the official scaffolding method.

Prerequisites

• Have Node >= 16 installed on your machine
• Familiarity with the command line

Installation

create-vue is the official method to create a Vue.js Single Page Application (SPA). It's based on Vite a frontend tool for developing modern web applications.

First, run the following command in your command line:

npm init vue@latest

The first time, this command will ask you to install create-vue and once installed, the project creation procedure will start.
You will be presented with prompts for several optional features:

√ 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 an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

It possible customize the scaffolding of the app adding TypeScript or JSX support, add Pinia or Vue Router, ESLint, Vitest.
At the end of the process, follow these commands for install the dependencies:

cd <your-project-name>
npm install

Congratulations! You have created your first Vue app! 🎊

Run your app

Now, you have just created your first app.
The folder structure is similar to this:

├── public
├── node_modules
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├── index.html
├── package-lock.json
├── package.json
└── README.md

Open the terminal and run the following command:

npm run dev

Follow the url on the console (for example http://localhost:5173) and you will see this:

Conclusion

Vue is a powerful and lightweight framework for creating interactive user interfaces and now you can scaffolding a project to create any applications you would like.
Happy coding!✨

---

Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Vue and Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹