Problem

After invoking any of $dialog method (notify, confirm), RTL that was set dynamically resets to it's default value.

Steps to reproduce

1. Set vuetify's rtl option as true
2. In mounted of any component set this.$vuetify.rtl to false
3. Open dialog/notification
4. RTL was reseted to true

Sandbox example

https://codesandbox.io/s/nuxtjs-vuetify-qbcrl

Is posible send parameter to dialog componet?

I install it, register and when using it, it gives me this error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at Confirm.vue

Lately I came across a very weird issue when using your dialogs in my Nuxt project. Whenever I invoke a dialog to show up, the page attempts to reload other components, such as vuetify-icons, and it often fails. I'm not sure why this is happening since components are not re-mounted, but it looks like this:
BEFORE:

AFTER:

I had originally figured it would be some artifact from developer environment, but it happens in production as well. I have re-installed vuetify-dialog with latest version and using default settings and this continues to happen on any instance of invoking something to show up, for example:

 showDialog(){
        this.$dialog.notify.success('TEST!',
          {
            position: 'top-middle',
            timeout: 5000
          })

Occasionally the icons return after a moment or two, but sometimes it just stays screwed up like that.
It doesn't affect just icons, as it attempts to reload header scripts like google tag manager, facebook pixel, etc.

Error message on import VuetifyDialog from 'vuetify-dialog';

Could not find a declaration file for module 'vuetify-dialog'. '.../node_modules/vuetify-dialog/dist/vuetify-dialog.cjs.js' implicitly has an 'any' type.

If I add a .d.ts file with "declare module 'vuetify-dialog';" this error goes away. Is this the correct thing to do?

Unfortunately when you prompt second time, the autofocus on v-text-field does not fire.
It can be seen in your demo sendbox.

Is there a way to make it work or maybe manually focus on input after dialog is opened?

Additionally - is there a way to modify prompt buttons style?
They are different from buttons of confirm dialog. Is this is a error or made on purpose?
Thanks!

Hello, I am very interested in seeing the source code for the CodeSandbox demo for the dialogs ("Show card", "Show login" etc) as I want to make a custom dialog with a template and I'm not understanding the documentation. The code for the dialog examples would be extremely helpful but I can't seem to find it anywhere.

This code works, but no show icons and color ##title.

   let res = await this.$dialog.warning({
    title: 'Titulo',
    text: 'Cuerpo',
    persistent: true
  });
  if (res === undefined) {
    this.$dialog.notify.warning("Closed without select action");
  } else {
    this.$dialog.notify.info(`Your choice is ${res}`);
  }

How i can make validate on promt modal?

Don't know if it's possible.

Thank again 👍

Any predefined method to show success message like this.$dialog.success.

Vanilla window.prompt() can receive a second argument, that allows to show default value in the textbox. Is it possible with this component?

Information on the release here: https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0

v-btn

• "round" property changed to "rounded". This is easily fixed.
• "outline" property changed to "outlined". This is easily fixed.
• "flat" property changed to "text". This should be an easy fix, although it may be good to change the existing "text" property to "buttonText", or something similar.

v-dialog

• "lazy" property removed, as all menus and dialogs are lazy by default
• "eager" property added - if you want the dialog to have the old functionality (not lazy), the dialog needs this property.

I may have missed some, but these are the documented changes that immediately jump out as troublemakers.

Other Errors

• There seems to be an issue with the "dark" property. The release notes mention changes to the light/dark theme configuration, but I haven't had much of a chance to look into it.
• Something is going on with reading the property "smAndDown" in the "hideScroll" method.

Hello,

Is there a way to make the dialog persistent like Vuetify does. And in general is it possible to pass options to Vuetify component ?

Thanks

In my Main.ts file I have:

import VuetifyDialog from 'vuetify-dialog';
Vue.use(VuetifyDialog);

And in my App (or any other) component:

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Component
    export default class App extends Vue {
        private SomeFunction() {
            this.$dialog.error({
                  ^^^^^

But get "Property '$dialog' does not exist."

What am I missing to get this property on any Vue instance?

First of all, thank u for providing such a useful library

actions: function() {
        return {
          nextStep: {
            flat: true,
            text: "Next",
            visible: true,
            closable: false,
            handle: () => {
              //how to display another button
            }
          },
	  execute: {
            flat: true,
            text: "Execute",
            visible: false,
	    closable: false,
            handle: () => {
              //do something...
            }
          }
	}
}

Is there a way to make a dialog as an alert, I tried:

 let res = await this.$dialog.confirm({
    text: 'Do you realy want to delete item?',
    title: 'Warning',
    actions: {
      false: 'Ok',
      true: {}
      }
    }
  }

This way false button appears empty

 let res = await this.$dialog.confirm({
    text: 'Do you realy want to delete item?',
    title: 'Warning',
    actions: {
      false: 'Ok',
      true: false
      }
    }
  }

Throw an error.

Extra: Is there an option to align the button (independently will be the best) like left, right, center and/or with margin/padding.

Ps: I use your plugin a lot, thank you for you work 😄

As this issue: https://forum.vuejs.org/t/solved-ie11-script1003-expected-error/29843

My project which uses the Vuetify-dialog can not work in IE, until I remove the Vuetify-dialog module. So I think there may be some compatible issues in this module.

Thanks.

Hello.
Apparently I found a bug, or I don’t understand which parameters should be substituted.

Привет.
Видимо, я нашел баг, или же не понимаю какие параметры стоит подставить

this.$dialog.notify.success('Test notification', {
position: 'bottom-right',
timeout: 5000
})

Good day. Can I use notifications and dialog in modules vuex and files?

import vdialog from 'vuetify-dialog';

axios.interceptors.response.use(response => response, error => {
  const { status } = error.response;

  if (status >= 500) {
    vdialog.notify.error(i18n.t('error_alert_title_server')); //error
  }

  return Promise.reject(error)
});

I will try this awesome plugin but I have errors
first my ide don't find the package

Then, maybe due to the first error

What did I forgot ?

Error dialog seems to have a hard coded title:

Hi @yariksav ! Nice job!

I was wondering if this can be merged on vuetify framework? There are many issues requesting this features.

vuetifyjs/vuetify#3037

Hello! I have a big project. It is not convenient to manually set parameters each time (position, duration, etc.). Can you add the ability to set default parameters when initializing vuetify-dialog?

For example:

import VuetifyDialog from 'vuetify-dialog';

Vue.use(VuetifyDialog, {
    'notify': {
        'timeout': 1000
    },
    'dialog': {
        icon: '',
        actions: ['ОК']
    }
});

"0.3.8, update bili and config" release brakes compatiability with Nuxt.

compiled file is like this;

node_modules/vuetify-dialog/dist/index.js
'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var Vuedl = _interopDefault(require('vuedl/src/index'));
var styleInject = _interopDefault(require('../node_modules/style-inject/dist/style-inject.es.js'));

and occurs Cannot find module '../node_modules/style-inject/dist/style-inject.es.js'
looks like bili 4.8.0 bug in some circumstance.

When running the extension under nuxt I get errors like:

commons.app.js:13184 [Vue warn]: Unknown custom element: <v-snackbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

        this.$dialog.error({
          text: 'Error!',
          title: 'Error'
        })

I want to refresh this page, after close the dialog. So is there any example to do this?

Hi,
I have noticed two problems while using this library with npm and I think they are related:

Versioning Problem

this package version on npm page https://www.npmjs.com/package/vuetify-dialog is 0.3.3

Why I am not able to find this release here on github?

Disappears after update

npm outdated gives this output

Package                         Current  Wanted  Latest  Location
...
vuetify-dialog                   0.1.12  0.1.12   0.3.3  dis
...

and after npm update

Package                         Current  Wanted  Latest  Location
...
vuetify-dialog                  MISSING  0.1.12   0.3.3  dis
...

This behavior was repeated many times. The library is uninstalled after every npm update and I have to install it again.

prompt dialog submit text even canceled,
however close dialog works as expected.

I'm trying to build a dialog that takes a property (in my case a list of pages) then once the user clicks on one option, the dialog will then dispatch an event from the Vuex store and redirect to another page.
The problem is that this.$store and this.$router are visibly undefined when called in the dialog's component (which is structured like TestCard on https://codesandbox.io/s/ppx57r3nnj) so I thought I'll try to emit an event called useTemplate, however having the following doesn't work:

created() {
  this.$on('useTemplate', tmpl => {
    this.$store.dispatch('editPage', tmpl);
    this.$router.push('editor');
  });
}

This doesn't do anything

this.$dialog.show(TemplateSelector, {
  pages: this.pagesToUse,
 '@useTemplate': this.useTemplate //even using 'v-on:useTemplate' does nothing
});

How could I get the parent component to properly receive the event or even better, how could I get the component to have access to the store and router?

is vuetify-dialog@next compatible with nuxt?
What is the configuration to make it go?

hi i got some error like this
[Vue warn]: Unknown custom element:
i have read the closed issue "Unknown custom element"

Vuetify imports by vuetify.js like this

import Vue from 'vue'
import Vuetify from 'vuetify/lib' // <-- this change
import 'vuetify/src/stylus/app.styl'
import VuetifyDialog from 'vuetify-dialog'
Vue.use(Vuetify, {
iconfont: 'md'
})
Vue.use(VuetifyDialog)

but it still got the errors " Unknown custom element: ..."

when i use yariksav/vuetify-confirm , it works fine , without any errors
VuetifyConfirm.js like this

import Vue from 'vue'
import VuetifyConfirm from 'vuetify-confirm'

Vue.use(VuetifyConfirm, {
buttonTrueText: 'Yes',
buttonFalseText: 'Cancel',
width: 350,
property: '$confirm'
})

it works fine!!!!
do i miss something need to config?
any help? thanks

I have setup your module using the NUXT instructions for my project. It builds correctly, but on attempting to render a page I get the following error:

I thought it was an issue with my Node version because of the nature of the error, but It has failed on both 10.0 and 11.6. vuedl is in my node_modules and contains those files.

EDIT: Attempting to load it as a plugin results in the same error, so it seems independent from NUXT.

I am using this package as a nuxt module @nuxt.config.js: modules['vuetify-dialog/nuxt']. Everything works as expected during development, but when you run the build nuxt build -> nuxt start the styles are not pre-loaded. But if I add the vuetify dialog component manually to the component where I have to call a confirmation dialog via this package the styles are fine.

Hello,

You have typo in your sandbox examples

Confirmation : confirmation

 let res = await this.$dialog.warning('Test confirmation, {
    text: 'Test confirmation',
    title: 'Title'
  })

Seems to be

 let res = await this.$dialog.warning( {
    text: 'Test confirmation',
    title: 'Title'
  })

Notification

Missing quotes

Toast

Missing quotes

Unless that it works as expected 😃

This code works, but no show icons and color

my config

import Vuetify from "vuetify";
import VuetifyDialog from "vuetify-dialog";
Vue.use(Vuetify);
Vue.use(VuetifyDialog, {
confirm: {
actions: {
false: "取消",
true: {
text: "确定",
color: "primary"
}
},
icon: false, // to disable icon just put false
width: 500
},
warning: {},
error: {},
prompt: {}
});

my code
this.$dialog.confirm({
text: "Do you realy want to delete item?",
title: "Warning",
actions: {
false: "No",
true: {
color: "red",
text: "Yes I do",
handle: () => {
return new Promise(resolve => {
setTimeout(resolve, 3000);
});
}
}
}
});

Hi,

I have imported the vuetify-dialog package but when trying to run a simple notification encountering this error. Using vuecli vuetify scaffold project.

[Vue warn]: Unknown custom element: <v-alert> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DialogChild>
       <Root>

Hi,

i follow the setup and when i try:
this.$dialog.error({ text: 'Cannot delete this item', title: 'Error' });

i recive this:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at Confirm.vue

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in

---> at DialogAction.vue
at DialogActions.vue
at Confirm.vue

Did i missed something? :)

Привет. Пробую запуститься в ИЕ11 (с помощью babel 7), натыкаюсь на ошибку SCRIPT5009: "Proxy" не определено. Окошки не работают. Понимаю, что из-за проблем совместимости с Proxy в IE. Но есть ли возможность сделать реализацию минуя прокси? Тогда бы было меньше проблем с IE=)

Вот таблица, которая говорит, что с Proxy могут быть проблемы:
https://kangax.github.io/compat-table/es6/

А если использую babel 6, то ошибка:
SCRIPT1003: Предполагается наличие ':'

Hi,

Thanks a lot for this wonderful library, just pointing out that the TypeScript types are missing success method for message and notify

Hi! Is there any easy way how to update default options after plugin is installed? I would like to translate default button texts when locale is changed something like this:

setI18n (lang = null) {
  this.$dialog.options = {
    actions: [this.$t('no'),  this.$t('yes')]
  }
}

Now I update components directly but having some method for changing default options would he great! :)

Hey guys,

I like the idea of this module and I'd like to use it for one of my projects. The problem is that I am working on the Vuetify 2.0 Beta since it should be released soon and it has breaking changes on a few of the components you are using.

I was wondering if you guys are working on this or planning to do so in the near future. If not I might fix a few things and do a pull request.

Hello, first of all thank you, this is an extremely useful project and it seems to work well, one small issue though:
In the docs it says we can set the icons for notifications, however I'm not seeing that happen.
It does work for dialogs no problem but using the same setting in a notification doesn't seem to do anything at all, is this supported?

For example this notify code won't show my icon, just the default one:

    this.$dialog.notify.warning("message", {
        position: "top-right",
        icon: "fa-exclamation-triangle",
        timeout: 7000
      });

However with a dialog it does work to show my icon, for example:

this.$dialog.warning({
      text: "Are you sure you want to delete this record?",
      title: "Delete",
      icon: "fa-exclamation-triangle"
    });

How can I modify the font-size of dialog text?Is there a parameter?

Hey. The documentation is written

const dialog = await this.$dialog.show(MyDialog, params, options)

But I do not understand how these parameters and options look? Can you set an example? I want for example, that the width of the window is 600px.

In show function is pocible don't show de icon close?

Please, install default nuxt project with vuetify nuxt module:
https://www.npmjs.com/package/@nuxtjs/vuetify

You'll see error messages like:
TypeError: Cannot read property 'dark' of undefined

And many errors related to oldest/removed properties usage.

Thank you, for your work %)

Hello @yariksav

thank you very much for your project.
I think if we can define class option for custom button style
make it easy better than custom dialog component

#47

When i try use $dialog.show(MyComponent). i get in console Component is incorrect.

This code my component

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>

<style>
.VueToNuxtLogo {
  display: inline-block;
  animation: turn 2s linear forwards 1s;
  transform: rotateX(180deg);
  position: relative;
  overflow: hidden;
  height: 180px;
  width: 245px;
}

.Triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.Triangle--one {
  border-left: 105px solid transparent;
  border-right: 105px solid transparent;
  border-bottom: 180px solid #41b883;
}

.Triangle--two {
  top: 30px;
  left: 35px;
  animation: goright 0.5s linear forwards 3.5s;
  border-left: 87.5px solid transparent;
  border-right: 87.5px solid transparent;
  border-bottom: 150px solid #3b8070;
}

.Triangle--three {
  top: 60px;
  left: 35px;
  animation: goright 0.5s linear forwards 3.5s;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 120px solid #35495e;
}

.Triangle--four {
  top: 120px;
  left: 70px;
  animation: godown 0.5s linear forwards 3s;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 60px solid #fff;
}

@keyframes turn {
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes godown {
  100% {
    top: 180px;
  }
}

@keyframes goright {
  100% {
    left: 70px;
  }
}
</style>

So i call dialog

import Logo from '../components/Logo';
    export default {
        components: { Logo},
            async myFunc() {
                const res = this.$dialog.show(Logo);
            },
}

what could be the problem?

I'm trying to use a dialog confirm box. My nuxt/vuetify app uses dark theme, but I'm not sure why the dialog box comes up with the light theme.

const res = await this.$dialog.confirm({ title: 'Warning', text: 'Are you sure you want to remove SQL Group ' + sqlGroup.SQL_ID });

The div element for the card is:

<div class="v-card v-sheet v-sheet--tile theme--light">

which is not what I want, I'd want theme--dark.

How do I achieve this?

Thanks.