[Bug Report] Failed to resolve directive: ripple

[canassa]

Environment

Vuetify Version: 2.3.10
Vue Version: 2.6.12
Browsers: Chrome 85.0.4183.102
OS: Mac OS 10.15.6

Steps to reproduce

• Use a v-data-table with the "show-select" enabled

Expected Behavior

No errors should be displayed

Actual Behavior

Vue displays a warning:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: ripple

Reproduction Link

https://gist.github.com/canassa/0688187cc157bd20d4a8c967c1157479

[maxkobzev]

The same issue. It comes from v-simple-checkbox, adding v-ripple or :ripple="false" to the v-simple-checkbox component solves these warning. But it should work from the box.

[jacekkarczmarczyk]

workaround:

// main.js
import Ripple from 'vuetify/lib/directives/ripple';
Vue.use(Vuetify, {
  directives: {
    Ripple,
  },
});

[ferm10n]

Potentially related: I had the same error, but it wasn't on a v-data-table. It happened because I was trying to use it in a functional component

[chrmorqmatic]

jacekkarczmarczyk workaround on main.js didn't work for me, :ripple="false" on v-simple-checkbox worked

[Ced-Sharp]

I created a derivative of v-data-table which makes use of "vuedraggable" (SortableJS).
Since I needed to use the "body" slot, I had to manually add the v-simple-checkbox.
As per @chrmorqmatic post above, :ripple="false" is what made it work for me.

If I use v-checkbox instead, I don't have that issue (but then styling is utterly broken).
Maybe this is an actual bug ?

[reynard80]

I'm also getting the ripple warning when using v-simple-checkbox in my v-data-table. The ripple is shown though.

Setting :ripple="false" works, but then no ripple is shown, making it inconsistent with other checkboxes. I'd rather not disable all checkbox ripples. After all, it's part of the material design.

Will this be fixed?

[Chickenbreadlp]

:ripple=false didn't seem to fix it in my case (maybe the checkbox being disabled still causes the issue?) and adding the main.ts workaround caused the TypeScript Parser to complain.
Ignoring the error through adding a @ts-ignore (and an eslint-disable-next-line on the line before), the workaround did fix the issue. It ain't pretty so hopefully this bug can be fixed soon.

[patrick-99]

workaround:

// main.js
import Ripple from 'vuetify/lib/directives/ripple';
Vue.use(Vuetify, {
  directives: {
    Ripple,
  },
});

I used for Vuetify 2.4.5:
import { Ripple } from 'vuetify/lib/directives';

[luancardosolc]

The same issue. It comes from v-simple-checkbox, adding v-ripple or :ripple="false" to the v-simple-checkbox component solves these warning. But it should work from the box.

thank you so much, works just fine!

[johnleider]

Is this still occurring as of v2.6?

[maxkobzev]

Yes, it's still here, just checked with v2.6.1

[johnleider]

Yes, it's still here, just checked with v2.6.1

Can you provide me with your reproduction steps?

[maxkobzev]

sorry for the late reply, was busy and it's not too easy to reproduce outside of a real project
https://codesandbox.io/s/v-simple-checkbox-f265h?file=/src/App.vue:675-753 - here are the main reproduction steps
and looks like it appears only when using vuetify-loader

[KaelWD]

vuejs/vue#12590 allows this to work with vue 2.7+

[BorisDmv]

Had the same problem but adding the :ripple="false" to the simple checkbox fixed it...Super weird

[pciavald]

I'm having this issue with VTreeviewItem in a VTreeview, is there a workaround ?

    "nuxt": "^3.12.4",
    "vue": "latest",
    "vuetify-nuxt-module": "^0.16.1"

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module',
  ],
}

(Had to explicitly import it as it seems support is recent for vue3)

import { VTreeview } from 'vuetify/labs/VTreeview';
export default {
  components: { VTreeview },
}

EDIT:

fixed it with this plugins/vuetify.js, I get override warnings though

import { createVuetify } from 'vuetify'

// import * as components from 'vuetify/components'
// import * as directives from 'vuetify/directives'

import { Ripple } from 'vuetify/directives';
import { VTreeview } from 'vuetify/labs/VTreeview'

const vuetify = createVuetify({
  // directives,
  // components: {
  //   ...components,
  //   VTreeview
  // },

  components: {
    VTreeview,
  },
  directives: {
    Ripple,
  },
});

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vuetify)
})

[johnleider]

@yuwu9145 #12224 (comment) can you look into this since you've been in treeview lately?

[KaelWD]

TreeviewItem is just a ListItem, you may have two copies of vue loaded somehow.

[pciavald]

for now i've proceeded to make my own treeview with a custom recursive component, but i'll keep updated here so i can check back when vuetify treeview reaches stable status. Related to #19907

In case that helps someone else:

<template>
  <div class="tree">
    <div
      v-for="node in nodes"
      :key="node.path"
      class="group"
    >
      <div class="item" @click="select(node)" :class="{ selected: navigation.split(':')[1] === node.path }">

        <div :style="{ width: 10 + level * 10 + 'px' }"></div>

        <div class="prepend" @click.stop="open(node)">
          <v-icon color="secondary" v-if="node.opened">
            mdi-folder-open
          </v-icon>
          <v-icon color="secondary" v-else-if="!node.nodes">
            mdi-folder-open
          </v-icon>
          <v-icon color="secondary" v-else>
            mdi-folder
          </v-icon>
        </div>

        <div class="label">
          {{ node.label }}
        </div>

        <div class="append">
          0
        </div>
      </div>

      <div v-if="node.nodes && node.opened">
        <treeview
          :nodes="node.nodes"
          :level="level + 1"
          :navigation='navigation'
          @list="$emit('list', $event)"
        />
      </div>

    </div>
  </div>
</template>

<script>
export default {
  props: ['nodes', 'level', 'navigation'],
  methods: {
    open(node) {
      if (node.nodes) {
        node.opened = !node.opened
      } else {
        this.select(node)
      }
    },
    select(node) {
      this.$emit('list', node.path)
    }
  },
}
</script>

[yuwu9145]

@pciavald try https://github.com/vuetifyjs/vuetify/releases/tag/v3.6.13-3.7.0-beta.0.0