Using Nuxt 3: the toast didn't appear in production (static)

rootchips commented 1 year ago

Hi, I'm using Nuxt 3.

The package works on local and the toast is appear when I submit the form.

But when I deployed into production using static web npx nuxi generate, the toast didn't appear.

Is there I missing the config? I'm following this structure provided by you

https://stackblitz.com/edit/nuxt-starter-1gszqs?file=app.vue,plugins%2Fvue3-toastify.ts

jerrywu001 commented 1 year ago

npx nuxt generate

npm run start

then

@rootchips click open in new tab, it's ok~

rootchips commented 1 year ago

Hi, found the root cause issue

I'm using tailwindcss

The toast appear at bottom in the page.

Is there I need to set the option styling to make it appear like normal?

Hi, thanks for reply.

Btw, I'm using nginx and run by ssr: false. I just deploy .output content only

So there's no npm in production server

This is my nginx config
server {
    listen 80;
    server_name domain.com;

    root   /srv/apps/web/.output/public;

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

rootchips commented 1 year ago

Hi, found the root cause issue

I'm using tailwindcss

The toast appear at bottom in the page.

Is there I need to set the option styling to make it appear like normal?
Hi, thanks for reply. Btw, I'm using nginx and run by ssr: false. I just deploy .output content only So there's no npm in production server This is my nginx config
server {
    listen 80;
    server_name domain.com;

    root   /srv/apps/web/.output/public;

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Updated for the current issue

Screenshot 2023-07-28 at 12 43 01 PM

jerrywu001 commented 1 year ago

I follow the steps above, start the server from nginx use .output/public, everything is ok @rootchips

export default defineNuxtConfig({
    ssr: false,
});

plugins/vue3-toastify.ts

import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 3000 });

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

<template>
  <Html>
    <Head>
      <Title>index</Title>
    </Head>
  </Html>
  <div
    class="bg-white font-montserrat h-100vh p-6 dark:bg-slate-900 dark:text-white/80"
  >
    <div mt-20 text-center flex select-none all:transition-400>
      <div ma>
        <div
          text-5xl
          fw100
          animate-bounce-alt
          animate-count-infinite
          animate-1s
        >
          unocss
        </div>
        <div op30 text-lg fw200 m1>
          The instant on-demand Atomic CSS engine.
        </div>

        <button @click="notify">notify by click</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: false,
  key: 'index',
});

nextTick(() => {
  if (process.client) {
    useNuxtApp().$toast('notify after nextTick');
  }
});

const notify = () => {
  useNuxtApp().$toast.info('toastify success');
  // or
  // toast.info('toastify success');
};
</script>

jerrywu001 commented 1 year ago

Did you forget to import the style in plugins/vue3-toastify.ts? @rootchips

import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css'; // <----- here

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 3000 });

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

rootchips commented 1 year ago

Did you forget to import the style in plugins/vue3-toastify.ts? @rootchips

import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css'; // <----- here

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 3000 });

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

Hi, I already import the css file.

Below is my vue3-toastify.js and nuxt.config.js

import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.globalProperties.Vue3Toastify = {
    install: () => {
      updateGlobalOptions({ autoClose: 1000 });
    },
  };

  return {
    provide: { toast },
  }
})

nuxt.config.js

export default defineNuxtConfig({
      ssr: false,
      // routeRules: {
      //       '/admin/users': { ssr: false },
      //       '/admin/content/**': { ssr: false },
      //       '/auth/account/**': { ssr: false },
      // },
      runtimeConfig: {
            public: {
                  apiBase: process.env.API_URL
            }
      },
      pages: true,
      experimental: {
            payloadExtraction: false
      },
      postcss: {
            postcssOptions: {
                  plugins: {
                        tailwindcss: {},
                        autoprefixer: {},
                  },
            },
      },
      css: [
            '@/assets/css/main.css',
      ],
      extensions: ['.vue'],
      modules: [
            "@nuxtjs/tailwindcss",
            "nuxt-icon",
            "nuxt-lodash",
            "@pinia/nuxt",
            "@pinia-plugin-persistedstate/nuxt",
            "nuxt-swiper",
            "nuxt-purgecss",
            "@vueuse/nuxt",
            "nuxt-lodash",
            "dayjs-nuxt",
      ]
})

Screenshot 2023-07-31 at 9 15 21 AM

jerrywu001 commented 1 year ago

Follow your latest settings

https://stackblitz.com/edit/nuxt-starter-1gszqs?file=nuxt.config.ts,pages%2Findex.vue

everything is ok @rootchips

yarn generate

rm -rf .nuxt

npx serve .output/public

jerrywu001 commented 1 year ago

can not reproduce it

rootchips commented 1 year ago

The weird part is,

When I tried to copy vue3-toastify/dist/index.css into a local file or put it in main.css file, the result is still same.

There's no .Toastify__ class in the entry.css after generate.

This is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./node_modules/flowbite.{js,ts}"
  ],
  // make sure to safelist these classes when using purge
  safelist: [
    'w-64',
    'w-1/2',
    'rounded-l-lg',
    'rounded-r-lg',
    'bg-gray-200',
    'grid-cols-4',
    'grid-cols-7',
    'h-6',
    'leading-6',
    'h-9',
    'leading-9',
    'shadow-lg',
    'bg-opacity-50',
    'dark:bg-opacity-80'
  ],
  darkMode: 'class',
  theme: {
    colors: {
      primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" },
      cidb: '#038885',
    },
    fontFamily: {
      'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
    },
    transitionProperty: {
      'width': 'width'
    },
    textDecoration: ['active'],
    minWidth: {
      'kanban': '28rem'
    },
    extend: {},
  },
  variants: {
    fill: [],
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
  plugins: [
    require('flowbite/plugin'),
    require('@tailwindcss/typography'),
  ],
}

jerrywu001 commented 1 year ago

Sorry, I don't know.

juliendu11 commented 1 month ago

I had the same problem, problem solved by importing vue3-toastify/dist/index.css into nuxt.config like this:

export default defineNuxtConfig({
    compatibilityDate: "2024-04-03",
    devtools: {enabled: true},
    components: true,
    ssr: false,
    css: ["~/assets/scss/theme.scss", "~/assets/scss/_tailwind.scss", "vue3-toastify/dist/index.css"],
})

jerrywu001 / vue3-toastify

Using Nuxt 3: the toast didn't appear in production (static) #30