I couldn't find it referenced in the documentation, but Vue seems to automatically strip out <style> tags in your template. For example if you have your ponent in a .js file like...

export default {
   template: (
      `<section>
         <style scoped>
            header { color: blue; }
         </style>
         <header>Hello!</header>
         ...
      </section>`
   ),
   // data, methods, etc.
};

...then your header will not be blue; the style will disappear with the warning "Tags with side effect (<script> and <style>) are ignored in client ponent templates."

Yet if you are using a .vue file and the vue cli, you are generally encouraged to have three sections - <style scoped> for your CSS, <script> for your JavaScript, and <template> for your HTML template.

Unless there is some other (undocumented?) way to set the style via a ponent's config parameters, there are two different paradigms - one for a ponent in js and one for vue ponents. Why is this? Is there another way for non-vue-cli users to get ponent-scoped styles into their vue app?

I couldn't find it referenced in the documentation, but Vue seems to automatically strip out <style> tags in your template. For example if you have your ponent in a .js file like...

export default {
   template: (
      `<section>
         <style scoped>
            header { color: blue; }
         </style>
         <header>Hello!</header>
         ...
      </section>`
   ),
   // data, methods, etc.
};

...then your header will not be blue; the style will disappear with the warning "Tags with side effect (<script> and <style>) are ignored in client ponent templates."

Yet if you are using a .vue file and the vue cli, you are generally encouraged to have three sections - <style scoped> for your CSS, <script> for your JavaScript, and <template> for your HTML template.

Unless there is some other (undocumented?) way to set the style via a ponent's config parameters, there are two different paradigms - one for a ponent in js and one for vue ponents. Why is this? Is there another way for non-vue-cli users to get ponent-scoped styles into their vue app?

• javascript
• css
• vue.js
• vuejs3

• Probably a security thing. Both are subject to injection. – isherwood Commented Oct 12, 2020 at 19:54
• Doing this in template string would require template piler to be considerably more plicated than it already is. Is there another way for non-vue-cli users to get ponent-scoped styles into their vue app? - see stackoverflow./questions/42765262/… . – Estus Flask Commented Oct 12, 2020 at 21:11
• Another way would be to delegate scoping to CSS module loader and use generated class names as :className="importedClassName", see webpack.js/loaders/css-loader/#scope . That's is how it's usually done in React , medium./@0n3z3r0n3/… – Estus Flask Commented Oct 12, 2020 at 21:15

3 Answers 3

It may be too late to give you a solution, but I think it's not too late for others who may encounter the same problem.

You can work around the problem by using Vue's tag, like this:

<ponent is="style" scoped>
    .pager.inactive {
        display: none;
    }
</ponent>

It will at least work for the tag. may be problematic. In addition, I don't know if loading an external CSS file would work. Personally, I would avoid doing that because if your ponent bee to big that you need a separate CSS file, you probably should break down your ponent into multiple smaller ponent.

The reason is that there are two different paths for rendering the content, pre-piled, and run-time-piled.

When you're using the CLI to pile the SFCs (Single File Component, or .vue file) the piler will generate the appropriate css file(s) as needed. It will also convert the content of the template into JavaScript code, so the HTML template code is piled out, and the rendering is handled through the generated js bundle.

On the other hand if you're relying on vue to run-time pile your template, then the piling of css is not supported for several reasons, such as requiring additional dependencies and not being able to generate a css file, which would make injecting css ambiguous.

If you want to be able to inject css into the page though, there's nothing preventing you from injecting the css manually. You could do this by defining a <template> (or other tag) that would hold the style, and then you can have the ponent inject a scoping id before each selector and then inject the script into the html. It's not an out-of-the-box solution, and may need some work to reliably handle all selectors, but it's possible.

The Short Answer:

"Templates have pile-time optimizations."

Reference

The Longer Answer:

"While Vue's declarative rendering model abstracts away most of the direct DOM operations for you, there may still be cases where we need direct access to the underlying DOM elements. To achieve this, we can use the special ref attribute:"

<input ref="input">

"ref is a special attribute, similar to the key attribute discussed in the v-for chapter. It allows us to obtain a direct reference to a specific DOM element or child ponent instance after it's mounted. This may be useful when you want to, for example, programmatically focus an input on ponent mount, or initialize a 3rd party library on an element."

Reading a bit on the Vue forums I found this too

Aug '19 vue-loader (and Vue template piler Vue.pile(..) 14) both will filter out any tags that is encounters.

A simple solution to get around this, is to take advantage of Vue’s built-in ponent

API v2 Reference