Thanks for the video. Subscribed. I saw your other videos about Firebase and AWS Amplify. Just some ideas for next videos: 1. Vue Ionic + Firebase chat/something with full Firebase Auth. 2. Vue Ionic + AWS Amplify Datastore offline first app.
Diligent Dev that’s a great idea, using firebase could be a plus, I am learning a lot from your videos, I will be able to apply what I learning in my personal projects. Ionic\vue is the best thing it has happened to VueJS for mobile
It's not a good idea to use vue 3 composition api! even though it new feature..I think it's going to kill the simplicity of vue. By away thank you for your effort.
That's debatable. The reason they introduced this was so you can organize your code the way you want. I personally like to keep similar variables/functionality close to each other. With that said, if you don't componentize your app, you will end up with unmaintainable files. Furthermore, I would recommend devs use mixins (v3.vuejs.org/guide/mixins.html) for code reuse. In future videos in this series, I'll be refactoring a lot. So, stay tuned.
@@LaurensiusAdiKun In my opinion, it’s one way to make your code more maintainable. Vue files can grow very quickly if you try to jam a lot into one component. You can also get a lot better code reuse if you use smaller components. Hence less code to maintain. I like the composition API because I can organize my code the way I want. I can group similar functionality. But, in the end, it’s up to the developers preference.
Instead of repeating each item in the template this what I did for managing it dynamically in the template: const fetchRandomCocktail = async (dispLoaderPage) => { if (dispLoaderPage) { state.loading = true; } const res = await axios.get( "www.thecocktaildb.com/api/json/v1/1/random.php" ); if (res.data) { let data = res.data.drinks[0]; let measureIngredients = []; for (let number = 1; number
Thank you! It was a piece of code I almost instantly regretted publishing 🤦♂️. I am currently working on a refactor. My solution is a little different than yours but I like yours too.
What do you think of the Ionic Framework?
keep it up the great work!
Thank you so very much for this. I have been looking for Ionic and Vue tutorials.
You’re welcome! It’s been awhile since I wrote something in Ionic. I forgot how simple they make it. I’ll make some additional videos on the topic.
Thanks for the video. Subscribed.
I saw your other videos about Firebase and AWS Amplify.
Just some ideas for next videos:
1. Vue Ionic + Firebase chat/something with full Firebase Auth.
2. Vue Ionic + AWS Amplify Datastore offline first app.
Great ideas! I’m putting these on my todo list. I really enjoy Ionic so these may be my next videos.
This was excellent. Thank you
Thanks a lot. Please do more videos that combine those two powerful libraries! VUE+IONIC
BTW, you could simply resolve the copy-paste part with this:
{{state.randomCocktail['strMeasure'+num]}} --
{{state.randomCocktail['strIngredient'+num]}}
Youre welcome! I’m working on another series now. For the loop, I discuss this in the refactor video later, but thank you for the suggestion.
THIS IS SOOOO COOOLLLL!!
Yes please do a whole tutorial course there are no courses available in ionic vue 3
I’ve got some more videos on Ionic with Vue in my ToDo list.
thank you for ionic tutorial with ionic
Thanks you so much for this amazing content, please continue with this kind of tutorials, I would like to see some capacitor plugins with ionic/vue
Glad you are enjoying the videos! I plan on doing a more in-depth tutorial on it. Maybe something like an Instagram clone or something like that.
Diligent Dev that’s a great idea, using firebase could be a plus, I am learning a lot from your videos, I will be able to apply what I learning in my personal projects. Ionic\vue is the best thing it has happened to VueJS for mobile
Thanks for the tutorial. But you could use v-for="index in 15" instead of copy-pasting 15 times. Like this you're not repeating yourself (DRY)
Yes, I did address this in the refactor video (pt. 4)
For those copy paste on ingredients, you can try this instead:
{{ state.randomCocktail[`strMeasure${n}`] }} -
{{ state.randomCocktail[`strIngredient${n}`] }}
That’s really good logic. I didn’t even think about that. I’ll put it in my refactor video.
It's not a good idea to use vue 3 composition api! even though it new feature..I think it's going to kill the simplicity of vue. By away thank you for your effort.
That's debatable. The reason they introduced this was so you can organize your code the way you want. I personally like to keep similar variables/functionality close to each other. With that said, if you don't componentize your app, you will end up with unmaintainable files. Furthermore, I would recommend devs use mixins (v3.vuejs.org/guide/mixins.html) for code reuse. In future videos in this series, I'll be refactoring a lot. So, stay tuned.
@@DiligentDev That's why we make smaller components? So it's more maintainable. Still in Vue 2 for simplicity for now.
@@LaurensiusAdiKun In my opinion, it’s one way to make your code more maintainable. Vue files can grow very quickly if you try to jam a lot into one component. You can also get a lot better code reuse if you use smaller components. Hence less code to maintain.
I like the composition API because I can organize my code the way I want. I can group similar functionality. But, in the end, it’s up to the developers preference.
Instead of repeating each item in the template this what I did for managing it dynamically in the template:
const fetchRandomCocktail = async (dispLoaderPage) => {
if (dispLoaderPage) {
state.loading = true;
}
const res = await axios.get(
"www.thecocktaildb.com/api/json/v1/1/random.php"
);
if (res.data) {
let data = res.data.drinks[0];
let measureIngredients = [];
for (let number = 1; number
Thank you! It was a piece of code I almost instantly regretted publishing 🤦♂️. I am currently working on a refactor. My solution is a little different than yours but I like yours too.