Usage with vue options api

[sky-code]

Please add support for usage with options api components and example in documentation.

[smastrom]

Hi @sky-code, I will definitely do that as soon as I have some time. However, that's how you would use Notivue with Options API:

main.js

import { createApp } from 'vue'
import { notivue } from 'notivue'

import App from './App.vue'

import 'notivue/notifications.css'
import 'notivue/animations.css'

const app = createApp(App)

app.use(notivue)
app.mount('#app')

App.vue

<script>
import { Notivue, Notifications } from 'notivue'

import Page from './components/Page.vue'

export default {
  components: { Notivue, Notifications, Page },
}
</script>

<template>
  <Notivue v-slot="item">
    <Notifications :item="item" />
  </Notivue>

  <Page />
</template>

Page.vue (or any other component)

<script>
import { usePush } from 'notivue'

export default {
  setup() {
    const push = usePush()

    return { push }
  },
  methods: {
    pushSuccess() {
      this.push.success('Something good has been pushed!')
    },
  },
}
</script>

<template>
  <button @click="push.success('Something good has been pushed!')">
    Push using object
  </button>
  <button @click="pushSuccess">Push using method</button>
</template>

I've created a working example on StackBlitz as well.