DEV Community

Cover image for Scaffolding a Vue 3 project using create-vue ⚡️
Domenico Tenace
Domenico Tenace

Posted on • Updated on • Originally published at

Scaffolding a Vue 3 project using create-vue ⚡️


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.


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


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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Open the terminal and run the following command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

First page Vue app


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!✨

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


Follow me on for other articles 👇🏻

Top comments (0)