Vue 3 & Vuetify 3 plugin to create dialogs, toasts and bottom-sheets with Promises.
npm install vuetify3-dialognpm install vuetify3-dialog. Then, install this plugin in your app entry point (main.js or main.ts) like following :
``js
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetifyInstance from './plugins/vuetify' //Or wherever you have your vuetify instance
import {Vuetify3Dialog} from 'vuetify3-dialog'
const app = createApp(App)
app.use(vuetifyInstance); //You must use Vuetify before Vuetify3Dialog
...
app.use(Vuetify3Dialog, {
defaults: {
//You can pass default options for dialogs, dialog's card, snackbars or bottom-sheets here
}
})
app.mount('#app')
`
, $notify, and $banner. Each of them have methods to create full personalized dialogs, snackbars, or banners, and other ones to create simple components with a message and a title, by specifying level of severity. Let's see how to use them.$3
You can create a fully personalized dialog with the following method :
`js
this.$dialog.create({
title: "My title",
text: "My dialog message",
buttons: [
{ title: 'My first button', key: 'button1', / any v-btn api option / },
...
],
cardOptions: {
//any v-card api options
},
dialogOptions: {
//any v-dialog api options
}
}).then((anwser) => {
//Do something with the anwser corresponding to the key of the clicked button
})
`
#### 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 :
js
this.$dialog.create({
..., //other options
customComponent: {
component: MyCustomComponent,
props: { myComponentProp: 'Hello world!' }
},
}).then(() => {
})
`
> [!WARNING]
> ⚠ If you declare a persistent dialog option, take care that your component emit a 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".
`js
this.$dialog.confirm({title: "My title", text: "My dialog message", cancelText: "No", confirmationText: "Yes", cancelButtonOptions: ..., confirmationButtonOptions: ...})
.then((anwser) => {
//Do something with the boolean anwser
})
`You can also create a simple dialog with a message and a title, by precizing level of severity :
js
this.$dialog.info({
title: "My title",
text: "My dialog message",
cardOptions: ...,
buttonOptions: ...
}).then(() => {
//Do something when the user close the dialog
})
`
There is 4 levels of severity : , success, warning and error.__Usefull links:__
- v-card api
- v-dialog api
$3
You can create a fully personalized snackbar with the following method :
`js
//message, timeout, level, variant, rounded, position
this.$notify.create({
text: "My snackbar message",
htmlContent: "My snackbar message", // optional (included in 1.5.3)
level: 'success',
location: 'top right',
notifyOptions: {
//any v-snackbar api options
}
})
.then(() => {
//Do something with the anwser corresponding to the key of the clicked button
})
`You can also create a simple snackbar with a message and a title, by precizing level of severity :
js
this.$notify.info(
"My snackbar message",
{ variant: 'outlined' } // any v-snackbar api options
).then(() => {
//Do something when the user close the snackbar
})
`
There is 4 levels of severity : , success, warning and error.__Usefull links:__
- v-snackbar api
$3
You can create banners with different severity levels:`js
// Basic banner
this.$banner.create({
text: "This is an informational message",
bannerOptions: {
// any v-banner api options
}
}).then(() => {
// Called when banner is closed
})
`Shortcut methods for different severity levels:
js
// Info banner (default)
this.$banner.create({ text: "Informational message" })// Success banner
this.$banner.success("Operation completed successfully!")
// Warning banner
this.$banner.warning("This action cannot be undone!")
// Error banner
this.$banner.error("Critical error occurred!")
`All banner methods support optional banner options:
js
this.$banner.create({
text: "Custom banner",
level: 'info', // 'info', 'success', 'warning', or 'error'
closable: true, // default: true
bannerOptions: {
// any v-banner api options
lines: 'two',
icon: 'mdi-information',
// ...
}
})
`Features:
- Automatic positioning as first child of v-main
- HTML content sanitization for security
- Multiple banners can coexist
- Responsive design
- Accessibility compliant
__Usefull links:__
- v-banner api
$3
> [!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 :
js
this.$bottomSheet.create({
title: "My title",
text: "My bottom sheet message",
bottomSheetOptions: {
// any v-bottom-sheet api options
},
items: [
{ title: "Item 1", value: "item1", ... / any v-list-item api option / },
{ title: "Item 2", value: "item2" },
{ title: "Item 3", value: "item3" }
]
}).then((anwser) => {
//Do something with the anwser corresponding to the value of the clicked item
})
`Here is an example with a card :
js
this.$bottomSheet.create({
bottomSheetOptions: {
// any v-bottom-sheet api options
},
dialogOptions: {
//same arguments as $dialog.create()
title: "My bottom-sheet card dialog",
text: "Hello world!",
buttons: [
{ title: 'My first button', key: 'button1', / any v-btn api option / },
...
]
}
}).then((anwser) => {
//Do something with the anwser corresponding to the key of the clicked button
})
`
$3
If you want to use this plugin in an SFC component, some methods are available. Working principle is the same as previous methods, and arguments are the same.
html
`Developers
If you want to contribute to this project, you can clone it and run 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 !