Vue.js Tutorial – The Complete Guide for Beginners & Developers

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications. It’s lightweight, flexible, and beginner-friendly, making it one of the most popular front-end frameworks today.

Open-source
Component-based
Easy to integrate
Used by Alibaba, Xiaomi, GitLab, and more

Official Website – Vue.js

Installing Vue.js

Option 1: CDN (Quick Start)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Option 2: Vue CLI

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

Vue CLI Guide

Understanding Vue Instance

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
app.mount('#app');

Each Vue app begins by creating a Vue instance using Vue.createApp().

Template Syntax

Vue uses an HTML-based template syntax:

<p>{{ message }}</p>

You can also bind raw HTML:

<p v-html="rawHTML"></p>

Data Binding

One-Way Binding

<p>{{ username }}</p>

Two-Way Binding

<input v-model="username" />

This creates real-time sync between data and UI.

Vue Directives

Vue comes with special directives for DOM interaction:

Event Handling

<button v-on:click="count++">Clicked {{ count }} times</button>

Or shorthand:

<button @click="increment">Click Me</button>

methods: {
  increment() {
    this.count++;
  }
}

Computed Properties and Watchers

Computed Property

computed: {
  fullName() {
    return this.first + ' ' + this.last;
  }
}

🔔 Watcher

watch: {
  searchQuery(newVal, oldVal) {
    this.fetchResults(newVal);
  }
}

Components in Vue

Components are reusable pieces of UI.

app.component('hello-component', {
  template: `<h2>Hello from component!</h2>`
});

Use it like this:

<hello-component></hello-component>

Vue Router Basics

For Single Page Apps (SPA):

npm install vue-router

Define routes:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

Create router instance:

const router = createRouter({
  history: createWebHistory(),
  routes
});

Vuex – State Management

npm install vuex@next

Create a store:

const store = createStore({
  state() {
    return { count: 0 };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Use in component:

<button @click="store.commit('increment')">+</button>

Vuex Docs

Styling in Vue

Scoped styling prevents global CSS leaks:

<style scoped>
h1 {
  color: green;
}
</style>

You can also use frameworks like Tailwind CSS, BootstrapVue, or Vuetify.

Vue DevTools & Debugging

Vue DevTools

Install from Chrome Web Store

Use to:

• Inspect component tree
• Track reactive data
• Debug state management

Best Practices

Split UI into components
Use props and emits wisely
Keep logic separate from template
Always use v-bind:key in loops
Follow Vue style guide: https://vuejs.org/style-guide/

Conclusion

Vue.js is a game-changer for building modern web interfaces. Whether you’re crafting a small widget or a full-fledged SPA, Vue provides clarity, flexibility, and developer happiness.

Try building a todo app, then progress to router and Vuex—it’s the perfect progression path for new frontend devs.

FAQs

Q1: Is Vue.js good for beginners?
Yes! Vue is intuitive, flexible, and easy to integrate with projects.

Q2: What’s the difference between Vue 2 and Vue 3?
Vue 3 offers better performance, Composition API, and smaller bundle size.

Q3: Can I use Vue with TypeScript?
Yes! Vue 3 has full TypeScript support out-of-the-box.

Q4: What’s the best UI library for Vue?
Try Vuetify, Element Plus, or Quasar.

Q5: Is Vue.js SEO-friendly?
With server-side rendering (Nuxt.js), Vue becomes SEO-optimized.