Vue js in Cape Town — Vue Hooks in September

Dominic PrawnStar Bauer
Sep 10 · 3 min read

Okay so I lied it’s not really called Vue hooks — actually its called the Composition API (but we’ll use Vue hooks since it is easier to say).

<👦 Speakers />

Shailen explaining Vue Hooks (Composition API)

<🚀 EventSummary />

The aim of the event was for Shailen to introduce the audience to an RFC project (essentially very experimental and new) — Vue Hooks.

He first introduced stateful and stateless components:

Stateful components have state i.e. can change based on some change in data or event etc…

Stateless components (or more generally known as functional components) don’t have state and thus the component either renders props or always renders the same thing.

These can be used in an options or a class-based component. I will simply provide example from the slides to show the difference (essentially if you’re using classes in Vue you may as well use React).

Example of Options and Class based components

Then it was onto mixins:

“…A mixin is a class containing methods that can be used by other classes without a need to inherit from it. In other words, a mixin provides methods that implement a certain behavior, but we do not use it alone, we use it to add the behavior to other classes.”

An example would be you want to make the same API call and render the info the same way. You create a mixin for this and then simply add the mixin into the component and voila it will make the api call and render the data without the need to rewrite all the code for all the components you need to make API calls for.

The issue with mixins primarily is that it merges the code it contains with the component it is called in. So if I make an API call, using the async data function in Vue, in a mixin and the component I have is also using async data the one will be overwritten and you will have unintended consequences where only one of the API calls works.

In steps Vue hooks. Similar to mixins you can import them to perform some task, however they do not overwrite any existing items in the component. As such they are way more reusable and have a lot less unintended side effects.

Here’s a link to the official RFC documentation so you can get a better understanding of what I just said — Vue Hooks

Other than that we polished off Pizza and had some great chats related to various topics. It was quite a blast! :D

Pizza smashed!

<📃 Resources />

<👏 Thanks />

Thanks to Codebridge and OpenUp for allowing us to host the “Vue.js in Cape Town” meetup and thanks to Lumkani for sponsoring the “Vue.js in Cape Town” meetups with snacks, drinks and Pizza (a first for this meetup :) ).

Lumkani seeks to address the challenge of fires in urban informal settlements & townships in South Africa and across the globe. ️A really wonderful startup!

Vue.js in Cape Town

Find out what’s happening at the Vue.js in Cape Town meetup

Dominic PrawnStar Bauer

Written by

Slowly trying to piece the world together one idea at a time :).

Vue.js in Cape Town

Find out what’s happening at the Vue.js in Cape Town meetup