How to build a Vue.js project from scratch

A Brief History of Vue.js

Vue.js was created by Evan You in 2014. After working with AngularJS at Google, Evan wanted to build something more lightweight, flexible, and incrementally adoptable. The result was Vue.js—a progressive framework that lets developers scale from simple widgets to full-scale applications.

Over the years, Vue has grown to become one of the most loved JavaScript frameworks in the developer community, thanks to its developer-friendly syntax, rich ecosystem, and vibrant community.

✅ Step 1: Install Node.js and npm

Before starting, you need to have Node.js and npm (Node Package Manager) installed on your system.

To check if they're installed:

node -v
npm -v

If not, download and install them from: https://nodejs.org

✅ Step 2: Install Vue CLI (Command Line Interface)

Vue CLI is the official tool for scaffolding Vue projects.

To install globally:

npm install -g @vue/cli

To verify:

vue --version

✅ Step 3: Create a New Vue Project

Once Vue CLI is installed, you can use it to create a new project.

Run the following command:

vue create my-vue-app

You’ll be prompted to choose between:

Default preset (Babel + ESLint)

Manually select features (for TypeScript, Vuex, Router, etc.)

Choose based on your needs. For most starters, the default preset works well.

✅ Step 4: Navigate to the Project Directory

Move into the project folder and start the development server:

cd my-vue-app
npm run serve

This will compile and hot-reload the app in development mode. You can view it at:

http://localhost:8080

✅ Step 5: Understand the Project Structure

Here’s a breakdown of the most important folders/files:

src/: Source files for your app

main.js: Entry point

App.vue: Root component

components/: Where your Vue components live

public/: Static assets like index.html

package.json: Project metadata and dependencies

✅ Step 6: Start Building!

You can now start creating your components inside the src/components folder.

Here’s an example component:

Hello, Vue!

export default {
name: 'HelloWorld'
}

h1 {
color: green;
}

Then import and use it in App.vue.

🎉 Conclusion: You're Now Ready to Build with Vue!

You’ve just built a Vue.js project from scratch using the Vue CLI in 6 straightforward steps. From here, you can dive deeper into concepts like:

Vue Router (for page navigation)

Vuex (for state management)

Composition API (Vue 3’s advanced feature)

API integration

Deployment with tools like Netlify or Vercel

Vue’s ecosystem is rich and growing. Whether you're building a small widget or a full-featured app, Vue is a reliable and developer-friendly choice.