如何在集成Vuetify的NuxtJS项目中全局禁用组件涟漪效果

你之前编写的配置嵌套层级不符合@nuxtjs/vuetify模块的配置Schema，vuetify.button.disableRipple 不是Vuetify官方定义的全局配置节点，模块在加载时会直接忽略这部分无效配置，完全不会触发生效逻辑。

根据你当前Nuxt项目对应的Vuetify版本，选择匹配的配置写法即可：

方案1：适配Nuxt3 + Vuetify3 （当前新建项目默认选中的版本组合） #

Vuetify3 提供了 defaults 全局配置入口，可直接覆盖所有组件的默认属性，统一关闭ripple效果的配置写法如下：
在 nuxt.config.js 中修改对应节点：

export default defineNuxtConfig({
  // 其余项目原有配置保持不变
  vuetify: {
    defaults: {
      // 按钮组件关闭ripple
      VBtn: {
        ripple: false
      },
      // 列表项组件关闭ripple
      VListItem: {
        ripple: false
      },
      // 可点击卡片组件关闭ripple
      VCard: {
        ripple: false
      },
      // 其余带ripple交互的组件都可在此统一配置，无需逐页面编写属性
    }
  }
})

注意点：

• 此处的ripple属性等效于旧版本的disableRipple，设置为false即可全局关闭对应组件的默认涟漪效果
• 配置优先级低于单个组件内的显式属性声明，后续如果需要在特定组件上恢复涟漪效果，直接在组件标签上写:ripple="true"即可

方案2：适配Nuxt2 + Vuetify2 老项目场景 #

Vuetify2 没有组件级的全局默认属性覆盖入口，可通过全局禁用ripple指令的方式实现全量关闭，配置写法为：

export default {
  // 其余项目原有配置保持不变
  vuetify: {
    directives: {
      Ripple: {
        disable: true
      }
    }
  }
}

注意点：

• 该写法会全局拦截所有绑定了ripple指令的组件交互效果，无需逐个组件单独配置
• 若需要在特定组件上恢复涟漪效果，直接在组件标签上声明v-ripple="true"即可

• 所有Vuetify相关配置必须严格匹配模块的配置Schema，自定义嵌套的无效节点会被模块静默忽略，不会抛出报错提示
• 调整完vuetify模块配置后，需要重启Nuxt开发服务才能生效，热更新无法加载模块层的配置变更
• 不要将全局ripple配置写到vuetify.theme等无关节点下，否则完全不会生效

内容的提问来源于stack exchange，提问作者MrSrv7