From e394a14042d79a7f4f11f638252d4b84024f6d30 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Fri, 7 Jun 2024 14:42:27 -0700
Subject: [PATCH 1/2] Fixed setup up data for vue

---
 .../data/set-up-data/index.mdx                | 169 +++++++++++++++++-
 1 file changed, 166 insertions(+), 3 deletions(-)

diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
index 55c396b77fb..dbf020c7c90 100644
--- a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
@@ -127,6 +127,9 @@ First, install the Amplify client library to your project:
 ```bash title="Terminal" showLineNumbers={false}
 npm add aws-amplify
 ```
+</InlineFilter>
+
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
 
 In your app's entry point, typically **main.tsx** for React apps created using Vite, make the following edits:
 
@@ -139,6 +142,20 @@ Amplify.configure(outputs);
 
 </InlineFilter>
 
+<InlineFilter filters={["vue"]}>
+
+In your app's entry point, typically **main.ts** for Vue apps created using Vite, make the following edits:
+
+```tsx title="src/main.ts"
+import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+
+Amplify.configure(outputs);
+```
+
+</InlineFilter>
+
+
 <InlineFilter filters={["android"]}>
 
 Under Gradle Scripts, open build.gradle (Module :app), add the following lines:
@@ -356,10 +373,15 @@ Future<void> main() async {
 </InlineFilter>
 ## Write data to your backend
 
-<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
 
 Let's first add a button to create a new todo item. To make a "create Todo" API request, generate the data client using `generateClient()` in your frontend code, and then call `.create()` operation for the Todo model. The Data client is a fully typed client that gives you in-IDE code completion. To enable this in-IDE code completion capability, pass in the `Schema` type to the `generateClient` function.
 
+</InlineFilter>
+
+
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+
 ```tsx title="src/TodoList.tsx"
 import type { Schema } from '../amplify/data/resource'
 import { generateClient } from 'aws-amplify/data'
@@ -380,6 +402,40 @@ export default function TodoList() {
 }
 ```
 
+</InlineFilter>
+
+
+<InlineFilter filters={["vue"]}>
+
+```html title="src/TodoList.vue"
+
+<script setup lang="ts">
+import type { Schema } from '../../amplify/data/resource'
+import { generateClient } from 'aws-amplify/data'
+
+const client = generateClient<Schema>()
+
+async function createTodo() {
+  await client.models.Todo.create({
+    content: window.prompt("Todo content?"),
+    isDone: false
+  })
+}
+</script>
+
+<template>
+  <div>
+    <button @click="createTodo">Add new todo</button>
+  </div>
+</template>
+
+```
+
+</InlineFilter>
+
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+
+
 Run the application in local development mode and check your network tab after creating a todo. You should see a successful request to a `/graphql` endpoint.
 
 <Callout>
@@ -579,7 +635,7 @@ Creating Todo successful.
 
 Next, list all your todos and then refetch the todos after a todo has been added:
 
-<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
 
 
 ```tsx title="src/TodoList.tsx"
@@ -623,6 +679,56 @@ export default function TodoList() {
 }
 ```
 
+</InlineFilter>
+
+<InlineFilter filters={["vue"]}>
+
+```html title="src/TodoList.vue"
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import type { Schema } from '../../amplify/data/resource'
+import { generateClient } from 'aws-amplify/data'
+
+const client = generateClient<Schema>()
+
+// create a reactive reference to the array of todos
+const todos = ref<Array<Schema['Todo']["type"]>>([]);
+
+function fetchTodos() {
+  const { data: items, errors } = await client.models.Todo.list();
+  todos.value = items; 
+}
+
+async function createTodo() {
+  await client.models.Todo.create({
+    content: window.prompt("Todo content?"),
+    isDone: false
+  })
+  fetchTodos();
+}
+
+ onMounted(() => {
+  fetchTodos();
+});
+
+</script>
+
+<template>
+  <div>
+    <button @click="createTodo">Add new todo</button>
+    <ul>
+     <li 
+       v-for="todo in todos" 
+       :key="todo.id">
+       {{ todo.content }}
+     </li>
+    </ul>
+  </div>
+</template>
+
+```
+
 </InlineFilter>
 <InlineFilter filters={["android"]}>
 
@@ -834,7 +940,7 @@ class _MyHomePageState extends State<MyHomePage> {
 
 ## Subscribe to real-time updates
 
-<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
 
 You can also use `observeQuery` to subscribe to a live feed of your backend data. Let's refactor the code to use a real-time observeQuery instead.
 
@@ -880,6 +986,63 @@ export default function TodoList() {
 }
 ```
 
+</InlineFilter>
+
+<InlineFilter filters={["vue"]}>
+```html title="src/TodoList.vue"
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import type { Schema } from '../../amplify/data/resource'
+import { generateClient } from 'aws-amplify/data'
+
+const client = generateClient<Schema>()
+
+// create a reactive reference to the array of todos
+const todos = ref<Array<Schema['Todo']["type"]>>([]);
+
+function fetchTodos() {
+  client.models.Todo.observeQuery().subscribe({
+    next: ({ items, isSynced }) => {
+      todos.value = items
+     },
+  }); 
+}
+
+async function createTodo() {
+  await client.models.Todo.create({
+    content: window.prompt("Todo content?"),
+    isDone: false
+  })
+  // no more manual refetchTodos required!
+  // - fetchTodos()
+}
+
+ onMounted(() => {
+  fetchTodos();
+});
+
+</script>
+
+<template>
+  <div>
+    <button @click="createTodo">Add new todo</button>
+    <ul>
+     <li 
+       v-for="todo in todos" 
+       :key="todo.id">
+       {{ todo.content }}
+     </li>
+    </ul>
+  </div>
+</template>
+
+```
+
+</InlineFilter>
+
+<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+
 Now try to open your app in two browser windows and see how creating a todo in one window automatically adds the todo in the second window as well.
 
 <Callout>

From d7a09d5c558db78fb6884ff53841f9bd31ffede1 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Fri, 26 Jul 2024 14:20:05 -0700
Subject: [PATCH 2/2] Updated based on comments

---
 .../[platform]/build-a-backend/data/set-up-data/index.mdx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
index 8a8216bd1f4..26542619284 100644
--- a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
@@ -412,7 +412,6 @@ export default function TodoList() {
 <InlineFilter filters={["vue"]}>
 
 ```html title="src/TodoList.vue"
-
 <script setup lang="ts">
 import type { Schema } from '../../amplify/data/resource'
 import { generateClient } from 'aws-amplify/data'
@@ -432,7 +431,6 @@ async function createTodo() {
     <button @click="createTodo">Add new todo</button>
   </div>
 </template>
-
 ```
 
 </InlineFilter>
@@ -688,7 +686,6 @@ export default function TodoList() {
 <InlineFilter filters={["vue"]}>
 
 ```html title="src/TodoList.vue"
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import type { Schema } from '../../amplify/data/resource'
@@ -697,7 +694,7 @@ import { generateClient } from 'aws-amplify/data'
 const client = generateClient<Schema>()
 
 // create a reactive reference to the array of todos
-const todos = ref<Array<Schema['Todo']["type"]>>([]);
+const todos = ref<Array<Schema['Todo']['type']>>([]);
 
 function fetchTodos() {
   const { data: items, errors } = await client.models.Todo.list();
@@ -730,7 +727,6 @@ async function createTodo() {
     </ul>
   </div>
 </template>
-
 ```
 
 </InlineFilter>
@@ -994,7 +990,6 @@ export default function TodoList() {
 
 <InlineFilter filters={["vue"]}>
 ```html title="src/TodoList.vue"
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import type { Schema } from '../../amplify/data/resource'
@@ -1040,7 +1035,6 @@ async function createTodo() {
     </ul>
   </div>
 </template>
-
 ```
 
 </InlineFilter>