PrimeVue toast - No PrimeVue Toast provided when using utility .ts

Question

I have a vue.js app where I'm using PrimeVue for the UI. I want to have util functions for displaying toasts, but it doesn't seem to work. I have everything set up, but I'm getting the error 'No PrimeVue Toast provided!'.

    <template>
  <Toast />
  <div class="app-container">...

and the utils file:

//toastUtils.ts
import { useToast } from 'primevue/usetoast';
    
    export function showError(message: string) {
      const toast = useToast();
      toast.add({
        severity: 'error',
        summary: 'Error',
        detail: message,
      });
    }

I'm including it in the component where it's supposed to be used:

import { showError, showSuccess } from '../../utils/toastUtils';
...
showError('Failed to fetch sales channels.');

it was working when I had the useToast() method directly inside the component, but with these utility functions it doesn't work anymore. Why is that?

DarkBee · Accepted Answer · 2025-01-14 06:13:58Z

2

Instead of calling useToast() inside your utility function, call it in the component where the utility function is used, and then pass the toast instance to the utility function. For example:

Updated toastUtils.ts:

import { ToastServiceMethods } from 'primevue/usetoast';

export function showError(toast: ToastServiceMethods, message: string) {
  toast.add({
    severity: 'error',
    summary: 'Error',
    detail: message,
  });
}

export function showSuccess(toast: ToastServiceMethods, message: string) {
  toast.add({
    severity: 'success',
    summary: 'Success',
    detail: message,
  });
}

Component:

import { useToast } from 'primevue/usetoast';
import { showError, showSuccess } from '../../utils/toastUtils';

export default {
  setup() {
    const toast = useToast();

    const handleError = () => {
      showError(toast, 'Failed to fetch sales channels.');
    };

    return { handleError };
  },
};

edited Jan 14 at 6:13

DarkBee

14.5k9 gold badges83 silver badges132 bronze badges

answered Jan 11 at 13:25

Alireza Hedayati

1028 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Estus Flask · Accepted Answer · 2025-01-11 14:07:40Z

0

showError should be a part of custom composable:

export function useShowError() {
  const toast = useToast();

  return function (message: string) {
    toast.add(...);
  }
}

Which is called according to how the composables are used, i.e. in component setup:

<script setup>
const showError = useShowError();
...
showError('Failed to fetch sales channels.');
...

Also, PrimeVue toasts can be used regardless of whether they are used in a component or not, their implementation doesn't benefit from being a composable.

answered Jan 11 at 14:07

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Comments

SherylHohman · Accepted Answer · 2025-10-07 06:40:00Z

0

resolve.dedupe fixed my issue.

vite.config.js of my app:

export default defineConfig({
  ...
  resolve: {
    dedupe: [
      'primevue'
    ],
  }
})

It also solves this problem (variables missing).

edited Oct 7 at 6:40

SherylHohman

18.2k18 gold badges94 silver badges100 bronze badges

answered Oct 7 at 5:03

Alex

11 bronze badge

1 Comment

SherylHohman Oct 7 at 6:50

Welcome. Thanks for contributing. Could you edit to include an explanation of how/why your code solves the OP'S question. Links to like documentation & additional info are appreciated, but you need to also embed pertinent info from the links into your post. Otherwise if the link becomes unavailable, vital knowledge to understand your answer gets lost, which would downgrade the quality of SO. Plus users shouldn't need to click around the internet to understand what the post is meant to convey. You can read about what makes good answers/questions in SO help section.

Collectives™ on Stack Overflow

PrimeVue toast - No PrimeVue Toast provided when using utility .ts

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related