Vuetify 3 Dialog

Lite Vue plugin working with Vuetify, allowing you to show dialogs or snackbars programatically.

Inspired by vuetify-dialog (@yariksav)

Summary

• Installation
• Usage
  • Dialogs
  • Snackbars
  • Bottom sheets
  • SFC compatibility
• Developers

Install it

First, run npm install vuetify3-dialog.
⚠️You must have Vuetify installed on your project. If you don't have installed yet, please follow this link : Install Vuetify

Then, install this plugin in your app entry point (main.js or main.ts) like following :

1//main.js
2
3import { createApp } from 'vue'
4import App from './App.vue'
5import vuetifyInstance from './plugins/vuetify' //Or wherever you have your vuetify instance
6import {Vuetify3Dialog} from 'vuetify3-dialog'
7
8const app = createApp(App)
9app.use(vuetifyInstance); //You must use Vuetify before Vuetify3Dialog
10        ...
11app.use(Vuetify3Dialog, {
12  defaults: {
13    //You can pass default options for dialogs, dialog's card, snackbars or bottom-sheets here
14  }
15})
16app.mount('#app')

Usage

You can now use the plugin in your components. There is two main variable available in all your project : $dialog and $notify. Each of them have methods to create full personalized dialogs or snackbars, and other ones to create simple dialogs or snackbars with a message and a title, by precizing level of severity. Let's see how to use them.

Dialogs

You can create a fully personalized dialog with the following method :

1this.$dialog.create({
2  title: "My title",
3  text: "My dialog message",
4  buttons: [
5    { title: 'My first button', key: 'button1', /* any v-btn api option */ },
6    ...
7  ],
8  cardOptions: {
9    //any v-card api options
10  },
11  dialogOptions: {
12    //any v-dialog api options
13  }
14}).then((anwser) => {
15  //Do something with the anwser corresponding to the key of the clicked button
16})

Custom dialog inner component

You can pass a custom component to render inside the dialog, with it props binded! Here's how to do it :

1this.$dialog.create({
2  ..., //other options
3  customComponent: {
4    component: MyCustomComponent,
5    props: { myComponentProp: 'Hello world!' }
6  },
7}).then(() => {
8})

[!WARNING]
⚠ If you declare a persistent dialog option, take care that your component emit a closeDialog event when you want to close it.

---

this.$dialog also have a confirm method, which is a shortcut for the previous method with only two buttons : "Yes" and "No".

1this.$dialog.confirm({title: "My title", text: "My dialog message", cancelText: "No", confirmationText: "Yes", cancelButtonOptions: ..., confirmationButtonOptions: ...})
2.then((anwser) => {
3  //Do something with the boolean anwser
4})

You can also create a simple dialog with a message and a title, by precizing level of severity :

1this.$dialog.info({ 
2  title: "My title",
3  text: "My dialog message",
4  cardOptions: ..., 
5  buttonOptions: ...
6}).then(() => {
7  //Do something when the user close the dialog
8})

There is 4 levels of severity : info, success, warning and error.

Usefull links:

• v-card api
• v-dialog api

Snackbars

You can create a fully personalized snackbar with the following method :

1//message, timeout, level, variant, rounded, position
2this.$notify.create({
3  text: "My snackbar message",
4  htmlContent: "<b>My snackbar message</b>", // optional (included in 1.5.3)
5  level: 'success',
6  location: 'top right',
7  notifyOptions: {
8    //any v-snackbar api options
9  }
10})
11.then(() => {
12  //Do something with the anwser corresponding to the key of the clicked button
13})

You can also create a simple snackbar with a message and a title, by precizing level of severity :

1this.$notify.info(
2  "My snackbar message",
3  { variant: 'outlined' } // any v-snackbar api options
4).then(() => {
5  //Do something when the user close the snackbar
6})

There is 4 levels of severity : info, success, warning and error.

Usefull links:

• v-snackbar api

Bottom sheets

[!WARNING]
⚠ This feature requires Vuetify 3.4.0 or higher

You can create a fully personalized bottom sheet with a contained list or a card dialog. To stay consistent, these two features cannot be used at same time.
Here is an example with a list :

1this.$bottomSheet.create({
2  title: "My title",
3  text: "My bottom sheet message",
4  bottomSheetOptions: {
5    // any v-bottom-sheet api options
6  },
7  items: [
8    { title: "Item 1", value: "item1", ... /* any v-list-item api option */ },
9    { title: "Item 2", value: "item2" },
10    { title: "Item 3", value: "item3" }
11  ]
12}).then((anwser) => {
13  //Do something with the anwser corresponding to the value of the clicked item
14})

Here is an example with a card :

1this.$bottomSheet.create({
2  bottomSheetOptions: {
3    // any v-bottom-sheet api options
4  },
5  dialogOptions: {
6    //same arguments as $dialog.create()
7    title: "My bottom-sheet card dialog",
8    text: "Hello world!",
9    buttons: [
10      { title: 'My first button', key: 'button1', /* any v-btn api option */ },
11      ...
12    ]
13  }
14}).then((anwser) => {
15  //Do something with the anwser corresponding to the key of the clicked button
16})

SFC compatibility

If you want to use this plugin in an SFC component, some methods are available. Working principe is the same as previous methods, and arguments are the same.

1<script setup>
2import { createDialog, warnDialog, confirmDialog } from 'vuetify3-dialog'
3import { createNotification, notifySuccess } from 'vuetify3-dialog'
4import { createBottomSheet } from 'vuetify3-dialog'
5
6if(true){
7  createDialog({ title: "My title", text: "My dialog message" })
8  .then((anwser) => {
9    //Do something with the anwser corresponding to the key of the clicked button
10  })
11
12  notifySuccess("My snackbar message").then(() => {})
13
14  createBottomSheet({ title: "My bottomsheet title", text: "My bottomsheet message" })
15  .then(() => {})
16}
17</script>

Developers

If you want to contribute to this project, you can clone it and run npm install to install dependencies.

Then, you need to test your changes. A demo project is located at cypress/test-server of this repository. You can launch it with npm run test-server.
If you have the following error : [vite] Internal server error: Failed to resolve entry for package "vuetify3-dialog". The package may have incorrect main/module/exports specified in its package.json., make sure you have run npm run build before to build the plugin and make it available for the demo project.

Finally, when you will have finish your changes, make sure all tests are passing with npm run test, thanks in advance !