Composition API: a Quick overVue

Rate this content
Bookmark

Composition API is one of the biggest new features in Vue 3. In this talk, I will explain what is it and how to use Composition API for code abstraction and reuse.

Natalia Tepluhina
Natalia Tepluhina
28 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk introduces the composition API in Vue 3 as a better option for composing reusable features compared to mixins and scope slots. It explains how to abstract search functionality using the composition API and demonstrates the creation of searchQuery and searchResultsQuery objects. The Talk also covers running breed search in the mounted hook, sorting results using computed properties, and the benefits of the composition API in terms of code organization and reusability. It concludes by mentioning the upcoming release of Vue 3 and the advantages of the composition API.

Available in Español

1. Introduction to Vue 3 Composition API

Short description:

Today we are going to speak about one important feature of Vue 3, which is a composition API. The new composition API is purely additive, so you won't need to rewrite all your components written with the Options API.

Hi everyone! Today we are going to speak about one important feature of Vue 3 will bring, which is a composition API. But before we start speaking about it, I want to give you an important warning. When we first introduced this new API, we made a huge mistake. We were speaking about deprecating some options from the old API and people understood it slightly differently than we want. You can see some quotes from Reddit saying like, do I need to write all my components to the new syntax? And I want to say, no, please don't be like this. The new composition API is purely additive. You won't need to write all your good components written with Options API to this new syntax.

2. The Need for a New Vue.js API

Short description:

After introducing myself as Natalia, a Vue.js core team member and front-end engineer at GitLab, I explained the need for a new API in Vue.js version 3. Using the example of CatSplorer, an app for searching and sorting cat breeds, I showed how the current code is fragmented and difficult to maintain. I then introduced mixings as a way to compose reusable features, but highlighted their limitations in terms of reusability and customization.

And after this warning, now I'm safe and I can introduce myself. My name is Natalia and I'm Vue.js core team member. I care mostly about Vue documentation. I work as a staff front end engineer at GitLab, and I'm also a Google Developer expert in web technologies.

So why do we need this new API? Is there anything we were really lacking in Vue.js version 2? Let's take a look at this small application. Please meet CatSplorer, an app to search and sort cat breeds. As you can see, we have two features here. First is searching. Second is sorting with different parameters.

In the application code, this will look like this. So, this code belongs to search. We have some part of the reactive state responsible for searching, and we have a method to run this search. And of course we have something for sorting. Again, we have some reactive data, and we have some computed properties to calculate these sorted results.

If we take a look at the component code, we will see how these two features are divided in it. So here is a code that belongs to search, and here is a code for sorting. And as you can see, the logic is pretty much fragmented here. Imagine I'm a developer who needs to fix the search, and I need to follow this logic and I will be jumping from data to method and vice versa. So do we have a way to compose this reusable features and abstract them somehow?

So the first option in the current API are mixings. Mixing is an object that can contain any set of component properties like data methods, computed lifecycle hooks. And when mixing is included into the component, these properties are mixed in with component properties. Sometimes component can override mixing properties if the there is a name collision. Sometimes they are merged together like in the case of lifecycle hooks. But basically you need to understand there's just mixing in properties from mixing to the components. So here is a mixing for the search, and here is a sorting mixing that includes only properties we need for sorting. And if we take a look at this, this is way less fragmented, right? And then we just include this mixing as a component at the bottom. But there are some problems about mixing. First of all, they're not really reusable. If you did pay attention to the search mixing, you saw this access call. So we are not able to customize our search.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.