I am trying to develop an application using vue.js2. I am getting some strange texts in source code. You can see those texts in below image.
Could anyone say why it is coming ?
You might be using scoped attribute on styles tag in your .vue files to scope your styling to the component only.
Any styles scoped to a component using the <styles scoped> ... </styles> , the styles will be applied only to the elements in that component only.
So vue-loader which parses the .vue files uses PostCSS behind the scenes to achieve this by add adding those weird and unique data attributes.
See Scoped CSS for more info
Related
I have an Electron app based on Vue3 SFCs. I created a separate Vue component for printing; I load it using createSSRApp and create the HTML string to print with renderToString. It basically works, but the HTML string does not contain any of the styles defined in the print component's <style> section.
The HTML string is loaded into a new Electron BrowserWindow like this:
printWnd.loadURL("data:text/html;charset=utf-8," + encodeURI(html))
This leads me to another problem: when I try to load assets from the package, e.g. CSS or fonts, the chromium engine in Electron complains about not wanting to load them since they are being referred to from a privileged level.
How can I load styles and assets into this print HTML? Or should I try a totally different approach for printing?
I have a VueJS project that has a base component that can be styled differently depending n server config. Right now I am loading CSS from the server but I was wondering if it is possible to import scoped scss in vuejs dynamically. i.e
<style src="{{style_name_or_path}}" lang="scss" scoped/>
I think it's not possible to load dynamic styles that way. I'd suggest you to use CSS Variables to handle different styles.
When creating a Single Page Application, I have had the need to reuse CSS as a string.
The need was from a library requiring passing CSS as a string and needing to also use that CSS in the page.
To achieve this, I went through 2 routes, and both failed. Referring to the style tag element should be simple, so I'll focus on this in this issue, but if anyone can solve the other route, please let me know. Regards.
Attempted routes to solve issue:
Reference style tag element. Couldn't get this to work. Even has problems using global querying because of build process destroying ids.
I tried using raw-loader to directly import, but failed. I am using Typescript so tried to import as a string but failed again.
I was able to fix my main goal of reusing the same CSS by using external css in the style tag and importing the css as a string using raw-loader.
import css from !!raw-loader!./my-css.css
...
<style src="./my-css.css">
I still do not know how to get a safe reference to the style tag, but the above solves my issue.
* The reason for the style tag not being easily referenced even via document.querySelector is that the build process seems to strip attributes.
I want to create a SPA with the white labeling capability and I am wondering if there is a way for me to dynamically change the styles tag inside a single page VueJS component?
I think I can manage the template dynamically by using something like
<div v-if="condition"></div>
But is there similar scheme available for styles ?
Can it be done without using Server Side Rendering?
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this