Skip to content

Sonner transitions break after deploy — work fine locally #133

@mtzrmzia

Description

@mtzrmzia

Reproduction

https://github.com/mtzrmzia/shadcnvue-sonner

Describe the bug

Hi, I’m using vue-sonner in a Nuxt 3 project. Everything works great in development — including transitions — but after deployment, the animations/transitions appear to be broken or missing.

I’ve followed the documentation steps carefully, including this related comment.

  • The toast renders correctly
  • But the entrance transitions are gone after deployment
  • No console errors

nuxt.config.ts

css: ['~/assets/css/main.css', 'vue-sonner/style.css'],
modules: [
  'vue-sonner/nuxt',
  // other modules...
],

app.vue

<script setup lang="ts">
defineOptions({
  name: 'App',
});
</script>

<template>
  <div class="p-4">
    <NuxtPage />
    <SCToaster :visible-toasts="4" class="pointer-events-auto" />
  </div>
</template>

Local (working as expected):

local.mp4

Deployed (animations broken):

deployed.mp4

Am I missing something or doing something wrong? Thanks in advance.

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 817.11 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    Yarn: 4.7.0 - ~/.nvm/versions/node/v22.13.0/bin/yarn
    npm: 11.0.0 - ~/.nvm/versions/node/v22.13.0/bin/npm
    bun: 1.1.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 137.0.7151.120
    Safari: 18.5
  npmPackages:
    nuxt: ^3.17.6 => 3.17.6 
    shadcn-nuxt: 2.2.0 => 2.2.0 
    vue: latest => 3.5.17

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions