Set directive v-ripple component

[MaximeStl]

Hi, thanks for this directive. How can y set v-ripple on component before define it globally ?

I have a b-btn like this : And i want to set v-ripple directive for all my buttons so after it should be :

My libs configuration for v-ripple is : import Ripple from 'vue-ripple-directive'

Ripple.color = 'rgba(255, 255, 255, 0.35)' Ripple.zIndex = 55

export default Ripple

And before set BButton globaly i do that : import Vue from 'vue' import { BVConfigPlugin, BSidebar, BOverlay, BTable, BButton, BFormDatepicker, BRow, BCol, } from 'bootstrap-vue' import Ripple from './vue-ripple-directive' import i18n from '@/libs/i18n'

Vue.use(BVConfigPlugin, { BSidebar: { backdrop: true, bgVariant: 'white', lazy: true, noHeader: true, right: true, shadow: true, sidebarClass: 'sidebar-lg', }, BOverlay: { rounded: true, spinnerSmall: true, spinnerVariant: 'primary', }, BTable: { // emptyText: i18n.t('common.no_record_found'), responsive: true, showEmpty: true, hover: true, }, BButton: { variant: 'primary' }, BFormDatepicker: { // locale: i18n.locale, dateFormatOptions: { year: 'numeric', month: 'short', day: '2-digit', weekday: 'short', }, menuClass: 'w-100', calendarWidth: '100%', }, BRow, })

BButton.directive('ripple', Ripple)

Vue.component('BSidebar', BSidebar) Vue.component('BOverlay', BOverlay) Vue.component('BTable', BTable) Vue.component('BButton', BButton) Vue.component('BFormDatepicker', BFormDatepicker) Vue.component('BRow', BRow) Vue.component('BCol', BCol)

But it's not work...

Can you help me ?