Master Vue.js for Modern UIs

📌 Learn Vue.js – JavaScript Framework Course

Vue.js stands as a progressive JavaScript framework, revered for its approachability, performance, and versatility. This course outlines the fundamental steps and concepts required to master Vue.js, enabling developers to build modern, reactive user interfaces with confidence.

1. Introduction to Vue.js: What and Why

Vue.js is an open-source model-view-viewmodel (MVVM) frontend JavaScript framework for building user interfaces and single-page applications. Its core advantages include:

• Progressive Adoption: Easy to integrate into existing projects incrementally.
• Approachability: Gentle learning curve with clear documentation.
• Performance: Optimized rendering and reactivity system.
• Flexibility: Adaptable to various project sizes and architectural patterns.
• Tooling: Rich ecosystem with official libraries (Vue Router, Vuex, Vue CLI).

2. Setting Up Your First Vue Project

The Vue CLI (Command Line Interface) is the standard for scaffolding new Vue projects.

Installation of Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Creating a New Project

vue create my-vue-app
# Follow prompts: choose default preset or manually select features
cd my-vue-app
npm run serve # Starts development server

This creates a project structure, typically including public/index.html, src/main.js (entry point), src/App.vue (root component), and src/components/ for reusable components.

3. Core Concept: The Vue Instance

Every Vue application starts by creating a new Vue instance using new Vue(). This object serves as the root of a Vue application and connects to a DOM element.

<!-- public/index.html (or similar) -->
<div id="app">
  {{ message }}
</div>

// src/main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app', // Mounts the Vue instance to the element with id 'app'
  data: {
    message: 'Hello Vue!',
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  components: {
    App // Registering App component globally for this root instance
  },
  template: '<App/>' // Renders the App component
}).$mount('#app'); // Alternative mounting, useful if 'el' is not used

The data option holds reactive state, and methods contain functions accessible within the instance.

4. Templating Syntax

Vue uses an HTML-based template syntax that allows you to declaratively bind data to the DOM.

Text Interpolation

Using double curly braces {{ }} to display data.

<p>{{ message }}</p>
<p>Current count: {{ count }}</p>

Directives (v-)

Directives are special attributes with the v- prefix.

• v-bind (shorthand :): Dynamically binds one or more attributes, or a component prop to an expression.

<a v-bind:href="url">My Website</a>
    <!-- Shorthand -->
    <img :src="imageSrc" alt="Vue Logo">

<p v-if="isVisible">Now you see me</p>
    <p v-else-if="isPending">Pending...</p>
    <p v-else>Now you don't</p>

<p v-show="isVisible">This is also conditional</p>

<ul>
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </ul>

<button v-on:click="increment">Increment</button>
    <!-- Shorthand -->
    <button @click="decrement">Decrement</button>

<input v-model="name" type="text">
    <p>Hello, {{ name }}</p>

5. Components: Building Blocks of Applications

Components are reusable Vue instances with a name. They encapsulate their own template, script, and style.

Single-File Components (.vue files)

<!-- src/components/GreetingMessage.vue -->
<template>
  <div class="greeting">
    <h3>{{ greeting }} {{ name }}!</h3>
    <button @click="greet">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: 'GreetingMessage',
  props: {
    name: {
      type: String,
      default: 'Guest'
    }
  },
  data() {
    return {
      greeting: 'Welcome'
    };
  },
  methods: {
    greet() {
      alert(`${this.greeting} ${this.name}!`);
      this.$emit('greeted', this.name); // Emitting custom event
    }
  }
};
</script>

<style scoped>
.greeting {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
</style>

Using Components

<!-- src/App.vue -->
<template>
  <div id="app">
    <GreetingMessage name="Alice" @greeted="handleGreeted" />
    <GreetingMessage name="Bob" />
    <GreetingMessage />
  </div>
</template>

<script>
import GreetingMessage from './components/GreetingMessage.vue';

export default {
  name: 'App',
  components: {
    GreetingMessage
  },
  methods: {
    handleGreeted(name) {
      console.log(`${name} was greeted!`);
    }
  }
};
</script>

• props: Custom attributes used to pass data down from parent to child components.
• Custom Events (this.$emit): Allow child components to communicate upwards to their parents.

6. Reactivity System

Vue automatically tracks changes to data properties and efficiently updates the DOM when data changes. When a Vue instance is created, all properties in its data object are converted into getter/setters. These getter/setters allow Vue to perform dependency tracking and change notification.

7. Computed Properties and Watchers

Computed Properties

Used for complex logic that derives new data from existing reactive data. They are cached based on their reactive dependencies.

<template>
  <div>
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

Watchers

Used for performing side effects when a reactive property changes.

<template>
  <div>
    <input v-model="question" type="text">
    <p>{{ answer }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: 'I cannot give you an answer until you ask a question!'
    };
  },
  watch: {
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.answer = 'Thinking...';
        // Simulate API call
        setTimeout(() => {
          this.answer = 'Yes, definitely!';
        }, 1000);
      } else {
        this.answer = 'Questions usually contain a question mark. ;)'
      }
    }
  }
};
</script>

8. Lifecycle Hooks

Vue instances go through a series of initialization steps. During this process, specific functions (lifecycle hooks) are called, allowing developers to execute code at particular stages.

• beforeCreate: Instance initialization.
• created: Instance created, data/methods are reactive, but DOM not yet mounted.
• beforeMount: Before DOM compilation/mounting.
• mounted: Instance mounted to DOM, $el is available. Good for initial data fetching.
• beforeUpdate: Data changes, before DOM re-render.
• updated: DOM re-rendered after data changes.
• beforeDestroy (Vue 2) / beforeUnmount (Vue 3): Instance about to be torn down.
• destroyed (Vue 2) / unmounted (Vue 3): Instance torn down, event listeners removed.

export default {
  data() { return { message: 'Hello' }; },
  created() {
    console.log('Component is created!');
    // Ideal for fetching initial data
  },
  mounted() {
    console.log('Component is mounted to the DOM!');
    // Access DOM elements here
  },
  updated() {
    console.log('Component updated (data changed, DOM re-rendered)!');
  },
  beforeUnmount() {
    console.log('Component is about to be unmounted!');
    // Clean up timers or event listeners
  }
};

9. Routing with Vue Router

Vue Router is the official routing library for Vue.js, enabling the creation of Single Page Applications (SPAs) with multiple views.

Installation

npm install vue-router@3 # For Vue 2
# npm install vue-router@4 # For Vue 3

Basic Setup

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history', // Use HTML5 history mode
  routes
});

export default router;

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // Import the router

new Vue({
  router, // Inject router into the Vue instance
  render: h => h(App)
}).$mount('#app');

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Renders the matched component -->
  </div>
</template>

10. State Management with Vuex

Vuex is the official state management pattern + library for Vue.js applications. It serves as a centralized store for all components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Installation

npm install vuex@3 # For Vue 2
# npm install vuex@4 # For Vue 3

Basic Store Setup

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: { // The single source of truth
    count: 0
  },
  mutations: { // Synchronous functions to change state
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: { // Asynchronous operations that commit mutations
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: { // Computed properties for the store
    doubleCount: state => state.count * 2
  },
  modules: {
    // Organize store into modules for large applications
  }
});

Using the Store in Components

// src/main.js (inject the store)
import store from './store';
// ...
new Vue({
  router,
  store, // Inject store
  render: h => h(App)
}).$mount('#app');

<!-- src/components/Counter.vue -->
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="asyncIncrement">Async Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment'); // Calling a mutation
    },
    decrement() {
      this.$store.commit('decrement');
    },
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement'); // Calling an action
    }
  }
};
</script>

11. Composition API (Vue 3 Introduction)

Vue 3 introduced the Composition API, offering an alternative way to organize component logic, especially for larger components or reusable logic. It's available in Vue 2 via @vue/composition-api.

<!-- Example with Composition API (requires Vue 3 or plugin) -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() { // New entry point for Composition API logic
    const count = ref(0); // Reactive primitive

    function increment() {
      count.value++; // Access value of ref
    }

    return {
      count,
      increment
    };
  }
};
</script>

The setup function executes before the component is created, and ref creates a reactive reference to a value.

12. Next Steps and Ecosystem

• Vue Devtools: Browser extension for debugging Vue applications.
• Testing: Jest, Vue Test Utils.
• Server-Side Rendering (SSR): Nuxt.js framework.
• Static Site Generation (SSG): Nuxt.js, VitePress.
• UI Libraries: Vuetify, Element UI, Quasar.
• Deployment: Netlify, Vercel, AWS S3.

Mastering these fundamentals provides a strong foundation for building robust and scalable applications with Vue.js.

#vuejs #javascript #frontend #framework #webdevelopment #programming #course #tutorial #components #reactivity #router #vuex #compositionapi