vue-pop

vue-pop is a plugin for Vue 3 to manage pop-ups and notifications.

Installation

You can install vue-pop with npm:

$ npm i -S @sneppy/vue-pop

Basic usage

Create a new instance of Pop and install it with the Vue app:

import { createApp } from 'vue';
import { Pop } from '@sneppy/vue-pop'

import App from './App.vue'

export let pop = new Pop()

createApp(App)
    .use(pop)
    .mount('#app')

Place <pop-view/> somewhere in the DOM tree. That's where the pop-ups will be spawned:

<template>
    <div id="App">
        <router-view/>
        <pop-view/>
    </div>
</template>

Next, import the Pop instance where needed and use Pop.push() to push a popup window on the stack:

import { pop } from '@/main'
import SomePopUpComponent from './SomePopUpComponent.vue'

export default {
    setup() {

        const onClick = () => pop.push({
            comp: markRaw(SomePopUpComponent)
        })
    }
}

Starting with vue-pop@3.1.0 you need to explicitly mark the component as non-reactive with markRaw()

You can close the topmost pop-up anytime using Pop.pop().

Props can be passed down to the pop-up component like this:

pop.push({
    comp: markRaw(SomePopUpComponent),
    props: {
        title: 'Message title',
        text: 'Message text'
    }
})

You may also listen for events emitted by the pop-up component:

pop.push({
    comp: markRaw(ConfirmDialogComponent),
    props: {
        message: 'Are you sure you want to exit',
        onConfirm: () => submit(),
        onCancel: () => pop.pop()
    }
})

See the v-on paragraph in Vue 3 documentation

By default, vue-pop will listen for a 'close' event and close the pop-up.

// ConfirmDialogComponent
emit('close') // This will close the pop-up, just like calling pop.pop()

vue-pop comes with a built-in wrapper, which is enabled by passing the component as a prop:

pop.push({
    props: {
        comp: ConfirmDialog,
        message: 'Are you sure you want to exit'
    },
    // ...
})

The wrapper component generates the following tree:

div.pop-wrapper
    div.pop-overlay
    div.pop-content
        comp

You can also import a built-in style for the wrapper, or provide your own style:

import '@sneppy/vue-pop/dist/index.css'

Notifications

vue-pop provides an helper class to handle simple notifications. To enable it, create a new Notif instance right after creating the Pop instance:

let pop = new Pop
let notif = new Notif(pop)

You will also need to create a dedicated view somewhere:

<template>
    <div id="App">
        <router-view/>
        <pop-view/>
        <pop-view name="notif"/>
    </div>
</template>

The name="notif" attribute designate the view as the notification view.

The notif object has various methods that determine the type of notification:

method	type
log or info	log message
done or doneall	success message
warn	warning message
error	error message

All methods accept a plain string message and a time duration (in milliseconds):

notif.done('User profile updated', 3000)

If the time duration is undefined the notification will be displayed until notif.pop() is called.

By default, notifications are displayed in a bar that fills the top of the screen. You can set the position of notifications using the pos="(left|center|right|fill) (top|middle|bottom)" attribute on <pop-view/>:

<pop-view name="notif" position="right bottom"/>

You will also need to import the built-in stylesheet, or provide your own.

Advanced Usage

vue-pop can handle multiple views.

Each view is identified by a unique name attribute. In order to address a certain view, you must provide its name in Pop.push() and Pop.pop():

<pop-view name="messages"/>
<pop-view name="other"/>

pop.push({
    comp: markRaw(Component)
}, 'messages')

pop.pop('other')

If two or more views share the same name, they will display the same pop-up

The main view has no name.

You can wrap a view in a transition component to apply enter and leave animations to the pop-up:

<transition name="fade">
    <pop-view/>
</transition>

---

Check out other Vue libraries:

• Stallone is an elegant and intuitive library to create REST API clients;
• vue-menu is a Vue 3 plugin to create custom context menus.