Vuetify: v-ripple can only be used on block-level elements

Question

I just started getting this error today, and it broke my whole site (because like a fool I'm loading Vuetify on page load).

Does anyone know what this means or how to fix it? Googling around didn't reveal anything helpful.

Edit:

To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

And solved the problem by importing it from the installed package instead with

import 'vuetify/dist/vuetify.min.css'

in app.js.

I'm still interested in learning about this v-ripple business, though.

Answer 1

I got into the same problem and I solved by installing

material-design-icons-iconfont

Run the following command to install:

npm install material-design-icons-iconfont

or, if you are running from yarn then:

yarn add material-design-icons-iconfont

Now import in main.js file:

import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

You can read the vuetify documentation for more information: Vuetify Documentation

Answer 2

I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:

@charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.

It looks like they bumped the dist version (I'm working with 1.5.12). I updated my link href to:

https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css

...and my site was put back together again. It's probably better practice to bring it in as a module but that'll be something for the backlog. Hope this helps somebody.