Add SSR support

[pedramk]

Great one! But I think it doesn't work with SSR. I'm using Nuxtjs and I couldn't add the plugin.

[alexgarrettsmith]

For anyone wondering, in the meantime, you can do this with Nuxt.js:

nuxt.config.js

plugins: [
  {
    src: './plugins/snotify',
    ssr: false
  }
],

plugins/snotify.js

import Vue from 'vue'
import Snotify, { SnotifyPosition } from 'vue-snotify'

const options = {
  toast: {
    position: SnotifyPosition.rightTop
  }
}

Vue.use(Snotify, options)

In your template:

<no-ssr>
  <vue-snotify></vue-snotify>
</no-ssr>

And finally, under build.extend:

config.resolve.alias['vue'] = 'vue/dist/vue.common'

Little hacky to get around this for now, but better than nothing 👍

[Thomas-Philippot]

@alexgarrett I tryed you solution but nothing seems to work better.. The best I can have is object with only one install() method..

Edit : I was on the wrong template, it worked ! thank's

[altynbek07]

@alexgarrett Hi. What is this code for? Is it still relevant? (nuxt@2.12.2)

config.resolve.alias['vue'] = 'vue/dist/vue.common'

---

By the way I did this (nuxt@2.12.2) and It works 🕺🏻: In nuxt.config.js:

plugins: [
    ...
    { src: '~/plugins/vue-snotify', mode: 'client' },
    ...
  ],

Create plugins/vue-snotify.js file with:

import Vue from 'vue'
import Snotify, { SnotifyPosition } from 'vue-snotify'

const options = {
  toast: {
    position: SnotifyPosition.rightTop
  }
}

Vue.use(Snotify, options)

In layouts/default.vue:

<template>
...
     <client-only>
          <vue-snotify></vue-snotify>
     </client-only>
...
</template>

And that's all, it works for me.

[theprantadutta]

@alexgarrett Hi. What is this code for? Is it still relevant? (nuxt@2.12.2)

config.resolve.alias['vue'] = 'vue/dist/vue.common'

By the way I did this (nuxt@2.12.2) and It works 🕺🏻: In nuxt.config.js:

plugins: [
    ...
    { src: '~/plugins/vue-snotify', mode: 'client' },
    ...
  ],

Create plugins/vue-snotify.js file with:

import Vue from 'vue'
import Snotify, { SnotifyPosition } from 'vue-snotify'

const options = {
  toast: {
    position: SnotifyPosition.rightTop
  }
}

Vue.use(Snotify, options)

In layouts/default.vue:

<template>
...
     <client-only>
          <vue-snotify></vue-snotify>
     </client-only>
...
</template>

And that's all, it works for me.

you need to add the styles. Add this line: import "vue-snotify/styles/material.css"