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

preview_player
Показать описание
In this video we build out a dynamic & reusable modal component using vue 3. We create this using the composition api, slots & props.
-----------------------------------------------------------------------------------------------------
Join my channel to support me to continue doing what I love!
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
Helpful Reference's:
-----------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
Timestamps:
0:00 Introduction
1:17 Project Setup
9:12 Create Modal Component (Markup/HTML)
12:57 Import/Use Modal Component
15:51 Toggle Modal Open/Close
17:44 Create Emit/Event With Composition API
20:05 Modal Styling
27:16 Animating Modal With Vue Enter & Leave Transitions
-------------------------------------------------------------------------------------------------------
#vue #vue3 #vue3compositionapi #slots #props
Current Subscribers: 2,470
Рекомендации по теме
Комментарии
Автор

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

hafizjavaid
Автор

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 <script setup> tag! Please keep teaching.

AnthonyJackman
Автор

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

christopherokonkwo
Автор

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

quocbao
Автор

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

frankkevy
Автор

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

cjmaaz
Автор

Awesome video John. Very informative as always!

luukwagenaar
Автор

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

softblood
Автор

Works very well, thank you very much!

detresoltesz
Автор

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

Deniafe
Автор

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?

nishantsethi
Автор

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!

ajjordi
Автор

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

sanghoonkim
Автор

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

mounir
Автор

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

veerendrasingh
Автор

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 <<bluish>> ). As a result i cant reuse the child component.
Can someone help me plz

dimjohn
Автор

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?

michal_stachura
Автор

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?

gameeiei
Автор

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.

smgsmg
Автор

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

mahabubulhasan