Trying to use usePrimeVue().changeTheme(...) outputs "PrimeVue is not installed!" developer console

[dev-idsys-mi]

I'm using the PrimeVue Nuxt plugin for Nuxt 3 and used the official guide to install it in my app.

I'm using the usePrimeVue property and set it to true in my nuxt.conf.json like following:

  primevue: {
    usePrimeVue: true
  },

I'm trying to change the theme, like explained here using Composition API:

const themeChange = () => {
  const PrimeVue = usePrimeVue();
  PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
}

Whenever I call that function, I get following console error and nothing else happens:

Uncaught Error: PrimeVue is not installed!
    at usePrimeVue (config.esm.js:157:11)
    at themeChange (settings.vue:111:20)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:595:5)

I have also tried the alternate route and created a primevue.js plugin file with following content:

import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(PrimeVue, {ripple: true});
    //other components that you need
});

Unfortunately, it does not help. Did I forget or overlook something? Any input is appreciated. :)

[mertsincan]

Hi,

Please see; https://primevue.org/theming/#switchthemes

Could you please try with;

<script ...>
import { usePrimeVue } from 'primevue/config';

const $primeVue = usePrimeVue();

const themeChange = () => {
  $primeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
}
</script>

Best Regards,

[dev-idsys-mi]

Hi @mertsincan Thanks a lot for your quick response, this has finally worked. :)