



Composition API allows a user to write components and composition functions, such as #key# mixins: A flexible way to distribute reusable functionalities for Vue components #key# and #key# scoped slots: A scoped slot functions as a reusable template (that can be passed data to) instead of already-rendered elements. #key#.

## Installation

To install the Composition API in our Vue 2 or Vue 3 program, we execute the following command in our terminal.

---
``` shell
npm install --save @vue/composition-api
```
---
> If you don't have #key# `npm`: node package manager #key# installed, then click #key# here: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm #key# .

## Code

Let's write a code example to understand the working of Composition API in Vue.

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div>Today is {{ day }}
    <input v-model="day" /> 
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const day = ref('')
    const isDayPresent = computed(() => day.value)

    return {
      day,
      isDayPresent
    }
  }
}
</script>

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js



> **Note**:
> - **`{{}}`**: These are place-holders used for data.
> - **`v-model`**: This is used for two-way binding. It binds the value of #key# HTML: HyperText Markup Language #key# elements to application data.
> 
> The main difference between the Options API in Vue 2 and Composition API in Vue 3 is the newly introduced `setup()` function inside `export default`. The **`setup()` function** is the starting point of this API and is executed right before the component is created. This function allows the reusability of certain components.  


## Code explanation 

- **Lines 1–5**: We have the `<template>` tag that includes a `<div>` element. This div takes input from the user and passes whatever is written inside the textbox. We can see this in the output above when we press "Run".

- **Line 8**: In order to use the `ref`, `computed`, or other methods, we have to define them. The `import` statement defines these methods so that we can use them in our code.

- **Line 11**: Using the `setup()` function, we can make reactive states and standalone primitive values (such as `strings`, `boolean`, etc.) using `reactive` and `ref` methods, respectively.

- **Line 12**: We use the `day` object, which passes the input value to `ref` using placeholders or `{{}}`.

- **Line 13**: We use the `computed()` method. The **`computed()` method** is a new method introduced in Vue 3, which we can use to implement logic in our `setup()` function. Notice that we use `day.value`. This is because `day` has a type of `ref`, whereas in the `<template>` tag, the internal value is directly accessible.

How to implement the Composition API in Vue3

Vue 3's Composition API offers flexibility, integrates TypeScript, and simplifies code structure using the setup() function and methods like ref and computed.

How to implement the Composition API in Vue3

Overview

Composition API

Installation

Code

Code explanation