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>
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>
I see that html files in examples with Vue consist only of one root "div" element with "app" id and actually no more elements in the file. HTML elements inside are rendered as templates in js (or vue) files. And it is fine for SPA.
However, I have a multi-page application which is rendered and routed in backend (PHP) and I don't want to change it. But I would like to use Vue for some reactive elements only (e.g wizard) in the application keeping the other pages and routing as they are.
What is the best practice for it?
A) Creating a new Vue instance for every element I need. So it would be look like:
<body>
<header></header>
<div>
... other html elements ...
<div id="vue_wizard>
<div>
Could I place the html elements for the wizard here or should I render them in VUE JS files?
</div>
</div>
... other html elements ...
</div>
<footer></footer>
</body>
B) Actually I don't have any other idea for it.
<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>
What is the best way to split nuxt.js views, components (and layouts) into separate files (at design time, not after build)? With complex and large views and components I find it extremely annoying when I need to switch between template and script (to look something up, etc.).
Ideally, I would be able to define:
- foo.vue.html
- foo.vue.js
- foo.vue.css
and let the build/generate process do the rest. I am using generation of prerendered SPAs (nuxt generate) so the solution, if there is one, would have to be compatible.
You need to do it somewhat manually like described in vue docs
<!-- my-component.vue -->
<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>