Vue Loader

lastmod 2021-09-01created 2020-06-1520 edits

webpack loader for Vue Single-File Components.

Features

The following are some of the useful features provided by vue-loader.

• Supports ES2015 by default.
• You can use a different webpack loader for each Vue component. For example,<style>

  can be set to Sass and <template> to Jade.

• Static asset files referenced in <style>

  and <template> are treated as modules and processed by webpack loaders.

• Can simulate scoped CSS for each component.
• Supports component hot reloading during development.

In short, the combination of webpack and vue-loader provides a modern, flexible, and very powerful working environment for building Vue.js applications.

Single File Components

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

Scoped CSS

• Scoped CSS | Vue Loader
• vue style scoped

For example, something like this:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

When a vue style has the scoped attribute, the CSS applies to elements of the current component.

How it works

A scoped style like the following works like Shadow DOM.

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

The final style is added as follows.

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div data-v-f3f3eg9 class="example">hi</div>
</template>

So it looks for Elements with the example class that have the data-v-f3f3eg9 attribute.

Deep Selector

• Scoped CSS # Deep Selectors
• Scoped CSS, deep selector
• Stackoverflow - Vuetify - CSS not working (taking effect) inside component

To make a selector in scoped styles "deep" (i.e., affecting child components), you can use the >>> combinator.

<style scoped>
.a >>> .b { /* ... */ }
</style>

The above is compiled into:

.a[data-v-f3f3eg9] .b { /* ... */ }

Some preprocessors such as Sass may not be able to parse >>> properly. In those cases you can use the /deep/¹ or ::v-deep combinator instead. Both are aliases for >>> and work exactly the same. Based on the example above, these two expressions compile to the same output.

<style scoped>
.a::v-deep .b { /* ... */ }
</style>

<style scoped>
.a /deep/ .b { /* ... */ }
</style>

Sample code list:

• V-data-table - How to change the row cursor.
• Vuetify#How to apply custom styles that change automatically with the theme

Troubleshooting

Scoped style not applied in a Vue component

Use #Deep Selector.

See also

• Vue.js
• Webpack

Favorite site

• Introduction · vue-loader
• Github - vue-loader
• Single File Components — Vue.js
• Loader | Webpack Handbook
• Options Reference · vue-loader

References