Skip to content

docs (#156): add inline-template attribute docs to migration guide #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 15, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ const sidebar = {
'migration/functional-components',
'migration/global-api',
'migration/global-api-treeshaking',
'migration/inline-template-attribute',
'migration/keycode-modifiers',
'migration/render-function-api',
'migration/slots-unification',
Expand Down
83 changes: 83 additions & 0 deletions src/guide/migration/inline-template-attribute.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
---
types:
- breaking
- removal
---

# Inline Template Attribute

## Overview

Support for the [inline-template feature](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) 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.

```html
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
```

## 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:

```js
<script type="text/html" id="my-comp-template">
<div>{{ hello }}</div>
</script>
```

And in the component, target the template using a selector:

```js
const MyComp = {
template: '#my-comp-template'
// ...
}
```

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

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:

```html
<!-- 2.x Syntax -->
<my-comp inline-template :msg="parentMsg">
{{ msg }} {{ childState }}
</my-comp>

<!-- Default Slot Version -->
<my-comp v-slot="{ childState }">
{{ parentMsg }} {{ childState }}
</my-comp>
```

The child, instead of providing no template, should now render the default slot*:

```html
<!--
in child template, render default slot while passing
in necessary private state of child.
-->
<template>
<slot :childState="childState" />
</template>
```

> * Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!