While browsing through the Vue documentation, I noticed that Vue appears to automatically remove <style> tags from your template. For instance, if you have a component in a .js file like...
export default {
template: (
`<section>
<style scoped>
header { color: blue; }
</style>
<header>Hello!</header>
...
</section>`
),
// data, methods, etc.
};
...then the style declaration for the header will not be applied; it will simply vanish with a message stating
"Tags with side effect (<script> and <style>) are ignored in client component templates."However, when using a .vue file along with the vue cli, it is recommended to separate your CSS within a <style scoped> tag, JavaScript within a <script> tag, and HTML template within a <template> tag.
If there is no other documented way to include styling via a component's configuration parameters, then we seem to have two distinct paradigms - one for components in JS files, and another for Vue components. Is there any alternative method for those who do not use the vue-cli to implement component-scoped styles in their Vue application?