parakoopa
parakoopa
PostsComments
NNuxt
Created by parakoopa on 2/3/2025 in #❓・help
Toast config Nuxt UI
Cannot seem to get my Toast notifications to show anywhere but across the entire bottom of the screen... Is there some config I am missing? I am reading the docs and it seems this should work 🧐 . Any help is appreciated! app.config.ts 
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 bottom-[unset]',
        }
    }
})
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 bottom-[unset]',
        }
    }
})
login.vue 
// omited
watch(isError, (newValue) => {
  console.log(newValue)
    if (newValue) {
        toast.add({
          title: 'Login failed. Please try again.',
          color: 'red',
          timeout: 5000,
        },
      );
    }
});
// omited
watch(isError, (newValue) => {
  console.log(newValue)
    if (newValue) {
        toast.add({
          title: 'Login failed. Please try again.',
          color: 'red',
          timeout: 5000,
        },
      );
    }
});
nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  ssr: false,
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', "@nuxt/ui"],
  googleFonts: {
    families: {
      "Gothic A1": {
        wght: [100, 200, 300, 400, 500, 600, 700, 800, 900],
        regular: true,
      },
    },

  },
  tailwindcss: {
    exposeConfig: true,
    config: {
      theme: {
        fontFamily: {
          "sans": ["Gothic A1", "sans-serif"],
        },
        extend: {
          dropShadow: {
            brutal: "5px 5px 0px black"
          }
        }
      }
    }
  },
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  ssr: false,
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', "@nuxt/ui"],
  googleFonts: {
    families: {
      "Gothic A1": {
        wght: [100, 200, 300, 400, 500, 600, 700, 800, 900],
        regular: true,
      },
    },

  },
  tailwindcss: {
    exposeConfig: true,
    config: {
      theme: {
        fontFamily: {
          "sans": ["Gothic A1", "sans-serif"],
        },
        extend: {
          dropShadow: {
            brutal: "5px 5px 0px black"
          }
        }
      }
    }
  },
})
9 replies