Nuxt•7d ago

Hello

I'm looking for wrapping useToast, I need some types like ToastInterface and NotificationColor but I can't seem to be able to find them How do I import useToast types in my plugin or composable ? Thanks 🙂

4 Replies

kapa.ai•7d ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! I'd be happy to help you with your question about importing useToast types in Nuxt. Based on the knowledge sources provided, there isn't specific information about importing types for useToast or ToastInterface and NotificationColor. However, I can provide some general guidance based on Nuxt's composables and plugins structure. To use useToast in a plugin or composable, you would typically import it from the auto-generated imports. However, for typing purposes, you might need to declare the types explicitly. Here's a suggestion on how you might approach this: 1. First, create a plugin or composable file, for example plugins/toast.ts or composables/useCustomToast.ts. 2. In this file, you can import and use useToast as follows:

import { useToast } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  // Your custom toast logic here
})

import { useToast } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  // Your custom toast logic here
})

or for a composable:

import { useToast } from '#imports'

export const useCustomToast = () => {
  const toast = useToast()
  // Your custom toast logic here
  return {
    // Your custom methods
  }
}

import { useToast } from '#imports'

export const useCustomToast = () => {
  const toast = useToast()
  // Your custom toast logic here
  return {
    // Your custom methods
  }
}

3. For the types you're looking for, such as ToastInterface and NotificationColor, you might need to declare them yourself if they're not exported by the Nuxt UI library. You could create a types file, for example types/toast.d.ts:

declare module '#app' {
  interface ToastInterface {
    // Define your toast interface here
  }

  type NotificationColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' // adjust as needed
}

export {}

declare module '#app' {
  interface ToastInterface {
    // Define your toast interface here
  }

  type NotificationColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' // adjust as needed
}

export {}

4. Make sure to include this types file in your tsconfig.json if it's not automatically picked up. Remember that you need to run nuxi prepare, nuxi dev, or nuxi build for Nuxt to generate the type declarations, as mentioned in the Nuxt documentation on composables (https://nuxt.com/docs/guide/directory-structure/composables#types). If you need more specific type information, you might want to check the source code of the Nuxt UI library or consult their documentation directly, as the provided knowledge sources don't contain detailed type information for useToast. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kogratte•5d ago

Types can be imported using

import { POSITION, TYPE, useToast } from "vue-toastification";
import type { ToastOptions } from "vue-toastification/dist/types/types";

import { POSITION, TYPE, useToast } from "vue-toastification";
import type { ToastOptions } from "vue-toastification/dist/types/types";

OmnislashOP•18h ago

Thanks for your answer 🙂 I tried but I seem unable to import from 'vue-toastification' Am I suppose to install anything or it should be part of nuxt already ?

Gaming

Programming

Hello