Vuedl - vue dialog helper
This module will help you to work with modal dialogs in your project
Inspire of Nuxt.js logic, vuedl also has asyncData
, fetch
, layout
and middleware
handlers
NOTE: Module is in initial development. Anything may change at any time.
Used in frameworks
-
bootstrap-vue (not supported, need contributor)
Setup
Install the package from npm
npm install vuedl
Vue
Where
-- context
: is object with context of your application, such as i18n, store, router, etc
-- property
: is name of Vue property, for access, default is $dialog
After instalation, instance of dialog manager will be available in Vue.prototype.$dialog, or inside Vue instances this.$dialog
Usage
Use dialogs
const dialog = await this$dialog
dialog
will be instance of DialogManager
Register and use dialog components
Register global dialog component, then it will be available in any vue module
Vueprototype$dialog
Then you can use it in any code
this$dialog
Waiting for user fiil data and click button (when dialog is closing)
const result = await this$dialog
or
const dialog = await this$dialogconst result = dialog
result
will be object of user inputs, or clicked button, depending on what will be sent in dialog component by the:
this
The layout param
vuedl can use layout templates for wrapping dialogs For registering your own layouts template use
Vueprototype$dialog
Example of the layout template
vuedl module will put in layout component mixin with params:
-- width
: Number - max width of component
-- isActive
: Boolean - is dialog active
-- show
: Function
-- close
: Function
If dialog showed without layout, this mixin will integrate to dialog instance
After this dialog component must have parameter
layout: 'default' ...
The asyncData and fetch Method
Sometimes you just want to fetch data and pre-render it on the server without using a store. asyncData
is called every time before loading the dialog component. This method receives [the context] as the first argument, you can use it to fetch some data and v-dialog will merge it with the component data.
You do NOT have access of the component instance through
this
insideasyncData
because it is called before initiating the component
v-dialog offers you different ways to use asyncData
. Choose the one you're the most familiar with:
fetch
is use for calling store methods, and not impact to instance data
- Returning a
Promise
. Vuedl will wait for the promise to be resolved before rendering the component. - Using the async/await proposal (learn more about it)
- Define a callback as second argument. It has to be called like this:
callback(err, data)
Returning a Promise
{ return axios }
Using async/await
async { let data = await axios return title: datatitle }
Using a callback
{ axios }
Displaying the data
The result from asyncData will be merged with data. You can display the data inside your template like you're used to doing:
{{ title }}
The overlay
When dialog component has an asyncData
or fetch
functions, it will show overlay before calling this methods. Overlay will block main window and show loading cursor.
If you want to register your own overlays template
Vueprototype$dialog
Confirm, alert and prompt dialogs
vuedl has implementations of confirm, alert warning, error or prompt dialog
this$dialog
const res = await this$dialog...const res = await this$dialog
let res = await this$dialogif res ...
res will be true or false
For registering your own Confirm template
Vueprototype$dialog
For registering your own Prompt template
Vueprototype$dialog