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.
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.
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.
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.