euvl / vue-notification

:icecream: Vue.js 2 library for showing notifications

Home Page:http://vue-notification.yev.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nuxt support or usage guidelines

eli007s opened this issue · comments

is there a way to enable support for Nuxt? Or maybe some clear instructions on usage with Nuxt?

When I import it as a plugin:

import Vue from 'vue'
import Notifications from 'vue-notification'
import velocity from 'velocity-animate'

/*
or for SSR:
import Notifications from 'vue-notification/dist/ssr.js'
*/

Vue.use(Notifications, { velocity })

I register it in the nuxt.config.js

plugins: [{ src: '~/plugins/vue-notification.js', ssr: false }],

I get this error in the console

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Notification>
       <Layouts/auth.vue> at layouts/auth.vue
         <Root>

in my template auth.vue

    <notification group="errors" />
  </div>
</template>

<script>
import Notification from 'vue-notification'

export default {
  components: { Notification }
}
</script>

You dont need the import statement in your component,

1 Install

npm install --save vue-notification

2 In config nuxt.config.js add

  plugins: [
    { src: '~/plugins/vue-notification.js', ssr: false }
  ],

3 Create plugin/vue-notification.js

import Vue           from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

4 Use in layout/default.vue

    <client-only>
      <notifications/>
    </client-only>

@eli007s in future when you closing issue like this, please share your solution with other.