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
Related
I need to know how can I add a class to "template" tag in vue.
<template
#popover
class: templateClass // Is it possible to add a class in here?
>
<router-link
v-close-popover
to="/somewhere"
>
Go to the page
</router-link>
</template>
You can't bind any classes to the template tag as the template tag itself does not render an element for itself.
What you're trying to achieve is not possible despite the comments made on the contrary.
There's a reason why Vue2 needs a root element for it's components.
Adding #templateRef to the template-tag is just a shorthand for v-slot (see What do the hash marks (#) mean in Vue?) and does basically nothing for you in this case.
I have a VueJS component and I'm trying to add translated text via Fluid tag.
<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
<h2><f:translate key="search.resultPage"/>"{{mutatedQuery}}".</h2>
</div>
The tags are displayed on frontend, but the <f:translate> tag is empty.
Assumed direction Fluid → Vue
Indeed that's tricky since Fluid does not support escape characters for inference literals like {} which are used in any other client-side frameworks like Vue or Angular as well.
case
Fluid template
rendered output
1
{{item.value}}
ø
2
{{ item.value }}
{{ item.value }}
3
{{<f:comment/>item.value<f:comment/>}}
{{item.value}}
1: empty string (we knew that already)
2: works, adding space between braces and variable name
3: works, since <f:comment/> breaks Fluid inline pattern (but it's "ugly")
Assumed Direction Vue → Fluid
It is not possible to call Fluid (server-side rendering) from Vue (client-side template & document fragment).
Alternative, combining both via slots
It is possible to use Fluid in the base template served by a web server and use slots to inject the content to Vue components, see https://v2.vuejs.org/v2/guide/components-slots.html.
Main Fluid template:
<div
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
<my-app>
<template v-slot:resultPageLabel>
<f:translate key="search.resultPage"/>
</template>
</my-app>
</div>
Vue my-app component template:
<h2>
<slot name="resultPageLabel"></slot>
"{{mutatedQuery}}".
</h2>
I didn't succeed to integrate Fluid on Vue, I think that both have different rendering engines and can not be synchronize as I wanted.
I solved this issue by adding <f:translate key="search.resultPage"/> as a data-attribute on another tag(that is not rendered in vue) and get that translates on vue component.
Is it allowed to use <template> tag inside template something like this?
I have to check some value.
<template>
<div>
<template v-for="category_field in category_fields">
<template v-if="category_field.show_type == 'new-row'">
//and also here can be more nested template tags
</template>
<template v-else>
//and also here can be more nested template tags
</template>
</template>
</div>
</template>
I am using this system in my project and wondering whether this is correct.
Yes, you can nest <template>s, and it's quite useful sometimes.
Vue's <template> is very similar to <React.Fragment>. It's a virtual container used for grouping or applying layout logic (using structural directives - e.g: v-for, v-if), without creating an actual DOM element.
Because it doesn't output a DOM element, it's used as a wrapper for SFC's HTML markup.
Technically, the limit on having only one child in Vue 2 was not coming from the <template> tag itself, but from the components, as Vue required them to have only one root element, which became the component's $el. More detail here.
Besides the typical usage of wrapping an SFC's markup, <template> tags are also used for:
combining structural directives (v-for, v-if) and letting Vue know in which order to apply the directives, as changing the order would likely change the result
applying layout or rendering logic (e.g: v-if) to multiple elements at once, without having to create an actual DOM wrapper around them, particularly useful when you don't want to break the parent/child relation of DOM elements (e.g: flex or grid parent/children, <ul>/<ol> + <li>, <tr> + <td>, <tbody> + <tr>, etc.).
reducing template boilerplate (e.g: moving the same v-if from multiple siblings on a <template> wrapper, so the condition is only written once).
Try using this. <template> require only one child.
<template v-for="category_field in category_fields">
<div>
<template v-if="category_field.show_type == 'new-row'">
//and also here can be more nested template tags
</template>
<template v-else>
//and also here can be more nested template tags
</template>
</div>
</template>
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>
Server side rendering page for reference: ssr.html
Now the problem, what if we want to define template inside the <div id="app"></div> in html file itself, not in Vue instance template property? Like this:
<div id="app">You have been here for {{ counter }} seconds.</div>
In this case if we want to pre-render it, we will get next pre-rendered html:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
And here is the conflict problem. If we will output pre-rendered html, we lose our template and Vue doesn't know where to output counter inside our <div id="app">.
Is it possible somehow to provide template inside <div id="app"></div> container and in the same time pre-render it? Or provide template near the pre-rendered in html(so Vue will know that here is pre-rendered and here is template and i will use it if any changes happens in the model)?
Is it possible somehow to provide template inside container and in the same time pre-render it? Or
Short but complete answer: No. For Vue SSR, you cannot use in-DOM templates. You have to use string-based templates (including Single File Components).