From 075fad6180f1658e556d36cedce4a13eabfba574 Mon Sep 17 00:00:00 2001
From: Lucas Viana <LSViana@users.noreply.github.com>
Date: Sun, 24 Oct 2021 09:32:28 -0300
Subject: [PATCH 1/3] Update Introduction example to use `components` instead
 of `.component()`

---
 src/guide/introduction.md | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index 5dfd68f907..64b0bcd6dc 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -223,12 +223,15 @@ The component system is another important concept in Vue, because it's an abstra
 In Vue, a component is essentially an instance with pre-defined options. 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:
 
 ```js
-// Create Vue application
-const app = Vue.createApp(...)
+// Import the child component
+import TodoItem from '.../TodoItem.vue';
 
-// Define a new component called todo-item
-app.component('todo-item', {
-  template: `<li>This is a todo</li>`
+// Create Vue application
+const app = Vue.createApp({
+  components: {
+    TodoItem // Register a new component
+  },
+  ... // Other properties for the component
 })
 
 // Mount Vue application

From c245edd55efd8ccedada1c03c824407398206ac3 Mon Sep 17 00:00:00 2001
From: Lucas Viana <LSViana@users.noreply.github.com>
Date: Mon, 25 Oct 2021 07:32:50 -0300
Subject: [PATCH 2/3] Replace SFC import with local component definition

This fixes what was mentioned by the reviewer: https://github.com/vuejs/docs/pull/1296#discussion_r735261102
---
 src/guide/introduction.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index 64b0bcd6dc..52ec37a34b 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -224,7 +224,9 @@ In Vue, a component is essentially an instance with pre-defined options. Registe
 
 ```js
 // Import the child component
-import TodoItem from '.../TodoItem.vue';
+const TodoItem = {
+  template: `<li>This is a todo</li>`
+}
 
 // Create Vue application
 const app = Vue.createApp({

From 09143e1dc835a548644e262b951cc1b1cac5b4c6 Mon Sep 17 00:00:00 2001
From: Lucas Viana <LSViana@users.noreply.github.com>
Date: Mon, 25 Oct 2021 07:33:39 -0300
Subject: [PATCH 3/3] Remove unnecessary import comment

---
 src/guide/introduction.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index 52ec37a34b..b5d1a43fb5 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -223,7 +223,6 @@ The component system is another important concept in Vue, because it's an abstra
 In Vue, a component is essentially an instance with pre-defined options. 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:
 
 ```js
-// Import the child component
 const TodoItem = {
   template: `<li>This is a todo</li>`
 }