Name: Avoid Semantic HTML Names for Vue Components
Uploaded: 2017-12-13T20:30:24-06:00
Description: HTML has a few elements with semantic meaning. While they can be a bit subjective as to when you should use them, you should avoid using them as names for your Vue components.

Simplify Vue Components with vue-class-component

Define Props on a Vue Class with vue-property-decorator

Place Content in Components with Vue Slots

Create Layouts with Named Vue Slots

Pass Props Between Components with Vue Slot Scope

Pass Props to Vue Functional Templates

Control Template Contents with Vue's Render Function

Avoid Semantic HTML Names for Vue Components

Write Vue Functional Components Inline

Pass Vue Render Functions as Props for Powerful Patterns

Switch Between Vue Components with Dynamic Components

Load Vue Async Components

Handle Errors and Loading with Vue Async Components

Advanced Fine-Grained Control of Vue.js Components

HTML has a few elements with semantic meaning. While they can be a bit subjective as to when you should use them, you should avoid using them as names for your Vue components.

https://app.egghead.io/api/v1/lessons/vue-js-avoid-semantic-html-names-for-vue-components/subtitles

Instructor: [00:00] You may have noticed in the console that we have these three warnings here, that say don't name things header, footer, or content. That's because those are reserved HTML elements, and they have semantic meaning inside of HTML.

[00:13] Instead of naming this header, and this content, and this footer, what you'd want to do is name your component. I'll name this awesome-header, awesome-footer, and awesome-content. You'll see, if I hit save, that there are no errors this time, but I lost my header and footer, because it's just treating these as HTML elements, like it would treat a div or a span.

[00:36] For example, you'll see content, but it's not using my content component, because it's not shuffling every time I refresh. I'll go ahead and rename these, too, awesome-header, awesome-content, awesome-footer. Now, we'll get all my features back, the header, shuffled content, and a footer.

[00:52] I'll go into my header. I'll tell this that I want it to be wrapped with a header, which changes nothing visually, but in your HTML, you'll see the header element. In my content, I'll change this to article, because article is the proper tag for self-contained content. Then in my footer, I'll wrap this with a footer.

[01:14] Everything looks the same, but if I check out my elements, you'll see we now have a header, article and footer describing what's going on in our HTML.

Avoid Semantic HTML Names for Vue Components

Share this video with your friends

Course

Advanced Fine-Grained Control of Vue.js Components