Description
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
componentsoption 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. 🙂