Template Slot Vue Js
Vue.js - The Progressive JavaScript Framework. Support for the inline-template feature (opens new window) has been removed. # 2.x Syntax In 2.x, Vue provided the inline-template attribute on child components to use its inner content as its template instead of treating it as distributed content. This article explains how you can use the template and slot elements to create a flexible template that can then be used to populate the shadow DOM of a web component. MDN will be in maintenance mode, Monday December 14, from 7:00 AM until no later than 5:00 PM Pacific Time (in UTC, Monday December 14, 3:00 PM until Tuesday December 15, 1:00 AM).
# Overview
Support for the inline-template feature(opens new window) has been removed.
# 2.x Syntax
In 2.x, Vue provided the inline-template attribute on child components to use its inner content as its template instead of treating it as distributed content.
# 3.x Syntax
This feature will no longer be supported.
# Migration Strategy
Most of the use cases for inline-template assumes a no-build-tool setup, where all templates are written directly inside the HTML page.
# Option #1: Use <script> tag
The most straightforward workaround in such cases is using <script> with an alternative type:
And in the component, target the template using a selector:
Vue Js Template Slot
This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability.
# Option #2: Default Slot
Template Slot Vue Js Download
A component previously using inline-template can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline:
The child, instead of providing no template, should now render the default slot*:
Template Slot Vue Js Online
- Note: In 3.x, slots can be rendered as the root with native fragments support!