Set Toast width about vue-sonner

[fdsssawe]

@IVoyt Hey. You can set custom width for the toast using toastOptions.

If you wont to keept it static for all toast, you can just create your by importing it from the plugin, modify it using toastOptions, and when using it, import toaster from this file, not from the plugin, so :

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


</script>
<template>
  <Toaster
      :toastOptions="{
        style :  { width: '150px' },
      }"
  />
</template>

For tailwind

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

</script>
<template>
  <Toaster
      :toastOptions="{
        unstyled: true,
        classes: {
          toast: 'w-[150px]',
        },
      }"
  />
</template>

Usage

import { Toaster } from '@/components/ui/toast' //route to toaster you created earlier


...
<Toaster/>
<Button @click="() => toast(Title)">Show Toast</Button>
...

Result

[IVoyt]

@IVoyt Hey. You can set custom width for the toast using toastOptions.

If you wont to keept it static for all toast, you can just create your by importing it from the plugin, modify it using toastOptions, and when using it, import toaster from this file, not from the plugin, so :

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


</script>
<template>
  <Toaster
      :toastOptions="{
        style :  { width: '150px' },
      }"
  />
</template>

For tailwind

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

</script>
<template>
  <Toaster
      :toastOptions="{
        unstyled: true,
        classes: {
          toast: 'w-[150px]',
        },
      }"
  />
</template>

Usage

import { Toaster } from '@/components/ui/toast' //route to toaster you created earlier


...
<Toaster/>
<Button @click="() => toast(Title)">Show Toast</Button>
...

Result

Thanks for your response.

I just tested and I see it is reactive. Perfect!

But I thought I can use this approach to set different widths for different toasts. I expected by changing width for every triggering toast it will not override width for all toasts but apply different width for different toasts. Is there a way to implement my approach?

[fdsssawe]

@IVoyt Hey. You can set custom width for the toast using toastOptions.
If you wont to keept it static for all toast, you can just create your by importing it from the plugin, modify it using toastOptions, and when using it, import toaster from this file, not from the plugin, so :

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


</script>
<template>
  <Toaster
      :toastOptions="{
        style :  { width: '150px' },
      }"
  />
</template>

For tailwind

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

</script>
<template>
  <Toaster
      :toastOptions="{
        unstyled: true,
        classes: {
          toast: 'w-[150px]',
        },
      }"
  />
</template>

Usage

import { Toaster } from '@/components/ui/toast' //route to toaster you created earlier


...
<Toaster/>
<Button @click="() => toast(Title)">Show Toast</Button>
...

Result

Thanks for your response.

I just tested and I see it is reactive. Perfect!

But I thought I can use this approach to set different widths for different toasts. I expected by changing width for every triggering toast it will not override width for all toasts but apply different width for different toasts. Is there a way to implement my approach?

@IVoyt Yep. On function call :

toast('Event has been created', {
  style: {
    width : '150px',
  },
})

using tailwind

toast('Hello World', {
  unstyled: true,
  classes: {
    toast: 'w-[150px]',
  }
})

[IVoyt]

I don't have tailwind and yet I need to figure out how to integrate within my project :)

Anyways many thanks!

[fdsssawe]

@IVoyt

toast('Event has been created', {
  style: {
    width : '150px',
  },
})

this verison do not require tailwind.

[IVoyt]

@IVoyt

toast('Event has been created', {
  style: {
    width : '150px',
  },
})

this verison do not require tailwind.

That worked, thanks a lot!