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>
Related
It's been a time since I have been programming with Vue.
But when I started entering something like vuedef in a newly created .vue file it auto-suggested me the following instead of writing it all on my own:
<template>
</template>
<script>
</script>
<style>
</style>
I can't remember how I did that but I guess it was a certain word I had to type.
Maybe it comes from an VS-Code Addon?
vuedef comes with Vetur: https://marketplace.visualstudio.com/items?itemName=octref.vetur
For any modern Vue3 apps, you can use Volar (it's officially the one to use now too): https://marketplace.visualstudio.com/items?itemName=Vue.volar
Those 2 are also quite nice:
Vue3 snippets: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
Vue snippets: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
You should have plenty of choice after that!
You can also create your own snippets of course directly into VScode: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets
I'm looking at an existing Vue code base and I am seeing <template> tags like:
<template #default>
<template #content>
<template #close>
I know each vue component is enclosed in the <template> tag but I've never seen #default or #content embedded within the template tag before. What is the purpose of this? I'm suspecting those # are customisable but you just have to define them? If that is the case, where would I be able to find it in a vue project? I'm assuming there is a standard location to store files like this in a vue project. Thank you.
# in a template tag is simply shorthand for v-slot:. See: https://v3.vuejs.org/guide/component-slots.html#named-slots-shorthand
The # is a shorthand for vue v-slot:. can read a perfect example here
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>
Before I was working with Vue2JS and I used to creating modal as just component within App.vue root component for example:
<template>
<div>
<app-navbar></app-navbar>
<router-view></router-view>
<app-footer></app-footer>
<my-modal v-if="someBoolean"></my-modal>
</div>
</template>
Now basing on some custom events or Vuex storage I was able to change someBoolean and trigger when I want modal to be visible.
Since in Nuxt we don't have such thing as root App.vue component I'm wondering how to achieve same as above but with Nuxt.
Of course I could use some package as bootstrap-vue but I don't really want to inject this big package just for that one purpose.
You can write code in layouts/default.vue file and this file works on your defaults, work the code at where you used as a layout of your pages(generally almost everywhere.)
Different approach is use portalvue to render components whereever you want. Nice article here but in Turkish.
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>