Introduction

Prerequisite is basic knowledge of HTML, CSS, js ES6, and Vuejs

Project Setup

• Prerequisite are Git, Nodejs
• Clone the project at https://github.com/netlify/explorers-composition-api

What is a Composition API?

Need is to share and write more flexible API in Vue.js => The Composition API is another way to build Vue.js apps and organize your code.

Options API is split in 3 sections, data, computed, and methods trade-off:

• more verbose and less structure
• more js knowledge needed
• deeper understanding of Vue.js is required to use it
• architecture decisions are up to you

Setup method with props and ctx variable ctx is composed with attrs, slots and emit

2 part of the method

1. data and computation part
2. return part

Reactive Data

Use helper method

• ref method will make a property being tracked by Vue.js
• use the prop.value to access the value
• reactive method to declare props inside a const state and use state.count to access value
• use the toRefs method to destructure the state in the return part ( ...state) to access directly to the const in the template

pair programming challenge

Computed Properties

use computed method to return the computed property

pair programming challenge

Methods

every method become a const arrow function and need to be added to the return block

pair programming challenge

Lifecycle Hooks

mounted become onMounted with a callback function and set the value of state.count

Watch

with reactive state

• for a value :: watch(() => state.count, ...
• for a list :: watch(() => [..state.list], ...

with a ref

• for a value :: watch(() =>count, …
• for a list :: watch(() => [...list.value], …

pair programming challenge

Next steps

don’t rewrite all the API choose when use one and the other

for more practice complete the meteor challenge branch fix broken tasks which are commented in components reconfigure the entire app to use Composition API

and deploy it on netlify with “npm run build” command and “dist” for Publish directory

• https://github.com/leopaul29/explorers-composition-api
• https://goofy-babbage-a60ee3.netlify.app/