Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] Failed to resolve directive: ripple #12224

Closed
canassa opened this issue Sep 14, 2020 · 21 comments · May be fixed by belov38/vuetify#1
Closed

[Bug Report] Failed to resolve directive: ripple #12224

canassa opened this issue Sep 14, 2020 · 21 comments · May be fixed by belov38/vuetify#1
Assignees
Labels
C: VCheckboxBtn VCheckboxBtn has workaround T: bug Functionality that does not work as intended/expected
Milestone

Comments

@canassa
Copy link

canassa commented Sep 14, 2020

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

@ghost ghost added the S: triage label Sep 14, 2020
@maxkobzev
Copy link

maxkobzev commented Sep 15, 2020

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
Copy link
Member

workaround:

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

@jacekkarczmarczyk jacekkarczmarczyk added T: bug Functionality that does not work as intended/expected has workaround and removed S: triage labels Oct 3, 2020
@ferm10n
Copy link

ferm10n commented Nov 30, 2020

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
Copy link

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

@avxkim

This comment has been minimized.

@Ced-Sharp
Copy link

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
Copy link

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
Copy link

: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
Copy link

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
Copy link

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!

belov38 added a commit to belov38/vuetify that referenced this issue Oct 5, 2021
@johnleider
Copy link
Member

Is this still occurring as of v2.6?

@maxkobzev
Copy link

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

@johnleider
Copy link
Member

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

Can you provide me with your reproduction steps?

@maxkobzev
Copy link

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 KaelWD added this to the v2.7.0 milestone Jun 29, 2022
@KaelWD KaelWD self-assigned this Jun 29, 2022
@KaelWD KaelWD modified the milestones: v2.7.0, v2.6.x Jul 25, 2022
@KaelWD KaelWD closed this as completed in 00a9668 Jul 25, 2022
@KaelWD
Copy link
Member

KaelWD commented Jul 25, 2022

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

@BorisDmv
Copy link

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

@KaelWD KaelWD added the C: VCheckboxBtn VCheckboxBtn label May 25, 2023
@pciavald
Copy link

pciavald commented Jul 29, 2024

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
Copy link
Member

johnleider commented Jul 30, 2024

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

@KaelWD
Copy link
Member

KaelWD commented Jul 30, 2024

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

@pciavald
Copy link

pciavald commented Jul 30, 2024

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:

image

<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
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VCheckboxBtn VCheckboxBtn has workaround T: bug Functionality that does not work as intended/expected
Projects
None yet