Archive search

Find the stories you need

composition-api

Show / hide password input values with Vue.js 3 and the Composition API

It's common to have the possibility to toggle the visibility of a password field on websites, applications etc. Implementing such a functionality with Vue.js 3 and the Composition API is simple and straight forward.

Vue 3 Composition API: ref() vs. reactive()

Learn when to use ref() and when to use reactive() and why you should consider always using ref() instead of reactive().

Write Vue like you write React

A short article that showcases how Vue with Composition-API and JSX compares to React with hooks. If you have some React friends that are big fans of React hooks that you want to convince to give Vue a try, you might show them this!

Learn Vue.js 3.0 With Tailwind CSS And Composition API in 2021 - Create A Pokémon app For Beginners

If you still feel overwhelmed at the thought of using the Composition API in your Vue apps, here is a pretty straight-forward introduction to it, along with Tailwind CSS.

Invalidating Computed with The Composition API

There are cases where you want to invalidate a computed prop you created and re-evaluate its value, this happens often if the computed prop uses non-reactive parts.

Caching Vue Refs

Introducing self-managed-caching on server-side and client-side has a lot of benefits and can help you out when you need atomic control over your data.

Automatic Dependency Injection in Vue with Context Providers

Learn how to implement Automatic Dependency Injection in Vue.js with the Context Provider Pattern.

Non-reactive Objects in Vue Composition API

Exploring scenarios where you don't actually need Vue's reactivity, and why you should use the composition API to opt in when needed.

Group, Extract, Share: Working with the Vue Composition API

The Vue 3 Composition API enables us to extract and share stateful logic between components. In this article, we learn how to extract and share logic to build flexible components with the Vue 3 Composition API.

Building a data layer with Vue and Composition API

An interesting article that explains how to build the data-layer for your Vue applications using the Vue Composition-API.

Nuxt Composition API

Learn which challenges the Composition API brought to Nuxt.js, and which posibilities we got when the Nuxt team released the powerful @nuxtjs/composition-api module.

Watch with @vue/reactivity

A brief intro to how the Vue reactivity system works and a guide to implementing the (missing) watch on your own.

@vuelidate/core@2.0.0-alpha Released!

New Vuelidate version is here supporting both Vue 3.0 and Vue 2.x (with the Composition-API plugin). Although the docs are still in progress you can already get a good glimpse of how to use it and some brand new features like the support for nested validations. Take it for a spin!

Handling Asynchrony in Vue 3 / Composition API — Part 1: Managing Async state

Composition API makes a lot of things easier but it also brings some challenges as some things need to be rethought regarding how they fit into this new concept and it might take some time before the best practices are established. I'll try to shed some light on possible options.

Build better higher-order components with Vue 3

Learn how to leverage the composition API to build better higher order components in Vue 3

Vue.js 3.0 Docs: Beta Version

The new docs have been released! Get yourself ready for the Vue version. And if you are an early adopter of Vue 3.0 beta, your struggles (no-docs) have come to an end!

Context and Provider Pattern with the Vue 3 Composition API

Learn how to use the Vue 3 Composition API to replicate the React Context and Provider API.

The process: Making Vue 3 – Increment: Frontend

Would you like to learn more about the decision making and the development process of the upcoming Vue v3.0? Here are the lessons learned from rewriting the next major version of Vue.js, written by Evan You.

Release v0.6.0 · vuejs/composition-api

The new version of the composition-api plugin introduces some breaking changes that align the plugin with the current state of Vue 3.0 implementation.

Stale-While-Revalidate Data Fetching Composable with Vue 3 Composition API

When building apps that rely on data from an API, two things are essential: we want our data to be fresh, and we want it fast. The stale-while-revalidate caching pattern helps us to strike a balance between both.

Learn how to use the Vue 3 Composition API to build a data fetching composable implementing the stale-while-revalidate pattern.

State Management with Composition API

The Composition API (and other Vue 3 APIs) simplifies a lot when it comes to state management. Learn how the Composition API has changed the way I manage my application state.

The case for HOC vs The Composition API

In this article Abdelrahman compares Higher-Order Components (using scoped-slots) with the upcoming Composition API. I especially enjoyed the Vee-Validate v4 comparison. Check it out!

Vue 3 Composition API with Filip Rakowski

The Composition API is coming to Vue 3 - but some companies, such as VueStorefront, have been using it for a while with the Vue 2 Composition API plugin. Filip Rakowski, co-founder of VueStorefront, is here to explain the Composition API and how they’ve used it in the next version of their e-commerce framework.

Vue.js 3 Course - Composition API, TypeScript, Testing

Vue.js 3 introduces some changes to the Async Component API - find out the changes, and how you can use Async Components with Webpack 5's bundle splitting to make your apps load faster than ever.

How the Vue Composition API Replaces Vue Mixins

Looking to share code between your Vue components? If you’re familiar with Vue 2, you’ve probably used a mixin for this purpose. But the new Composition API, which is available now as a plugin for Vue 2 and an upcoming feature of Vue 3, provides a much better solution.

Release v0.5.0 · vuejs/composition-api · GitHub

Along with several smaller fixes the new version of the composition-api plugin comes with watchEffect – a way to re-run functions when it’s dependencies change.

Vue 3 Reactivity - Learn Composition Functions API

Another great article on the upcoming Composition API, this time touching on how it might affect building animated interfaces. Check it out!

When To Use The New Vue Composition API (And When Not To)

The new Vue 3 composition API was created to address scaling issues with the options API. But is it still useful in smaller apps?

#31: Create a i18n Plugin with Composition API in Vue.js 3

A example on how to use the inject and provide functions to create a i18n plugin using Composition API in Vue.js 3.

Vue.js 3 Course - Composition API, TypeScript, Testing

Vue.js 3 gives us two new tools - the Composition API and first class TypeScript support. In this screencast, we refactor the News component, which is written in JavaScript and the Options API, to TypeScript and the Composition API. We see and discuss the trade-offs, and try to decide which language and tool is more appropriate for the job.

Data Fetching Using Vue Hooks

Composition API (sometimes referred to as "hooks," though we'd discourage using this name to avoid any confusion with Instance Lifecycle Hooks) is certainly one of the most anticipated new feature in Vue 3, if not the most anticipated itself. In this article, Darren takes the most commonly-seen feature of a web app – fetching data – and shows us how it can be written with composition API, additionally with the use of swrw.

Announcing Villus - A tiny and fast GraphQL Client for Vue.js

Interested in using GraphQL but without all the bells and whistles that come with Apollo? Well, Abdelrahman Awad got you covered! He just created a 3kb minimalistic GraphQL client with some staple features like reactive queries. It also makes use of the upcoming Composition API.

#30: Access template refs in Composition API in Vue.js 3

Quick tip on how to access the old this.$refs by using ref() in the new Composition API in Vue.js 3 components.

#29 Use old instance properties in Composition API in Vue.js 3

Learn how to use this.$emit, this.$attrs and more in the new Composition API, where you have no this (component instance) in your Vue.js Components.

#28 Easily switch to Composition API in Vue.js 3

A step by step guide on how to migrate a Vue.js component from the traditional Object API to the modern Composition API, easy and in a cheatsheet format.

React developers will love the Vue Composition API

An interesting article on the Vue Composition API from the perspective of a React developer. It talks a bit about the differences with React Hooks and walks through a refactor process from the options-based API.

An Early Look at the Vue 3 Composition API in the Wild

Here’s another great article on the Composition API that goes beyond basic examples and instead refactors a rather big component coming from a real project. It really highlights one of the biggest benefits of the new API – a clean way to separate different functionalities of a component and allowing for sharing those with other components.

Hello Vue 3: A First Look at Vue 3 & the Composition API

In this video tutorial, Dan Vega is building two versions of a small application – one with Vue 2.x and the other one with the alpha build of Vue 3.0, using the Composition API.

ReactiveConf 2019 – Karol Fabjanczuk's Lightning Talk

Karol Fabjanczuk's lightning talk on Vue 3's upcoming Composition API.

Build a movie search app using the Vue Composition API

Here’s another tutorial on how you will be able to use the Composition API. Here, Gábor Soós builds a simple movie search app.

Vue.js Composition API Starter Guide with examples

In this video tutorial Erik Hanchett first builds an app using the current, options-based API and then refactors it to show how it would look like when built with Composition API. Good watch!

Thought on Vue 3 Composition API - `reactive()` considered harmful

The new Composition API introduces two ways to declare reactive data, either using reactive or ref. Both of those have their own quirks and in this article Jason Yu goes through how both of those work and why he thinks ref is a better way to work with reactive data.