From 4a1ece22ec120747ba7ee9e4438f366af88caa20 Mon Sep 17 00:00:00 2001
From: Claudiu <sofuxro@yahoo.com>
Date: Fri, 28 Mar 2025 21:56:26 +0200
Subject: [PATCH 1/4] docs(crash-course): Update to script setup (en)

Related to #2642
---
 docs/guide/essentials/a-crash-course.md | 66 ++++++++++---------------
 1 file changed, 26 insertions(+), 40 deletions(-)

diff --git a/docs/guide/essentials/a-crash-course.md b/docs/guide/essentials/a-crash-course.md
index fb9d68679..6ee127029 100644
--- a/docs/guide/essentials/a-crash-course.md
+++ b/docs/guide/essentials/a-crash-course.md
@@ -17,22 +17,16 @@ We will start off with a simple `TodoApp` component with a single todo:
   <div></div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
+<script setup>
+import { ref } from 'vue'
+
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
-}
+])
 </script>
 ```
 
@@ -117,32 +111,24 @@ If we run this test, it will obviously fail. Let's update `TodoApp.vue` to have
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false
-      })
-    }
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref(''),
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
+])
+
+const createTodo = () => {
+  this.todos.push({
+    id: 2,
+    text: this.newTodo,
+    completed: false
+  })
 }
 </script>
 ```

From 86c091768041a6c90fb50c34cf81b9fb0e641b7a Mon Sep 17 00:00:00 2001
From: Claudiu <sofuxro@yahoo.com>
Date: Fri, 28 Mar 2025 22:02:52 +0200
Subject: [PATCH 2/4] Update a-crash-course.md

---
 docs/guide/essentials/a-crash-course.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/guide/essentials/a-crash-course.md b/docs/guide/essentials/a-crash-course.md
index 6ee127029..471e67387 100644
--- a/docs/guide/essentials/a-crash-course.md
+++ b/docs/guide/essentials/a-crash-course.md
@@ -124,9 +124,9 @@ const todos = ref([
 ])
 
 const createTodo = () => {
-  this.todos.push({
+  todos.value.push({
     id: 2,
-    text: this.newTodo,
+    text: newTodo.value,
     completed: false
   })
 }

From b6a01498c4d83e209509f05642df8a68b03ab880 Mon Sep 17 00:00:00 2001
From: Claudiu <sofuxro@yahoo.com>
Date: Fri, 28 Mar 2025 22:06:59 +0200
Subject: [PATCH 3/4] docs(crash-course): Update to script setup (fr)

Related to vuejs#2642
---
 docs/fr/guide/essentials/a-crash-course.md | 72 +++++++++-------------
 1 file changed, 29 insertions(+), 43 deletions(-)

diff --git a/docs/fr/guide/essentials/a-crash-course.md b/docs/fr/guide/essentials/a-crash-course.md
index eca8f208a..f6a96207f 100644
--- a/docs/fr/guide/essentials/a-crash-course.md
+++ b/docs/fr/guide/essentials/a-crash-course.md
@@ -16,22 +16,16 @@ Commençons par un simple composant TodoApp avec une seule tâche&nbsp;:
   <div></div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      todos: [
-        {
-          id: 1,
-          text: 'Apprendre Vue.js 3',
-          completed: false,
-        },
-      ],
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue'
+
+const todos = ref([
+  {
+    id: 1,
+    text: 'Apprendre Vue.js 3',
+    completed: false
+  }
+])
 </script>
 ```
 
@@ -116,33 +110,25 @@ Si nous exécutons ce test, il échouera. Modifions `TodoApp.vue` pour avoir les
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Apprendre Vue.js 3',
-          completed: false,
-        },
-      ],
-    };
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false,
-      });
-    },
-  },
-};
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref(''),
+const todos = ref([
+  {
+    id: 1,
+    text: 'Apprendre Vue.js 3',
+    completed: false
+  }
+])
+
+const createTodo = () => {
+  todos.value.push({
+    id: 2,
+    text: newTodo.value,
+    completed: false
+  })
+}
 </script>
 ```
 

From 4bc9644ee77808b60b14716893ba7410b9f3b123 Mon Sep 17 00:00:00 2001
From: Claudiu <sofuxro@yahoo.com>
Date: Fri, 28 Mar 2025 22:10:30 +0200
Subject: [PATCH 4/4] docs(crash-course): Update to script setup (zh)

Related to #2642
---
 docs/zh/guide/essentials/a-crash-course.md | 66 +++++++++-------------
 1 file changed, 26 insertions(+), 40 deletions(-)

diff --git a/docs/zh/guide/essentials/a-crash-course.md b/docs/zh/guide/essentials/a-crash-course.md
index 0af8fb3ec..cc6d1a9ed 100644
--- a/docs/zh/guide/essentials/a-crash-course.md
+++ b/docs/zh/guide/essentials/a-crash-course.md
@@ -16,22 +16,16 @@
   <div></div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
+<script setup>
+import { ref } from 'vue'
+
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
-}
+])
 </script>
 ```
 
@@ -116,32 +110,24 @@ test('creates a todo', () => {
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TodoApp',
-
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false
-      })
-    }
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref(''),
+const todos = ref([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
+])
+
+const createTodo = () => {
+  todos.value.push({
+    id: 2,
+    text: newTodo.value,
+    completed: false
+  })
 }
 </script>
 ```