CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Warrio
Warrio

Reputation: 1913

Is vuejs component's style global to other components

I have two pages:

  1. search.php that contains a vuejs component called search.vue
  2. person.php that contains another component called person.vue.

In search.vue, I have links to person.php.

How come the styles set in the component search.vue also affect the DOM in person.vue?

The style tag in my search.vue component:

<style>
  .row {
    background-color: red;
  }
</style>

There is nowhere I connect these two views except through the href link to open the person.php page.

Upvotes: 2

Views: 1160

Answers (1)

thanksd
thanksd

Reputation: 55664

Styles defined in the style tag of a Vue single-file-component will be compiled to a singular file, affecting all components.

But, you can specify a scoped attribute on the component's style tag:

<style scoped>
  .row {
    background-color: red;
  }
</style>

From the Documentation:

The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.

Note that the scoped attribute is a Vue feature for single-file-components, different from the general scoped style tag attribute, which has a similar effect but is currently only supported by Firefox.

Upvotes: 5

Related Questions