Vue Tip: Change the Interpolation Delimiter
It is possible to adjust the delimiters used for text interpolation within the template to avoid conflicting with server-side frameworks that also use mustache syntax.
Vue tip1 minTemplate
Category · 43 articles
Template
Articles in the category Template.
2022
19 entriesVue Tip: Use Vue Without Build Step
When using Vue from a CDN, no "build step" is involved. This makes the setup much more straightforward and is suitable for enhancing static HTML or integrating with a backend framework.
Vue tip1 minTemplateScript
Vue Tip: Defining and Registering Vue Web Components
Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements.
Vue tip1 minTemplateScript
Vue Tip: Expose Properties in a Script Setup Component
Components using script setup are closed by default and will not expose any of the bindings declared inside script setup.
Vue tip1 minTemplateScript
Vue Tip: Expose Slots From a Child Component
Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost.
Vue tip1 minTemplateSlots
Vue Tip: Typing Template Refs With TypeScript
Template refs only exist after the component is mounted. Thus, it’s necessary to type template refs with a union type that includes the DOM element type as well as null.
Vue tip1 minTemplateScript
Vue Tip: Creating a Custom Directive
In addition to the default set of directives like v-model or v-show, you can also register your own custom directives.
Vue tip2 minTemplate
Vue Tip: Avoid Directly DOM Manipulation
It is a no-go to manipulate the DOM in Vue.js directly. Instead, you should use the "ref" attribute.
Vue tip1 minTemplateScript
Vue Tip: Use Vue App Instance as Global Store
Vue provides an object that can be used to register global properties that can be accessed on any component instance inside the application.
Vue tip1 minTemplateScript
Vue Tip: When to Use v-if
v-if has higher toggle costs while v-show has higher initial render costs.
Vue tip1 minTemplate
Vue Tip: Avoid Empty Wrapper for Conditions
There are many situations when you need to conditionally display multiple Vue components. To avoid "empty" wrappers you should use not use HTML tags.
Vue tip1 minTemplate
Vue Tip: Delay Loading Appearance of Spinner
Eager delay spinners are not a good user experience. They can make a snappy user interface feel slower. We want delay spinners to appear only after a perceivable delay.
Vue tip1 minTemplateScript
Vue Tip: Check if Slot Is Empty
You can check if a slot is empty, for example, only to render it if it has content.
Vue tip2 minTemplateScript
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo
The v-memo directive is like a computed prop for the template.
Vue tip1 minTemplate
Vue Tip: Use Fallthrough Attributes
A 'fallthrough attribute' is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.
Vue tip2 minTemplate
Vue Tip: Provide Fallback Content for Slots
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided.
Vue tip1 minTemplate
Vue Tip: Use Optional Chaining in Templates
It's possible to use optional chaining in Vue templates.
Vue tip1 minTemplate
Vue Tip: Display Raw HTML
The double mustaches interpret the data as plain text, not HTML. To output real HTML, you will need to use the v-html directive.
Vue tip1 minTemplate
Vue Tip: Use Teleport to Render a Component in a Different Place
With teleport, you can render a component in a different place in the DOM tree, even if this place is not in your app's scope.
Vue tip1 minTemplate
2021
1 entryVue Tip: Simple Expressions in Templates
Vue component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.
Vue tip1 minTemplate
Page 2 of 3