VueUp

Simple, lightweight and elegant global notification popup for Vue.js.

View the demo.

Install

npm install --save vueup

Somewhere in your app:

import Vue   from 'vue'
import VueUp from 'vueup'

Vue.use(VueUp)

Nuxt.js

To use VueUp with Nuxt.js deploy the app with the --spa or --s flag to disable server-side rendering. For more information see nuxtjs.org/guide/commands/.

Otherwise, you can do the following steps:

File plugins/vueup.js:

import Vue from 'vue'
import VueUp from 'vueup'

Vue.use(VueUp)

Then, add the file inside the plugins key of nuxt.config.js:

module.exports = {
  plugins: [
    { src: '~/plugins/vueup', ssr: false }
  ]
}

Note: The key ssr is used to disable the server-side rendering for VueUp because it's a client side library. For more information see nuxtjs.org/guide/plugins/.

I would recommend to add the VueUp element <vue-up></vue-up> under the </nuxt> element in the layouts/default.vue file.

Usage

Add the <vue-up> component to one point in your application:

<template>
  <div>
    <vue-up></vue-up>
  </div>
</template>

To trigger the notification use the $popup method:

export default {
  ...
  methods: {
    notify () {
      this.$popup({ message: 'A message' })
    }
  }
}

You can also use a promise to execute something after the VueUp notification has ended:

export default {
  ...
  methods: {
    notify () {
      this.$popup({ message: 'Your request is reviewed.' })
        .then(() => {
          // ... do something
        })
    }
  }
}

API

this.$popup(string | Object)

this.$popup('message')

// or

this.$popup({
    message         : 'message',
    color           : '#423452',
    backgroundColor : 'rgba(0, 0, 0, 0.4)',
    delay           : 4,
    fontSize        : 60
})

Attributes

|Name|type|default|description| |:--:|:--:|:--:|:---| |message|string|-|The message that will be displayed in the notification| |color|string|#ffffff|The text color of the message| |backgroundColor|string|rgba(0, 0, 0, 0.8)|The background color of the notification| |delay|float|3.5|How long (in seconds, e.q. 3.5 seconds) should the notification popup be displayed| |fontSize|int|60|The font size of the notification text|

Hint: For the color and backgroundColor fields you can apply the color property in form of the css color property.

License

Copyright (c) 2017 Christoph Biering, Licensed under the MIT license.