Difference in HTML generated between Vue files between dev and prod

Question

I'm new to Vue and I hope someone can help. I have an app that uses Vuetify (2.2.23), and when I render it locally for development, the HTML contains:

So, v-main is a class, and it's being located in my CSS for styling. However, in another installation from the same files (I've checked the versions of everything too), I get:

So, v-main is now an element, so the CSS is not being applied.

I realise that I can duplicate my styling so that they look the same to the user, but I'd like to understand what to look for in the setup of the projects that would make this happen in the first place?

The versions I'm using are: Vue 2.6.11 Vuetify 2.2.23

Thanks in advance!

Answer 1

Why is it the thing you've checked the most is the thing that's the problem? This was a version problem after all. I used the ^ minimum requirement, and the two servers ended up using different versions. Bumping both to a minimum of Vuetify 2.3.9 solved it.

Posting this answer in case it helps someone else.