Introduction page mentions an approach to register component but shows another

[LSViana]

Problem

The Introduction page for Vue 3 has a section named Composing with Components.

In the second paragraph of that section, right below the illustration of a layout pointing to a bunch of boxes, there's a paragraph with the following sentence:

Registering a component in Vue is straightforward: we create a component object as we did with App objects and we define it in parent's components option:

And the code example right below is:

// Create Vue application
const app = Vue.createApp(...)

// Define a new component called todo-item
app.component('todo-item', {
  template: `<li>This is a todo</li>`
})

// Mount Vue application
app.mount(...)

The main problem here is the inconsistency between what's mentioned in the documentation and the code sample provided.

Solution

I'd like to provide my suggestions:

• The paragraph mentioned above should be updated to mention the .component([name], [definition]) approach; or
• The code sample should be updated to actually use the components option when defining a Vue component.

I don't know what fits better, but I think the first option I mentioned above is better because it's simpler and we're on the introduction page. However, I'm sure these aren't the only possible solutions, my goal here is just to report the issue. 🙂

[LSViana]

@skirtles-code Do you agree that what is reported above is an issue? If so, would you like me to submit a PR for that?

Otherwise, please go ahead and close the issue.

[NataliaTepluhina]

@LSViana I agree that it's controversial and we should change it to the locally registered component. Would you like to create a PR to fix this? 🙏🏻

[LSViana]

@NataliaTepluhina I just created #1296 to fix that example.

Could you, please, take a look at that? I am not sure my new example is very good, then feel free to edit it as you see fit. 🙂