[Vue warn]: Failed to resolve component: Toaster

[Skylercrane23]

Description

Getting the following warning:

[Vue warn]: Failed to resolve component: Toaster 
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Currently using Nuxt3, using this package as a plugin.

vue-sonner.client.ts

export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.vueApp.component('Toaster', Toaster)

	return {
		provide: {
			toast,
		},
	}
})

And then in my app.vue its implemented like this:

<ClientOnly>
     <Toaster
          position="top-right"
	  :rich-colors="true"
     />
</ClientOnly>

Its just a warning, not a big deal but was curious if there is something on my end that I am missing, or if the package itself needs to handle this warning.

Thanks!

[xiaoluoboding]

@Skylercrane23 same issue #7

[therealokoro]

This is how I fixed it.

// sonner.client.ts
import { toast } from 'vue-sonner'
export default defineNuxtPlugin(() => {
  // do not register the 'Toaster' component here
  return { provide: { toast } }
})

Go to your root component(either a layout) and import the component there, wrap it with a ClientOnly component from nuxt

This example uses a layout file (layouts/default.vue)

<script lang="ts" setup>
  import { Toaster } from 'vue-sonner';
</script>

<template>
  <div>
    <slot />
    <ClientOnly>
        <Toaster />
    </ClientOnly>
  </div>
</template>

This should work. And you get type inference on the component now.