Introduction
Imagine your plan for the day is buying a pair of shoes and a dress, watching a movie, and having food. Now, we can go about this plan in two ways. The first way is to visit the shoe store, then the dress showroom, go to a theatre to watch the movie, and finally visit a restaurant to eat food. In this way, our day is divided into small tasks, and there are different places where each task will be performed. It sounds like too much work, right? This way is like the options API in Vue.js, where you partition your code and put it under different component options. The second way is to just go to a mall where everything is in the same place, just like the setup function of composition API in Vue.js! If you are wondering how then you have come to the right place! Let’s dive into the topic of Composition API Setup.
What is setup? Why do we need it?
In the options API in Vue, we have different component options that would divide our code logic into bits and pieces. Let’s see an example of options API through code.
Create a vue App using the following command in the terminal:
vue create setup-demo |
Change directory (cd) to the setup-demo and start the App at localhost:8080 using the following command:
npm run serve |
Delete the HelloWorld.vue file and make OptionsAPIDemo.vue, CompositionAPIDemo.vue, PropsDemo.vue, ContextAttrs.vue, ContextEmit.vue, and ContextSlots.vue inside the components folder so that your file structure looks like this:
OptionsAPIDemo.vue
We see in the code below that we have divided our code for displaying a message into many component options. For instance,
- The props that are passed as attributes from the parent component to the child component will come under the props.
- The property we will work on (the message) is put in the data option.
- The three methods: Joke(), Question(), Fact() are under the methods option.
- The watch option will look for any changes in the message and log it onto the console.
- We have a separate option to compute the message with four more exclamatory marks at the end of the it.
- We have a different option for the console.log statement when the component is mounted.
<template> <div id="options-api-div"> <h2>This is the demo of options API</h2> <h4>{{message}}</h4> <h4>{{longerMessage}}</h4> <h4></h4> <button @click="Joke()">Tell me a joke</button> <button @click="Question()">Ask me a question</button> <button @click="Fact()">Tell me a fact</button> </div> </template> <script> export default{ name:"OptionsAPIDemo", props:["content"], data(){ return { message:this.content, } }, methods:{ Joke(){ this.message="Q. What is the object oriented way to become wealthy? Ans. Inheritance!" }, Question(){ this.message="Q. Why use setup() in Vue?" }, Fact(){ this.message="NASA still operates some projects on programming from the 1970’s" } }, watch:{ message:function (newMessage) { console.log(newMessage); } }, computed:{ longerMessage:function () { return this.message+"!!!!" } }, mounted:function () { console.log("OptionsAPIDemo component mounted"); } } </script> <style> #options-api-div{ border-radius: 30px; padding:30px; margin:40px; background-color: pink; color:rgb(219, 84, 106); box-shadow:5px 5px 5px rgb(170, 170, 170); } </style> |
However, in real life, the programs won’t be so simple. In the example above, the code wants to display some messages depending on the button clicked. Partitioning a huge code into several options would be tedious. Using Options API reduces the readability of large programs and makes them difficult to maintain. To overcome this problem, the composition API introduced a function called setup. With the setup function, the code can now be organized by logical concerns. Let us have a look at this with an example:
CompositionAPIDemo.vue
<template> <div id="composition-api-div"> <h2>This is the demo of composition API</h2> <h4>{{message}}</h4> <h4>{{longerMessage}}</h4> <h4></h4> <button @click="Joke()">Tell me a joke</button> <button @click="Question()">Ask me a question</button> <button @click="Fact()">Tell me a fact</button> </div> </template> <script> import { ref, onMounted, computed, watch } from "vue"; export default{ props:["content"], setup(props){ const message=ref(props.content) function Joke(){ message.value="Q. What is the object oriented way to become wealthy? Ans. Inheritance!" } function Question(){ message.value="Q. Why use setup() in Vue?" } function Fact(){ message.value="NASA still operates some projects on programming from the 1970’s" } const longerMessage = computed(function(){return message.value+"!!!!"}); watch(message,function(newMessage){ console.log(newMessage); }) onMounted(function(){console.log("CompositionAPIDemo Mounted")}) return{message,longerMessage,Joke,Question,Fact} } } </script> <style> #composition-api-div{ border-radius: 30px; padding:30px; margin:40px; background-color: rgb(192, 255, 236); color:rgb(84, 199, 219); box-shadow:5px 5px 5px rgb(170, 170, 170); } </style> |
The setup method is executed before the CompositionAPIDemo component is created and once the props are resolved. Setup() returns an object with all of its properties which the component can use. As you can see, the setup function has composition functions within it. Let us complete the rest of the code and see the results.
App.vue
<template> <div> <h1>Setup</h1> <OptionsAPIDemo content="This is the content of OptionsAPIDemo"/> <CompositionAPIDemo content="This is the content of CompositionAPIDemo"/> </div> </template> <script> import OptionsAPIDemo from "./components/OptionsAPIDemo.vue" import CompositionAPIDemo from "./components/CompositionAPIDemo.vue" export default { name: 'App', components: { OptionsAPIDemo, CompositionAPIDemo } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; } button{ border-radius: 5px; background-color:rgb(255, 98, 125); color:white; font-size:15px; box-shadow: 5px 5px 15px grey; border:none; padding:15px; margin:10px; } button:hover{ box-shadow: none; } </style> |
localhost:8080
When we click on the Tell me a joke button:
When we click on the Ask me a question button:
When we click on the Tell me a fact button:
Console: