Vue.js Key Features You Should Know

Vue.js is a progressive JavaScript framework for building user interfaces. It is ideal for building single-page applications and can also be used to develop components of complex web applications. Vue.js is easy to learn and gives developers flexibility in code organization and application state management.

Vue.js also uses an efficient diffing algorithm to improve the performance of web applications. This minimizes DOM updates and thus increases the responsiveness of the application. Thanks to its modular structure, Vue.js allows developers to import only the features they need. This speeds up the loading speed of the application and improves overall performance.

Component Communication

In Vue.js, components can communicate with each other using props and events. Props are used to pass data from parent components to child components, while events are used to send data from child components to parent components. It’s important to note that data should flow down through props and events should flow up.

Props
Props are custom attributes that allow you to pass data from a parent component down to a child component. In the child component, you declare the props it expects to receive using the props option.

// In the child component
props: ['message'],

// In the parent component
<child-component message="Hello from parent!"></child-component>

In this example, the child component expects to receive a prop named message. The parent component passes the string “Hello from parent!” to the child component via the message prop.

v-model
v-model is a directive that creates two-way data bindings on form input, textarea, and select elements. It’s essentially syntactic sugar for updating data on user input events.

// In the parent component
<child-component v-model="message"></child-component>

// In the child component
props: ['value'],
...
<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)">

In this example, the parent component binds its message data property to the value prop of the child component. When the user types in the input field in the child component, it emits an input event with the new value, updating the parent’s message property.

Computed Properties

Computed properties are functions that are used as properties in a Vue.js instance. They are ideal for performing calculations or operations and returning the result.

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

This computed property will automatically update whenever firstName or lastName changes.

Watchers

Watchers are special Vue.js features that allow you to keep track of changes on data properties. They are useful when you want to perform asynchronous operations or expensive operations in response to changing data.

watch: {
  firstName(newVal, oldVal) {
    console.log(`firstName changed from ${oldVal} to ${newVal}`);
  }
}

In this example, a watcher is set on the firstName property. Whenever firstName changes, the function logs the old value and the new value to the console.

Form Validation

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="name" required> <!–– required just checking is it blank, there is not any regex ––>
    <span v-if="errors.name">{{ errors.name }}</span>

    <input type="email" v-model="email" required>
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">Submit</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      errors: {}
    }
  },
  methods: {
    submitForm() {
      this.errors = {};
      if (!this.name) {
        this.errors.name = 'Name is required.';
      }
      if (!this.email) {
        this.errors.email = 'Email is required.';
      } else if (!/\\S+@\\S+\\.\\S+/.test(this.email)) { //checking email address format with regex
        this.errors.email = 'Email is invalid.';
      }
      if (Object.keys(this.errors).length === 0) {
        // Form is valid, you can submit it
      }
    }
  }
}
</script>

State Management

We are using Pinia module for state management

Pinia Futures:

1. State: The reactive data of your application.
2. Getters: Functions that compute derived state based on your store state.
3. Actions: Methods that are used to perform operations that can change the state.
4. Plugins: Extend Pinia’s functionality with plugins.
   plugins that can be used with Pinia:
   1. Persistence Plugin: You could create a plugin that syncs a store’s state with local storage or another persistence layer. This would allow the state to persist across page reloads.
   2. Logging Plugin: A plugin could be used to log all state changes for debugging purposes. This could be particularly useful during development.
   3. Undo/Redo Plugin: A plugin could keep a history of state changes, allowing you to add undo/redo functionality to your application.
   4. Analytics Plugin: You could create a plugin that sends analytics events whenever certain actions are performed.
   5. Validation Plugin: A plugin could be used to validate the state and ensure it meets certain criteria.
5. Devtools Integration: Built-in support for Vue Devtools.

Axios: promise-based HTTP client

We are using in Vue.js applications for making HTTP requests to APIs

1. Fetching Data
   created() {
axios.get('<https://api.example.com/data>')
.then(response => {
this.data = response.data;
});
}
2. Posting Data
   methods: {
submitForm() {
axios.post('<https://api.example.com/data>', this.formData)
.then(response => {
console.log(response.data);
});
}
}
3. Updating Data
   methods: {
updateRecord() {
axios.put(`https://api.example.com/data/${this.recordId}`, this.formData)
.then(response => {
console.log(response.data);
});
}
}
4. Deleting Data
   methods: {
deleteRecord() {
axios.delete(`https://api.example.com/data/${this.recordId}`)
.then(response => {
console.log(response.data);
});
}
}
5. Error Handling
   axios.get('<https://api.example.com/data>')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error(error);
});
6. Interceptors
   axios.interceptors.request.use(config => {
// Do something before the request is sent
return config;
}, error => {
// Do something with the error
return Promise.reject(error);
});

Vue Router 4

Vue Router 4 is the official router for Vue.js 3

Key Features Of Vue Router 4:

1. Dynamic Route Matching: You can map routes to components dynamically, allowing you to create complex user interfaces with nested routes.
2. Named Routes: You can give routes names to make it easier to link to them, even when their paths change.
3. Programmatic Navigation: You can navigate to different routes programmatically using methods like router.push.
4. Navigation Guards: You can use navigation guards to control access to certain routes, for example to implement authentication.
5. Route Meta Fields: You can attach additional information to routes using meta fields, which can be used in navigation guards, for example to indicate which routes require authentication.
6. Lazy Loading: Vue Router 4 supports lazy loading of route components, which can help to reduce the initial bundle size of your application.
7. History Mode: Vue Router 4 supports HTML5 history mode, which allows for clean URLs without the hash (#) symbol.
8. Scroll Behavior: Vue Router 4 can control the scroll position when navigating to a new route, for example to restore the scroll position when navigating back and forth.

Route Transitions

<template>
  <transition :name="transitionName">
    <router-view></router-view>
  </transition>
</template>

computed: {
  transitionName() {
    // return a different transition name based on the current route
    return this.$route.name === 'home' ? 'fade' : 'slide';
  }
}

You should define fade, slide transitions in CSS!