Ripple broken if script is present (Nuxt3/Vue3)

[kennerstross]

Ripples on button work fine as long as there is no script in the same file. Including as little as:

Code: Select all

<script setup lang="ts">
// comment
</script>

will break the ripple (such that it no longer does anything). With this, however, the ripple still works:

Code: Select all

<script setup lang="ts"></script>

Nuxt 3
Vue 3

[tugce.kucukoglu]

I've could not replicate the issue. Please check this example https://codesandbox.io/s/dank-sky-5ko7o ... rc/App.vue

[kennerstross]

Thanks, Tugce. I guess the issue is probably involving Nuxt 3 - not just Vue 3 directly.

[tugce.kucukoglu]

So you need to use in nuxt.config.js

Code: Select all

build: {
    transpile: ['primevue']
  }

You could also check https://github.com/primefaces/primevue-quickstart-nuxt3

[kennerstross]

I've had the transpile in there all along - it doesn't seem to solve the problem. Here is my nuxt.config.js:

Code: Select all

export default defineNuxtConfig({
  modules: [
    '@sfxcode/nuxt-primevue',
  ],
  primevue: {
    config: {
      ripple: true,
      inputStyle: "filled",
    }
  },
	css: [
		'primevue/resources/themes/arya-orange/theme.css',
		'primevue/resources/primevue.css',
		'primeicons/primeicons.css',
		'primeflex/primeflex.css',
    'assets/app.css',
	],
	build: {
		transpile: ['primevue']
	},
  extend(config, ctx) {
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        exclude: /(node_modules)/,
        loader: 'eslint-loader',
      });
    }
  },
})

[tugce.kucukoglu]

Could you send us a codesandbox link or a simple repo?