Need help with vuetify-dialog?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

yariksav
148 Stars 43 Forks MIT License 126 Commits 19 Opened issues

Description

Easy dialogs in Vuetify.js framework

Services available

!
?

Need anything else?

Contributors list

# 213,862
TypeScr...
Node.js
nodejs-...
typescr...
90 commits
# 94,953
GraphQL
magento
litecoi...
vue3
1 commit
# 197,403
PHP
Lua
Shell
kobo
1 commit
# 24,276
C++
pdf-par...
pdf-man...
Python
1 commit
# 20,609
Mongoos...
gc
ooxml
mdui
1 commit
# 360,253
lg
reactjs
Objecti...
webos
1 commit
# 323,267
Shell
ocsp
rc4
HTML
1 commit

vuetify-dialog

This module will help you work with
vuetify
dialogs without annoying templates

Implementation of vuedl dialog helper with Vuetify.js framework

This module will help you to work with modal dialogs in your project

Coverage Status

FOSSA Status

Vuedl module documentation

This module uses vuedl to automatically work with dialogs and DOM See docs here

Setup

Install the package from npm

IMPORTANT: After version 0.4.0 css and js were split and therefore you have to import css manually

Vuetify 2

For Vuetify 2 please use the latest version of [email protected]

Demo with Vuetify 2

Demo in CodeSandbox,
Demo source

npm install vuetify-dialog
// need instance of vuetify, for example
import vuetify from '@/plugins/vuetify'

import VuetifyDialog from 'vuetify-dialog' import 'vuetify-dialog/dist/vuetify-dialog.css'

Vue.use(VuetifyDialog, { context: { vuetify } })

Vuetify 1

For Vuetify 1 you need to use [email protected]

Demo with Vuetify 1

Demo with Vuetify 1 CodeSandbox,
Demo source

npm install [email protected]
import VuetifyDialog from 'vuetify-dialog'
import 'vuetify-dialog/dist/vuetify-dialog.css'
Vue.use(VuetifyDialog)

or use with extra configuration

javascript
import VuetifyDialog from 'vuetify-dialog'
import 'vuetify-dialog/dist/vuetify-dialog.css'
Vue.use(VuetifyDialog, {
  context,
  property,
  confirm: {
    actions: {
      false: 'No',
      true: {
        text: 'Yes',
        color: 'primary'
      }
    },
    icon: false, // to disable icon just put false
    width: 500
  },
  warning: {},
  error: {},
  prompt: {}
})
  • context
    - the context of your application, such as store, axios, router etc.
  • property
    - the property, which will integrate to Vue. Default is
    $dialog
  • confirm
    - confirm dialog params
  • warning
    - warning dialog params
  • error
    - error dialog params
  • prompt
    - prompt dialog params Where:
    • actions
      - dialog buttons config
    • icon
      - dialog icon in String, example 'warning'. Note, if you want to hide icon, just set parameter to false
    • width
      - dialog max width

♻️ Usage with Nuxt.js

Add

vuetify-dialog/nuxt
to modules section of
nuxt.config.js

Module automatically add to dialog nuxt context data, such as router, route, i18n, $axios, etc

{
  modules: [
    // Simple usage
    'vuetify-dialog/nuxt'

// Optionally passing options in module configuration
['vuetify-dialog/nuxt', { property: '$dialog' }]

],

// Optionally passing options in module top level configuration vuetifyDialog: { property: '$dialog' confirm: {} // ... } }

Simple confirm dialog

const res = await this.$dialog.confirm({
  text: 'Do you really want to exit?',
  title: 'Warning'
})

Info dialog

const res = await this.$dialog.info({
  text: 'File copied successfully',
  title: 'Info'
})

Warning dialog

const res = await this.$dialog.warning({
  text: 'Do you really want to exit?',
  title: 'Warning'
})

Error dialog

this.$dialog.error({
  text: 'Cannot delete this item',
  title: 'Error'
})

Prompt dialog

let res = await this.$dialog.prompt({
  text: 'Your name',
  title: 'Please input your name',
})

Prompt dialog with password

let res = await this.$dialog.prompt({
  title: 'Password balidation',
  text: 'Enter your password',
  rules: [(v) => v.length >= 6 || 'Password must be at least 6 characters long'], // vuetify's v-text-field rules prop
  textField: {
    // Any addtional props/attrs that will be binded to v-text-field component
    type: 'password',
  }
})

Programmatically close dialog

If property

waitForResult
set to false, then functions will return dialog instance

Actually waitForResult = true make two steps 1) dialogInstance = $dialog.show(component) // Show dialog 2) return dialogInstance.wait() // Return promise

Therefore to perform programmatically close dialog you have to set waitForResult to false and work with dialogInstance directly

  const dialogInstance = await this.$dialog.warning({
    title: this.title,
    text: this.text,
    waitForResult: false
  });
  setTimeout(() => {
    dialogInstance.close()
  } , 3000)

// then you can wait for user reaction const userChoice = await dialogInstance.wait() // after idle 3000 sec - userChoice will be undefined this.$dialog.notify.info(userChoice)

Notifications

The notification component is used to convey important information to the user. Notification support positioning, removal delay and callbacks. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

Notification uses v-alert component

Props: * text - the text fo your message - type: String * options: - type: Object - properties: - position: one of top-left, top-right, bottom-left, bootom-right - timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically - actions

js
this.$dialog.notify.info('Test notification', {
  position: 'top-right',
  timeout: 5000
})

Toasts

The toast component is used to display a quick message to a user. Toasts support positioning, removal delay and callbacks. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

Toast uses v-snackbar component

Props: * text - the text fo your message - type: String * options: - type: Object - properties: - position: one of top-left, top-right, bottom-left, bootom-right - timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically - actions: - see below

javascript
this.$dialog.message.info('Test', {
  position: 'top-left'
})

Actions

To all dialogs you can put your own buttons Props: * key - the text fo your message - type: String * options: - type: Object - properties: - position: one of top-left, top-right, bottom-left, bootom-right - timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically - actions: - see below ```js { ... actions: { false: 'No', true: 'Yes' } } // result will be true, false, or undefined { ... actions: ['No', 'Yes'] } // result will be 'No', 'Yes', or undefined

You can also send full button options
```js
{
  actions: [{
    text: 'Yes', color: 'blue', key: true
  }]
}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.