Open In App

Vue.js Composition API with Templates

Improve
Improve
Like Article
Like
Save
Share
Report

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.

The Composition API allows author to Vue components using imported functions rather than declarative functions. Composition API allows us to write clean, logical, and efficient code. The composition API also has better minification in the build process compared to the options API with equivalent code. The composition API also benefits the type of variables used, due to the simplicity of the functions and their structure of it.

In the Composition API with Templates, we declare the variables and functions inside the script setup tag and access them in the template tag in the composition API.

Syntax: We need to declare the functions and the variables inside the script tag which we can later access in the template.

<script setup>
    // Functions and variables
</script>

<template>
  <!--  Vue Components -->
  <p>Welcome to GeeksforGeeks</p>
</template>

Example: In the following example, we have a button and a paragraph element. When the button is pressed, the text is toggled inside the paragraph element with values present in the data array variable.

Step 1: Create a new Vue.js project using the npm node.js package manager.

npm init vue@latest

Enter the project name and preset the project as follows:

 

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: Inside the App.vue file, create the script element with the setup tag to tell Vue.js that it is a composition API. Here we will mention the data array and a current variable. Also, declare the toggleText function which will update the current value.

App.vue




<script setup>
  import { ref } from "vue";
  const current = ref(0);
  const data = ["Data Structures",
                  "Algorithms",
                  "Web Development"];
  
  function toggleText() {
    current.value = (current.value + 1) % 3;
  }
</script>


Step 3: Now, in the template section, add a button and a paragraph element. In the click function of the button, call the function declared to toggle text and declare the value in a paragraph element.

App.vue




<template>
  <center>
    <h1 style="text-align: center;
        color: green">
        GeeksforGeeks
     </h1>
    <strong>
        Vue.js Composition API with Templates
       </strong>
    <br />
  </center>
  <center>
      
<p>Welcome to GeeksforGeeks</p>
  
    <button @click="toggleText">Toggle Text</button>
    <p>New tutorial is: {{ data[current] }}</p>
  </center>
</template>


Complete Code:

App.vue




<script setup>
  import { ref } from "vue";
  const current = ref(0);
  const data = ["Data Structures",
                "Algorithms",
                "Web Development"];
  
  function toggleText() {
    current.value = (current.value + 1) % 3;
  }
</script>
  
<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
        GeeksforGeeks
    </h1>
    <strong>
        Vue.js Composition API with Templates
    </strong>
    <br />
  </center>
  <center>
    <p>Welcome to GeeksforGeeks</p>
    <button @click="toggleText">Toggle Text</button>
    <p>New tutorial is: {{ data[current] }}</p>
  </center>
</template>


Step 4: Run the project using the following command and see the output.

npm run dev

Output: It will run the project on http://localhost:3000/ and the result will be as follows.

 

Reference: https://vuejs.org/guide/introduction.html#composition-api



Last Updated : 08 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads