Build a Reusable Modal Component Using Vue 3, The Composition API & Slots

[@hafizjavaid]

Yesterday, I was thinking where is my favorite KZbinr why he is not uploading new video and here it is Thank you man

[@AnthonyJackman]

You are awesome, @john!! I have looked all throughout github and various tutorials to not reinvent the wheel. No luck. All of the examples were too out of date (vue 2) or were using a css template which muddied the waters. Your video tut was on point! And it did not take me very long to transform it into a vue 3 tag! Please keep teaching.

[@christopherokonkwo]

You saved my day...there's nothing more beautiful than doing for yourself what you would have otherwise done with plugin. This way I caneasily adapt it to my project. Thanks a ton

[@JohnKomarnicki]

That’s awesome, glad to hear this was helpful!

[@cjmaaz]

Thanks for the video John! I suggest you to create shorts of some important part of the video just to please YT algorithm for the reach (in free time, don't overwork).

[@JohnKomarnicki]

I’ll have to consider that! Thank you for the tip!

[@quocbao6046]

Thank you so much for the video. One of my favourite teachers on youtube. Keep up the great work.

[@JohnKomarnicki]

Thank you, Quõc!

[@frankkevy]

It's refreshing to explore a channel with tutorials using the latest versions of frameworks. Tired of Vue 2 tutorials everywhere

[@softblood1941]

I really want to see a full stack graphQL server with Vue and apollo client project and some more real world projects if you have time!!

[@JohnKomarnicki]

Definitely have some more bigger/practical projects coming up soon!

[@nishantsethi6625]

ultimate tutorial, more than I required and best part is explaining the css. I did not know sass but thanks to you, i learnt a little now. but how to close modal if i move cursor outside the modal box?

[@sanghoonkim339]

동영상강의 잘 시청하였습니다. 시간이 되신다면, slot 관련해서 강의를 하나 부탁드립니다. 감사합니다.

[@LoveIyMan]

You are exactly what I want

[@lars-sorensen]

Love your Vue videos!

[@JohnKomarnicki]

Thank you Lars, I appreciate it!

[@luukwagenaar4155]

Awesome video John. Very informative as always!

[@JohnKomarnicki]

Thanks Luuk!

[@agamurat3019]

very well explained, thank you

[@ajjordi96]

Awesome content John! Could you do the same for a responsive navbar? Firebase tutorials are great and not much content on Vue and Firebase around, I think that would be great too! Keep it up!

[@JohnKomarnicki]

I do have a video on a responsive navigation menu using the options API. In the future, I could redo that using the options api! But I do have more videos with vue 3 and fire base coming up soon!

[@Deniafe]

You are awesome. Thanks for all the amazing contents and stunning projects.🤗

[@JohnKomarnicki]

Thank you, much appreciated 😄

[@detresoltesz6112]

Works very well, thank you very much!

[@JohnKomarnicki]

Glad it helped!

[@veerendrasingh4258]

Hey thank you so much, I tried but was not able to understand how to open a modal component from parent component but you literally explained it in a minute. Keep doing good and stay healthy and happy PS: can you make a vue 3 project with script setup tag (composition api) and state management using vuex4 or Pinia whatever you prefer with tailwind it would be awesome

[@JohnKomarnicki]

Glad it could help! I'll have a slightly larger project out soon!

[@DUNIACARA]

Thank you so much.

[@JohnKomarnicki]

Thank you for watching!

[@mounir101]

Thanks. John. I greatly appreciate your efforts. What does router history mode do?

[@JohnKomarnicki]

Thanks mounir! Here is a link to the Vue docs, which would probably do a much better job at explaining it then i could here! router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

[@mounir101]

@@JohnKomarnicki Thanks again. John for the help.

[@rafysancheztilogica8587]

What extensions were you using ?

[@kecoje]

Thanks!

[@frontendtutorials7821]

thank you

[@JohnKomarnicki]

Your welcome!

[@GergelyCsermely]

Thanks

[@michal_stachura]

This is very nice video Jan. I really like it. But two main imperfections can cause problems with this approach... or correct me if i'm wrong :) 1. Modal only emits close action and changing it's visibility is done in parent component. So as I understand, you will have to copy/paste "close" function in every component containing Modal 2. What if one component will have two (or more) different Modals?

[@JohnKomarnicki]

1. Not exactly. The $emit function exists on modal component. Therefore, you'll just need to listen to the emit in the component where you are using that modal component. You would have to have a toggle function in each component you use, which is not uncommon to do. 2. There is a few things you can do here. Here is how i would do this, but there is other ways. You could just simply have two modals, and just created different data values hide/show modal. Such as "modal1" & "modal2", Now with this, you would have two different functions, or create a function that takes an argument to properly show / hide the correct modal. Hopefully that makes sense.

[@dimjohn5878]

when i import the Modal to my parent component, the child component is shown in the script (Modal gets green) and not in the template (Modal is shown as plain text ). As a result i cant reuse the child component. Can someone help me plz

[@smgsmg7116]

Is it worth to learn Vue when I'm changing from backend to full frontend after two years? Not sure If I get a job with that framework, especially in Poland.

[@JohnKomarnicki]

Vue, in my opinion has the easiest learning curve coming from traditional/vanilla js compared to Angular or React. Vue, is certainly at the moment is not as popular as react, but it has been gaining momentum over the past several years. I personally enjoy it a lot, but everyone has different reasons/perspectives to choosing a framework. You'd have to evaluate the current job market within your area, then make your choice!

[@smgsmg7116]

@@JohnKomarnicki Thanks for an answer.

[@mac2431]

i love you

[@gameeiei9842]

Can you make video about reusability composition api ? Ex: we have a form that include 2 fields(all fields are select - option). So, How can I split these 2 fields for reuse?

[@JohnKomarnicki]

Ah like a reusable input component?

[@gameeiei9842]

@@JohnKomarnicki yes, but it has different methods

[@mahabubulhasan7827]

Great content btw, the Github repo link is not working,

[@JohnKomarnicki]

What is wrong with it? I just clicked on it, and it was working for me.

[@JohnKomarnicki]

Sorry, it appears it was on private. It is on public now :)

[@mahabubulhasan7827]

@@JohnKomarnicki thanks 🙏

[@stow1x]

I prefer build modal without boolean v-model

[@JohnKomarnicki]

I’m always up for different approaches, how would you do it?