Creating Computed Properties with Vue's Composition API

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.

---

---

More Vue Tutorials

• Methods in Vue
• Use the Ternary Operator for Conditionals in Vue
• Vue Email Validation
• How to Copy Content to the Clipboard in Vue
• Toggle Visibility in Vue
• Add Global Variables to Vue JS Templates
• The inheritAttrs Option in Vue