Vuetify Tutorial #23 - Popups (dialogs)

Hey gang, in this video we'll talk about popups / modals / dialogs (many different terms for the same thing)! We'll eventually be using the dialog to create a form for adding new projects.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[pavleciric]

updated Popup.vue component:
<template>
<div class="text-center">
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn class="success" dark v-on="on">Add New Project</v-btn>
</template>
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>Add a New Project</v-card-title>
</v-card>
</v-dialog>
</div>
</template>

[elmomahupil]

This is very cool feature. Thankyou Sensei :>
Btw, this is the updated syntax from the documentation
<v-dialog max-width="600px">


    </template>
    <v-card>
      <v-card-title>

      </v-card-title>
    </v-card>
  </v-dialog>

[lazarkaljevic]

Hours of fun indeed :) Not just modal but whole tutorial, thank you again.

[karo_mucha]

I love your courses! Keep it going! :)

[juanpablorodriguezavalos]

man i love your videos, your way to explain is very clean... u are the best vuetify teacher ;') <3

[siddheshkhandare]

Thank you for giving Idea and knowledge I am from India 🇮🇳🇮🇳🇮🇳

[gururajmoger]

Nice tips... please explain how to pass the values from one component to other..
Eg. Common search in header..will handle other components data table to filterable..

[PlantyJess]

Here's the updated version:

<template>
    <div>

            <v-card>



            </v-card>
        </v-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialog: false,
        }
    }
}
</script>

differences:
- the v-btn comes before the v-dialog
- bind the event @click.stop="dialog = true" to the v-btn, add v-model="dialog" to the v-dialog, and add "dialog: false" as data in the script

[raulcanocorbera]

Thanks you for video tutorial, very good job.

[ig]

Hi! Friend The Net Ninja, let me congratulate you on your fantastic tutorials, the truth is they are very easy and well explained, the truth is they are very good contributions. I am from Venezuela and I understand little English and even then it is very easy with your explanation to understand them. Thanks friend. I have a question for you, which template you use to generate that structure with vue-cli, I'm currently using vuetify-ssr to use with node server. Thank you!

[rahulpatil]

your all vedios are exellent... plese make big project with propper database..using groovy language..

[Munib-xrpd]

was having some trouble aligning them in center, but found a way to do it
posting it here for anyone having the same issue


<v-row class="flex-column align-center">
<v-row class="mt-9 flex-column">
<v-avatar size="100">
<img src="/avatar-1.png" />
</v-avatar>
<p class="white--text subtitle-1 mt-1">The Net Ninja</p>
</v-row>
<v-row class="mt-5 mb-5">
<Popup />
</v-row>
</v-row>

[smartoneinok]

Code for Popup.vue with latest version of Vuetify:


<template>
<v-dialog max-width="600px">
<template v-slot:activator="{on}">
<v-btn text class="success" v-on="on">
Add New Project
</v-btn>
</template>
<v-card>
<v-card-title>
<h2>Add a New Project</h2>
</v-card-title>
</v-card>
</v-dialog>
</template>

[ilikeit]

I am fan here, and I like your tutorial, and I would like you create video tutorial about NodeJs, Mongodb and react from step by step

[ericderace]

What if I want to re-use this dialog component in multiple places, but with different button text for each instance? (Add New Project) Can I activate this dialog another way?

[MassimilianoBariola]

I had quite a hard time aligning avatar, its text and the button for popup. In the end, this seemed to work, maybe overkill






          </v-avatar>
        </v-col>
      </v-row>



        </v-col>
      </v-row>


            <Popup />
        </v-col>
      </v-row>
        <v-list>

[ImMarkV]

Hi ninja I have a problem on my UI
i have 2 v-dialog and trigger them using v-model but when i open the first v-dialog using the trigger the second v-dialog opens too and overlaps the 1st one, I fixed that problem already by replacing the v-model name but the next problem is the close button inside the dialogs are not working anymore.

<v-btn color="red darken-1" text @click="dialog = false" class="float-right">X Closse</v-btn>

this is my code on close buttons please badly need help :(

[ugorjichukwudi]

Great lessons thus far, however, i have a little challenge. I created a popup as a component which will be reusable at different places but it can't seem to open when i click on it. I used vuex to map the state of the v-dialog, even when to try vuex-map-fields still no head way. Any help?

[naveeed_]

Hi! Can I open a v-dialog at a custom location, on screen?

[roronoa_d_law]

I can't understand what slot=activator does
What is slot anyway