<nav class="left-side">
this is my HTML tag. But on browse, I am getting
<nav v-d-asd0fd class="left-side">
can anybody tell from where does v-d-asd0fd generates? This same thing is also applied in CSS .plese help to find this
When Webpack processes your project it's "Scoping" the CSS. Basically it means that each component's classes are unique to that component and can't fight with other classes. So you could have left-side in different components with different styles.
Vue CSS Scope documentation.
You can change it by removing the word scoped from your Style tag
<style scoped> to <style>
Related
I work with Liferay and sometimes I need to build models.ftl, it's including put all the code in a single file. Is it possible to automate this process? I have already searched and the only way I found is to put script tag with src, not the script inline.
Individuals files
/js/script.js
/css/style.css
Index.ftl
Should be:
Index.ftl
<style>
style here
</style>
<div>
html tags here with freemarker.
</div>
<script>
code here
</script>
Is there any way to make two different files for HTML and components in Vue.js? Meaning the HTML code is in a different file from the component's code like with Angular.
If your goal isn't to avoid precompilation, you can still use single-file components and split the js and css into different files. They include an example of this structure in the docs.
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
Can I have a Vue component where the template is found in an external file (.html)? Can we do the same with the style (.scss)?
This will assist our development where we can have front-end HTML devs work on the HTML and styling and the javascript devs can work on the component logic and behavior.
Is it possible to reference/import a template and style in a vue component?
The answer is yes, but the entry for you component would contain a template, not a script. From Single File Components section of Vue.js docs:
Even if you don’t like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
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
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