Scaffolding a Vue 3 project using create-vue ⚡️

Scaffolding a Vue 3 Project Using create-vue ⚡️

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

1. Vue is very simple to learn, also for beginners, 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 composed of a large ecosystem maintained by a community of insiders and passionate people.

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

Prerequisites

1. Have Node >= 16 installed on your machine
2. 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:

Vue App First Page

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 🫰🏻

Checkout my Linktree👇🏻

Domenico Tenace | Twitter | Linktree

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• Tired of blogging platforms that force you to deal with algorithmic content? Try Differ
• More content at PlainEnglish.io