Tutorials / Vue /

Creating Computed Properties with Vue's Composition API

Oct 10, 2022

To create a computed property with the Vue's Composition API, you should call Vue's computed() function. For example, the following code demonstrates how to create a computed property that transforms a string value to lowercase.

Vue.createApp({
  setup() {
    const name = Vue.ref('World');
    const lowercase = Vue.computed(() => name.value.toLowerCase());

    // Make sure to return your computed property
    // so your templates can use it!
    return { name, lowercase };
  },
  template: `
  <div>
    <input v-model="name">
    <div>
      Hello, {{lowercase}}
    </div>
  </div>
  `
}).mount('#app');

Below is a live example. Notice that Vue automatically updates the value of lowercase whenever name changes.

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Creating Computed Properties with Vue's Composition API

More Vue Tutorials