Vue.js (v3): How to have a unique data-v-* hash for each component instance

Question

I have the following code:

blah-foo.vue:

    <template>
      <div>Hello {{ name }}</div>
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue';
    
    export default defineComponent({
      props: {
        name: {
          type: String,
        }
      },
    });
    </script>

   <style scoped>
     div {
       color: white;
     }
   </style>

and App.vue:

<template>
 <blah-foo
    name="Alice"
  ></blah-foo>
  <blah-foo
    name="Bob"
  ></blah-foo>
</template>

The result in my browser is the following:

<div data-v-73bdd40c>Hello Alice</div>
<div data-v-73bdd40c>Hello Bob</div>

Is there any way I could tell the vue loader to generate an unique data-v-* attribute for each of them ?

What is happening in production is that since the component blah-foo is called on many different lazy-loaded pages, I end up having many times

div[data-v-73bdd40c] {
 color: white;
}

all overriding each other. That isn't a problem in itself, it just does seem very disgraceful (code wise) after having loaded a few pages when inspecting elements.

A quick solution is to use v-deep or :deep

power-cut
– power-cut

2023-01-06 08:28:25 +00:00
Commented Jan 6, 2023 at 8:28 — power-cut
– power-cut, Commented Jan 6, 2023 at 8:28

Kapcash · Accepted Answer · 2023-01-06 09:27:13Z

1

That is not possible with vue-loader. And it shouldn't be done anyway.
The whole point of the data-v-xxx attribute is to identify the components in the DOM so vue can apply to them the correct scoped css.

If it ever applied uniq data-v attributes, it would not be able to apply the correct css.

I understand your problem is that, on production, you see in the css inspector several times the css code, right?

My guess is that it's related with sourcemaps, which may mess with the css inspector. But I can't help more without additional details on your project configurations.

Even if your component is used on several pages, its module will be fetched and loaded only once. You don't have the scoped css loaded several times, it's just an inspector problem.

answered Jan 6, 2023 at 9:27

Kapcash

6,9822 gold badges22 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Vue.js (v3): How to have a unique data-v-* hash for each component instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related