Search code examples
javascriptvue.jsripple-effect

How do I get the ripple effect work in Varlet UI?

I am using Vue v3.2.20 with Varlet UI v1.25.0 and Bootstrap 5 in my project. So far everything worked well, but I can't get the ripple effect working anywhere, even on the buttons. I don't get any errors or warnings in the console. A simple button declaration like this:

<var-button type="primary">Add</var-button>

shows up a default button without the ripple effect. I imported the framework in main.js as so:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import Varlet from '@varlet/ui'
import '@varlet/ui/es/style.js'

createApp(App).use(router).use(Varlet).mount('#app')

Also, I tried to add the ripple effect manually on a div per this documentation, still no luck.

Solution

  • It appeared that Varlet UI worked differently on mobile and desktop environments, so all I needed to do in order to get the ripple effect work on desktop was to install the touch emulator:

    npm i @varlet/touch-emulator

    as per the guide