random "data-v-*" attribute in Vue.js components

Question

Experimenting with Vue.js the first thing I noticed is how every instance of a component that I define as single file component and include as custom element gets a random hash attribute like data-v-58fd7087="". Specifically:

• Every DOM element of every instance of a given component gets the same hash
• The hash is generated independently of the router
• The hash is stable between calls
• The hash is stable between name changes of the component
• The hash is not stored / generated on the disk
• Thus the hash is generated dynamically

Could it be generated by Karma or Webpack that are part of my Vue setup? If not, these are some surprising observations to me. It leads to two questions:

• When and how is this hash (attribute) generated?
• Why is the hash (attribute) generated?

Solution 1

Something similar occurs when using scoped CSS with Vue Loader.

I use scoped css and I have attributes like data-v-4646bc3c, so I figure that is it.

If you don't want this feature, try removing the scoped attribute from your single file components.

<style scoped>
/* local styles */
</style>

Solution 2

If you're using vueify and you're wondering why you are getting changes in your build without having changed anything, make sure you are running vueify with the process.env.NODE_ENV set to 'production'. Otherwise it generates hot-reload code that has new data-v-* hashes on every build.

Comments

[B M]

You are right! So actually the data-v-* attributes come from the vue CSS loader, if and only if using scoped CSS. They are being used as selectors to apply the CSS. Nice, thanks!

[ekqnp]

Is there a way to change this default behavior while still using scoped CSS ? Because it ends up with much bigger CSS files to load and parse...!

[B M]

@ekqnp: No - this is how scopes work, they need the hashes as selectors.

[D V Yogesh]

Do u have any idea to remove data-v-*