Vuetify v-dialog not showing, no errors

Question

I'm trying to implement a simple dialog to my Vue.js frontend with Vuetify. The v-dialog component is not working properly, when activated with v-model="dialog" set to true, the screen goes darker like it should but the dialog inside is not showing, you can see here: https://imgur.com/K977VoS

The code is simply copied from here: https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/dialogs/usage.vue only added into template.

It's a Laravel project with Vue.js as frontend with vuetify. I have implemented fully functional vuetify calendar and everything is working great but this. I want to add a new event with dialog and get same darker page.

My vuetify.js config:

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
import "vuetify/dist/vuetify.min.css";
import cs from 'vuetify/es5/locale/cs'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'

const opts = { lang: {
    locales: { cs },
    current: 'cs',
    iconfont: 'mdi'
  },}

export default new Vuetify(opts)

My app.js main file:

require("./bootstrap");
window.Vue = require("vue");

import Vuetify from "../plugins/vuetify";

//...

const app = new Vue({
    store: store,
    el: "#app",
    vuetify: Vuetify
});

Like I said, the code is copied from the official vuetify, but I added a jsfiddle: jsfiddle.net/dbL4aqse — IamQwasyx0_

lijiedong lijiedong · Accepted Answer · 2021-01-10T09:29:01

I meet the same question like you, but my problem is because I set the v-dialog v-model='true':

v-model's value can be set to true from the start. This is helpful when globally registering components in Vue that are strictly for Dialog purposes. When a calling component activates the registered dialog component, I expect the dialog's v-model to be true from the start.

Source

I don't know whether this is helpful，but it solve my problem。

Vuetify v-dialog not showing, no errors

1 Answers