joe

joe, 6 months ago to ChatGPT

Last time, we went over what the Composition API is and why it is better than the Options API in Vue. This time, I wanted to explore the subject a little more. Let’s start with an array of 30 3-ingredient cocktails that I had ChatGPT generate. Each cocktail has a name, ingredients list, preparation instructions, and a list of characteristics. Let’s see what we can do with this.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

In this simple app, we declare the list of cocktails as const cocktails = ref([]) and then we use the onMounted(() => {} lifecycle hook to populate it with delicious cocktails. Lifecycle hooks allow developers to perform actions at various stages in the life of a Vue component.

So, it works fine with one set of 30 3-ingredient recipes but what if we want to use 2280 recipes, split evenly over simple, intermediate, and advanced difficulty levels? I created a “Bartender” app to explore that and I put the code for it up on GitHub. Like last time, I asked ChatGPT to generate unique recipes but this time, I asked it to generate 760 simple recipes, 760 intermediate recipes, and 760 advanced recipes. Those JSON files are then imported into a composable. You will also notice that ChatGPT‘s definition of “unique” is pretty questionable.

If you check out /components/CocktailList.vue, you can see how the /composables/useCocktails.js composable is used.

A “composable” is a function that leverages Vue’s Composition API to encapsulate and reuse stateful logic. They offer a flexible and efficient way to manage and reuse stateful logic in Vue applications, enhancing code organization and scalability. They are an integral part of the modern Vue.js ecosystem. If you are curious about what the Vue 2 analog is, it would be mixins.

Have a question or comment? Feel free to drop a comment.

https://staging-07b6-blogjwsjoesteinbringsthoughtsoncodingtravelandlife.wpcomstaging.com/2023/playing-with-vue-3-and-the-composables/

#ChatGPT #Composables #CompositionAPI #LLM #VueJs

joe, 6 months ago to AdobePhotoshop

This past month, I visited the local Hack & Tell to write a web app that uses Vue.js‘s Composition API. I have written 41 posts involving Vue on this blog but the Composition API is new here. If you are the “eat your dessert first” type, you can check out the result at https://joes-job-tracker.web.app. I want to spend this article reviewing the composition API, though.

Let me start by explaining what the Composition API is. The Composition API is a collection of APIs that enable the creation of Vue components by utilizing imported functions, as opposed to the traditional method of declaring options. This term encompasses the Reactivity API, Lifecycle Hooks, and Dependency Injection. The Composition API is an integrated feature within both Vue 3 and Vue 2.7. It is a bit of a departure from the traditional Vue 2 way of writing code but Vue 2 applications can use the officially maintained @vue/composition-api plugin.

So, what do the differences actually look like? Let’s take a look at the example of an app that tracks the location of the user’s mouse cursor. The first version uses the Vue 2 method where you declare options and the second version does the same thing but uses imported functions.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

So, what are the differences between the two? Let’s compare and contrast.

Vue 2

Composition API

new Vue({ el: '#app', data: { mouseX: 0, mouseY: 0, }, methods: { trackMouse(event) { this.mouseX = event.clientX; this.mouseY = event.clientY; }, }, mounted() { // Attach an event listener to track mouse movement window.addEventListener('mousemove', this.trackMouse); }, beforeDestroy() { // Clean up the event listener to prevent memory leaks window.removeEventListener('mousemove', this.trackMouse); }, });

import { createApp, ref, onMounted, onBeforeUnmount } from 'vue'``createApp({ setup() { const mouseX = ref(0); const mouseY = ref(0); const trackMouse = (event) => { mouseX.value = event.clientX; mouseY.value = event.clientY; }; onMounted(() => { window.addEventListener('mousemove', trackMouse); }); onBeforeUnmount(() => { window.removeEventListener('mousemove', trackMouse); }); return { mouseX, mouseY, }; }, }).mount('#app')

In the Vue 3 Composition API version, the setup function is used to defines the component’s logic, and it uses reactive references (ref) to manage the state. Event handling is encapsulated within the onMounted and onBeforeUnmount lifecycle hooks. Vue 3 promotes a more modular and declarative approach. In the Vue 2 version, the code uses the Options API with a more traditional structure, relying on data, methods, and lifecycle hooks like mounted and beforeDestroy. Vue 3’s Composition API simplifies the code structure and encourages better organization and reusability of logic.

If you are anything like me, your first question is what reactive references are. Vue 2 doesn’t have a built-in equivalent to the ref and reactive features found in Vue 3. When you use a ref in a template, modifying its value triggers Vue’s automatic detection of the change, leading to a corresponding update of the DOM. This is made possible with a dependency-tracking based reactivity system. During the initial rendering of a component, Vue meticulously monitors and records every ref used in the process. Subsequently, when a ref undergoes a mutation, it initiates a re-render for the components that are observing it.

Here are the Vue 2 and the Composition API versions of the same application:

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

Vue 3’s reactivity system is more efficient and performs better than Vue 2. This can result in better overall performance, especially in applications with complex reactivity requirements. It also reduces the use of magic keywords like this, which can be a source of confusion in Vue 2.

Here are the two versions, side by side:

VUE 2	COMPOSITION API
new Vue({ el: ‘#app’, data: { myValue: 42, }, methods: { updateMyValue() { this.myValue = 69; // Update the value }, }, });	import { createApp, ref, onMounted } from ‘vue’;const app = createApp({ setup() { const myValue = ref(42); const updateMyValue = () => { myValue.value = 69; // Update the value }; return { myValue, updateMyValue }; } }); app.mount(‘#app’);

Another thing that the Composition API brings to the table is composables. Vue composables are special functions that leverage the Composition API to create reactive and reusable logic. They serve as external functions, abstracting reactive states and functionalities for use in multiple components. These composables, also known as composition functions, streamline the process of sharing logic across different parts of an application.

In functionality, composables are akin to Vue 2’s mixins found in the Options API and resemble the concept of Hooks in React.

I am going to wait for a future post to cover composables, though.

https://staging-07b6-blogjwsjoesteinbringsthoughtsoncodingtravelandlife.wpcomstaging.com/2023/learning-the-composition-api/

#Composables #CompositionAPI #Firebase #Hackathon #VueJs