Vue 3 Composition API- What You Should Know

Overview

Vuejs composition API is a uniquely designed progressive library that is built on top of JavaScript. This powerful library makes coding easier as it is specially configured to make codes shorter, organised, more readable, approachable etc.

For people who have used this powerful tool, you’ll agree that it works pretty well especially looking at how it works with components & their data, methods, computed properties etc. Without a doubt, vuejs latest is pretty much self explanatory especially if you are working with small components that have limited functionality. Here are some really good example to broaden your understanding of vuejs trends and how it works.

Lets take an example of a search bar in the header of the application

Search bar will have data object & methods object;

 data() {
    return {
      // search variable
    }
  },
  methods: {
    // search logic
  },

If we decide we want to add lets say sorting logic to this very search component, then our component data object & methods object will look like;

data() {
    return {
      // search variable
      // sorting variable
    }
  },
  methods: {
    // search logic
    // sorting logic
  },

While what we have above is perfect for a component like this, if we need to add features like pagination and search filter to this component, then we will be talking about writing lots of codes and splitting it into various component options ( props, watchers, computed, life cycle hooks etc ), which at the end of the day will make our codes difficult to read.

But not to worry, all that can be sorted out, thanks to Vuejs developer Composition API. This powerful tool is uniquely designed to make our codes more readable and easy to work with. Simply put, Vuejs developer will help keep our future code together.

export default {
  setup() {
    // search
    // sorting
  }
}

HOW TO USE COMPOSITION API

Thanks to Vuejs trends Composition API, developers can now overcome the challenges that comes with looking into codes by other developers. With this tool, developers can easily look into your code without scrounging between data, methods, computed, watchers objects in order to find which elements are related to which specific functionality / feature.

NOTE: Please be reminded that using Vuejs developer is completely optional. As a developer you can use this API when component is too large and needs to be organised by logical concerns(feature).

If you are using Vue version 2.x then you need to add composition API as a plugin
npm install @vue/composition-api --save

After installing plugin you need to import predefined functions. Let’s take ref for instance, which basically is a reactive reference that wraps primitives in an object to track changes
import { ref } from "@vue/composition-api";

NOTE: You need to import the following in main.js if using vue cli. If that isn’t the case, you can import it using the component itself

import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

export default {
  data() {
    search: null;
    items: [];
  },
  computed() {
    filteredItems() {
      // filter logic
    }
  }
}

import { ref, computed } from "@vue/composition-api";

export default {
  setup() {
    const search = ref(null)
    const filteredItems = 
      computed(() => {
        // filter logic
      })

    return { search, 
      filteredItems 
    }
  }
}

More so, you can also write the code like this and everything will work perfectly;

import { reactive, computed, toRefs } from "@vue/composition-api";

export default {
  setup() {
    const event = reactive({
      search: null,
      filteredItems: computed(()=> {
        // filter logic
      })
    })
    return { ...toRefs(event) }
  }
}

Reactive takes an object & returns it as a reactive object
ToRefs on the other hand creates a plain object with reactive references

Available functions / options in composition API are:

setup(): The setup function is a new component option. It serves as the entry point for using the Composition API inside components.

reactive(): This function takes an object and returns a reactive object.

ref(): It wraps primitives in an object to track changes, it requires .value in order to access values inside setup() itself, but you can access value on DOM without .value

isRef(): Checks whether a value is a ref object. Very powerful and useful when unwrapping something that may be a ref.

toRefs(): Helps convert a reactive object to a plain object. This is super important where each property on the resulting object is a ref pointing to the corresponding property in the original object.

computed(): Takes a getter function and returns an immutable reactive ref object for the returned value from the getter. It can also take get, set functions.

readonly(): Takes an object (reactive or plain) or a ref and returns a readonly (and reactive) proxy to the original.

watch(): Runs a function on the next tick while re-actively tracking its dependencies, and re-run it whenever the dependencies have changed.

Lifecycle Hooks: Lifecycle hooks can be registered with directly imported onXXX functions eg:- onMounted, onUpdated etc.

In a nutshell

This Vuejs compostion API is just the perfect tool needed to make coding easy. If you’re looking for a reliable Vuejs development company to handle your vuejs projects, you’ll not go wrong to reach out to us today. we are sure you’ll love our services.