"this.$waveui.notify" not compatible with vite and vue3

[fxxhhhhhhh]

Can not use "this.$waveui.notify" not compatible with Vite and Vue3 is there any ways to use notification function with Vite and Vue3 instead of using <w-notification>

Thank for reviewing my issue!

[antoniandre]

Hi @fxxhhhhhhh, Thanks for reporting. It's weird that the documentation itself is built with Vue 3 and Vite and the notify method works fine. I also tried to use Wave UI from npm import on another Vue 3 + Vite project and the notify works fine as well. Only the example on Stackblitz reproduces the issue that you are seeing. So I'll keep searching and will let you know when I have a fix.

[fxxhhhhhhh]

@antoniandre, Thanks for answering me. Notify method works fine on option API but my project use composition API, so it can not call this.$waveui.notify method and I also tried to use global properties as well but it's not working either.
const globals = getCurrentInstance().appContext.config.globalProperties.$waveui; globals.notify({ message: "test noti", color: "error", timeout: 0}); It has no error message but notification tab not appear on my screen I'm not sure if I correctly call the instance of waveui by using globalProperties.

Here is my demo project : https://stackblitz.com/edit/vitejs-vite-cur2qm?file=src%2FApp.vue,src%2Fmain.js ps. my project has used tailwincss and disabled waveui 's css layout

[antoniandre]

Hi @fxxhhhhhhh, could you try the latest version 2.42.0 and let me know if it works for you?

Here is how you should be able to use the notify method for composition API:

<script setup>
import { useWaveUI } from 'wave-ui'

const waveui = useWaveUI()

const notify = () => {
  waveui.notify('test!')
}
</script>

from the template: @click="notify".

Let me know if that works

[antoniandre]

I have reverted the change for now in version wave-ui@2.42.1, because it would be a major breaking change. So to try it, please specifically install npm i wave-ui@2.42.0.

Here is also a Codepen example: https://codepen.io/antoniandre/pen/gOzbVPz in this version it is using WaveUI.default but that would not stay this way.

[fxxhhhhhhh]

Thanks for your help @antoniandre

There is no error on the code and I have tried the new version that you told me but it still haven't appeared on my screen.

Here is my new use. https://stackblitz.com/edit/vitejs-vite-cur2qm?file=src%2FApp.vue

[nastefan]

Thank you for work on this @antoniandre . Amazing job! I used notifications for v2.48 like this:

import WaveUI from 'wave-ui'
export const setup_info_notify = (text = '') => {
  const wave = new WaveUI()
  wave.notify({
    message: 'Hello',
    info: true,
  })
}

After upgrade to v3.0.4 this does not work anymore. In console it says: runtime-core.esm-bundler.js:218 Uncaught TypeError: wave.notify is not a function

I tried to fix it and found the other way described above with using useWaveUI. But when I use this

import { useWaveUI } from 'wave-ui'
const waveui = useWaveUI()
export const setup_info_notify = (text = '') => {
  waveui.notify('test!')
}

console says : The requested module '/node_modules/.vite/deps/wave-ui.js?v=218e8fdf' does not provide an export named 'useWaveUI'

So I lost ability to use notifications with composition API, vite and vue 3. Could you advise me a new way of using it ? Thank you in advance!

[antoniandre]

Hi @nastefan, @fxxhhhhhhh,

Indeed, in version 3.0 I have removed the useWaveUI method in favor of inject('$waveui'). https://antoniandre.github.io/wave-ui/options-presets-and-waveui#the-waveui-helper

So now if you want to use $waveui in the composition API, you can do this:

import { inject } from 'vue'

const $waveui = inject('$waveui')
$waveui.notify('Hello!', 'info', 0)

Here is a StackBlitz showcasing the $waveui.notify() with Wave UI 3, Vue 3, and Vite: https://stackblitz.com/edit/waveui-3-ldocdb?file=src%2FApp.vue

(Also try the rating to see a notification)

Hope this makes sense, let me know if we can close this issue. :)

[antoniandre]

By the way, since you raised this point, I have updated the migration page to add this note. https://antoniandre.github.io/wave-ui/migration-from-v2-to-v3

Any feedback on Wave UI 3.0 and/or documentation is appreciated in order to complete it and make it as intuitive as possible. Just open an issue for any comment/suggestion/feedback :)

[nastefan]

Hi @antoniandre , thank you for the fast reply! Indeed, it works as you made in StackBlitz in my project too.

But I have some of my composition functions (such as notifications) in a separate js file which I use then for many components.

I am using it in the way showcasted in StackBlitz (it is yours one , slightly changed), please have a look: https://stackblitz.com/edit/waveui-3-za1wir?file=src/composition/useNotifications.js

In such way it says , "notify is not a function". And rating to see a notification not working.

Do you have some hint why it is not working from a separate file? I guess it is because of inject, but can not find a solution by myself.

[antoniandre]

Hi @nastefan, I don't think it is the best strategy to use $waveui in an external file without providing it. I would suggest that the use of $waveui, Wave UI being a UI toolkit that is directly associated to the template and DOM, should stay in a template or in the component that the template uses. Also this code example is probably simplified, but as it is there is no benefit from calling a custom notify function from another file that would just call $waveui.notify. That being said, you can still make it work if that is what you want or need for some reasons.

The complexity is that Vue does not let you use the inject function outside of the app context, from an external file, which I also understand. It will raise a warning.

But here are 2 ways to bypass the limitations:

• provide $waveui as a parameter of your show_info function, or create a class around it that is storing $waveui from its constructor.
• like shown in this StackBlitz, you could create your own useWaveUI function in main.js, and use it from useNotifications.js. In the main.js, you have access to the app context where you can pull the $waveui object. make sure you use this function after the created hook for anything related with DOM.

Let me know if you have made it work the way you wanted :)

https://stackblitz.com/edit/waveui-3-ascfjx?file=src%2Fmain.js,src%2Fcomposition%2FuseNotifications.js