question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use with NuxtJS?

See original GitHub issue

I’m trying to get this to work with NuxtJS, but I can’t figure out why it’s not working.

app.vue

import Notifications from "@kyvg/vue3-notification";

<template><Notifications /></template>

composables/useNotification.ts

import { useNotification } from "@kyvg/vue3-notification";

export default useNotification;

I always end up getting this error: Component is missing template or render function. even thou I can call useNotification().notify({title: 'foo', text: 'bar'}) without erros or warnings.

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
kyvgcommented, Nov 23, 2022

@ad-on-is You should register as a plugin, but you trying to register it as component ) This example works well

// plugins/notification.client.ts
import Notification from '@kyvg/vue3-notification'

export default defineNuxtPlugin((nuxtApp) => 
  nuxtApp.vueApp.use(Notification)
)
<template>
  <div>
    <notifications />
  </div>
</template>

<script setup>
import { useNotification } from '@kyvg/vue3-notification';

const {notify} = useNotification()

onMounted(() => {
  notify({
    text: 'test'
  })
})
</script>
0reactions
ad-on-iscommented, Nov 23, 2022

@ad-on-is You should register as a plugin, but you trying to register it as component ) This example works well

// plugins/notification.client.ts
import Notification from '@kyvg/vue3-notification'

export default defineNuxtPlugin((nuxtApp) => 
  nuxtApp.vueApp.use(Notification)
)
<template>
  <div>
    <notifications />
  </div>
</template>

<script setup>
import { useNotification } from '@kyvg/vue3-notification';

const {notify} = useNotification()

onMounted(() => {
  notify({
    text: 'test'
  })
})
</script>

That works! Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nuxt - The Intuitive Vue Framework
Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful.
Read more >
Free Nuxt.js Tutorial — Vue Mastery Course | by Gregg Pollack
In this Nuxt tutorial, a free lesson from the Vue Mastery course, we'll build an application together and learn about the folder structure...
Read more >
Creating Server-side Rendered Vue.js Apps Using Nuxt.js
Nuxt.js is based off an implementation of SSR for the popular React library called Next. After seeing the advantages of this design, a...
Read more >
What is Nuxt.js? - Vue School
Nuxt.js is a framework for creating Vue.js applications. Its goal is to help Vue developers take advantage of top-notch technologies, fast, easy and...
Read more >
What Is Nuxt.js? Learn More About the Intuitive Vue Framework
Nuxt.js works the same way a server-side framework works when a user visits a website. If server-side rendering is enabled, the requests are ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found