Disable ripple effect on vuetify components globally

Question

I'm using vuetify on my application. The design team create a flat design and I want to change the theme of vuetify to match with mockups

I try to find an option to disable ripple effect easily all over the application but it doesn't exist.

I try to create a component extension to avoid repeating :ripple="false"on each component I use.

I'll take a button component as an example.

<v-btn :ripple="false">My Button</v-btn>

each button on my application need to have ripple=false My aim is to create a component like this

<my-button>My Button</my-button>

I try to extend v-btn in another component like this.

<template>
    <v-btn v-bind="options" :ripple="false"></v-btn>
</template>

<script>
  import { VBtn } from 'vuetify';

  export default {
  name: 'MyButton',
  extend: VBtn,
  computed: {
    options() {
      return this.props;
    },
  },

};

</script>

<style scoped>

I try this way to avoid copy/paste all the props of v-btn.

All solutions that I've tried failed.

Answer 1

You can modify Vue.js components globally even after they've been registered.
In this case, you can simply do this :

const VBtn = Vue.component('VBtn')
VBtn.options.props.ripple.default = false

You can add that in your vuetify.js file before the export default new Vuetify (...) for instance.

- Tested with Vuetify 2.1.14