Ripple cannot appear in vue3 setup syntax

[jddk]

<script setup>

//If there is any content, it will lead to the failure of water ripple
</script>

App.vue

<template>
  <div>
    <div class="test p-ripple" v-ripple>chrome 浏览器</div>
  </div>
</template>

<script setup>
//If there is any content, it will lead to the failure of water ripple
</script>
<style>
.test {
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>

package.json

{
  "name": "vite-test",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "primeflex": "^3.1.3",
    "primeicons": "^5.0.0",
    "primevue": "3.12.5",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.2"
  }
}

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Ripple from "primevue/ripple";
import "primevue/resources/themes/saga-blue/theme.css"; //theme
import "primevue/resources/primevue.min.css"; //core css
import "primeicons/primeicons.css"; //icons
import "primeflex/primeflex.css";

let app = createApp(App);
app.use(PrimeVue, { ripple: true });
app.directive("ripple", Ripple);
app.mount("#app");

[mertsincan]

Hi,

I researched this issue and found a PR related to it in Vue core. It looks like it broke access to globalProperties variables and vnode's instances within those custom directives.
vuejs/core@f44087e

For now, you can use;

<script setup>
import { usePrimeVue } from "primevue/config";

const $primevue = usePrimeVue();
defineExpose({
     $primevue
})
</script>

Best Regards,

[mylemans]

This is apparently still an issue that costed me hours to figure out. Why isn't this document if the "solution" is to do that expose bit in EVERY of my component files that need access to this directive?

Maybe (I haven't really looked into it) a similar solution that quasar has done can be done here?

quasarframework/quasar@a28a942

[jeverduzco]

The Ripple directive in Nuxt 3 has the same problem.