Using custom components with Nuxt

[steakscience]

Hi,

I'm trying to figure out how to pass in a custom component when using Nuxt.

I've followed the instructions and created a plugin, but I'm not sure how/where to pass in the custom component

Thanks!

[joshuadempsey]

If I understand your question correctly, Nuxt autoloads components so you can just follow the install guide and then in your App.vue...

`


<button @click="() => toast('My first toast')">Render a toast

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

This should work.

[Heunsig]

If you have followed Sonner's setup instructions, you may have created a plugins/sonner.client.ts file to add the Toaster component globally. The word client in the filename signifies that the component is meant to be rendered exclusively on the client side. Yet, when the Toaster is used within a .vue SFC, the server attempts to render it as well, leading to an error since theToaster is configured to render on the client-side only.

To resolve this issue, enclose Toaster component within a <ClientOnly>. This ensures that the Toaster is rendered only on the client side.

Your code would then look like the following:

<!-- App.vue -->
<template>
  <!-- existing content -->
  <ClientOnly>
    <Toaster />
  </ClientOnly>
  <button @click="() => toast('My first toast')">
    Give me a toast
  </button>
</template>

[gsabater]

@steakscience Since the answers above didn't help me. I did it this way:

Import your component anyway at the top of your plugin or vue file

import Toast from '../components/toasts/Importing.vue'

And then pass it as the first param when calling

$toast = $nuxt.$toast.info(Toast)

Hope it helps