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?

cdignam · Accepted Answer · 2017-03-09 17:39:07Z

50

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>

answered Mar 9, 2017 at 17:39

cdignam

1,4442 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

B M Over a year ago

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 Over a year ago

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 Over a year ago

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

e-e · Accepted Answer · 2018-01-17 18:04:28Z

3

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.

answered Jan 17, 2018 at 18:04

e-e

1,3011 gold badge13 silver badges23 bronze badges

1 Comment

D V Yogesh Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related