Skip to content

Update built-in-components.md. Rename <teleport> to <Teleport> #2497

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.

Sign up for GitHub

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 1 commit into from
Oct 17, 2023
Merged

Update built-in-components.md. Rename <teleport> to <Teleport> #2497

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions src/api/built-in-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,17 +294,17 @@ Renders its slot content to another part of the DOM.
Specifying target container:

```vue-html
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />
<Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />
```

Conditionally disabling:

```vue-html
<teleport to="#popup" :disabled="displayVideoInline">
<Teleport to="#popup" :disabled="displayVideoInline">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: according to styleguide, self-closing component tags can be capitalized, while opening/closing tags should be lowercase. Let's keep the fixes above and remove this one

Copy link
Contributor Author

@FreshHead FreshHead Sep 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NataliaTepluhina big thanks for reviewing this request.
Sorry, I know that you know Vue better, but I did not see this line in the your link :/
I just see:
" In most projects, component names should always be PascalCase in Single-File Components and string templates - but kebab-case in in-DOM templates."
Also lowercase is used to distinguish built-in elements such as slot and template
https://vuejs.org/api/built-in-special-elements.html#component

Copy link
Member

@NataliaTepluhina NataliaTepluhina Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@FreshHead here is a relevant screenshot:

Screenshot 2023-09-26 at 15 44 53

So for self-closing components we prefer the Pascal case, for opening/closing tags we prefer kebab-case

Copy link
Contributor Author

@FreshHead FreshHead Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NataliaTepluhina, I am confused. I read it like: "In Single-File Components use PascalCase and kebab in in-DOM templates". Not self-enclosings components should be capitalized and components with content in slot should be lowercased.

For me code snippet bellow can easily be used in SFC:

<Teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</Teleport>

It is even more confusing that in the teleport doc page Teleport component is always capitalized: https://vuejs.org/guide/built-ins/teleport.html#basic-usage
And for me lowercasing Teleport component is clashed with convention to distinguish special elements and components:
https://vuejs.org/api/built-in-special-elements.html#component
image

<video src="./my-movie.mp4">
</teleport>
</Teleport>
```

- **See also** [Guide - Teleport](/guide/built-ins/teleport)
Expand Down