CODEWITHSUNDEEP
cssvuejs2
Radius Kuntoro
Radius Kuntoro

Reputation: 448

<style> tag not working within a vue.js element

Example:

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  Hello {{name}}
  <style>
  body { color: blue; }
  </style>
</div>

JS Fiddle: https://jsfiddle.net/7g1vp68b/6/

When tag is outside of the vue element, it renders okay.

Upvotes: 0

Views: 5810

Answers (1)

ittus
ittus

Reputation: 22403

Vue can't parse <style> inside template.

If you check console log, there is an warning:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as

, as they will not be parsed.

You should place <style></style> outside of Vue template, or using Vue single file component

Upvotes: 5

Related Questions