From 4ff34f7128020b076d5c665f5aad9a0308e21424 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Mon, 17 Oct 2022 11:06:53 -0700
Subject: [PATCH] Updated getting started guide

---
 cspell.json                                   |   3 +-
 .../start/getting-started/vue/data-model.mdx  | 168 ++++++-------
 .../start/getting-started/vue/setup.mdx       | 237 ++++++------------
 3 files changed, 157 insertions(+), 251 deletions(-)

diff --git a/cspell.json b/cspell.json
index ec3badaa21c..a687dc14c03 100644
--- a/cspell.json
+++ b/cspell.json
@@ -1471,7 +1471,8 @@
     "myfunction",
     "roadmap",
     "infowindow",
-    "Libre's"
+    "Libre's",
+    "Pinia"
   ],
   "flagWords": ["hte"]
 }
diff --git a/src/fragments/start/getting-started/vue/data-model.mdx b/src/fragments/start/getting-started/vue/data-model.mdx
index 10532647355..80b1b39b365 100644
--- a/src/fragments/start/getting-started/vue/data-model.mdx
+++ b/src/fragments/start/getting-started/vue/data-model.mdx
@@ -62,7 +62,7 @@ Select the default values which are highlighted below:
 
 The CLI should open this GraphQL schema in your text editor.
 
-__amplify/backend/api/myapi/schema.graphql__
+**amplify/backend/api/myapi/schema.graphql**
 
 ```graphql
 type Todo @model {
@@ -72,13 +72,13 @@ type Todo @model {
 }
 ```
 
-The schema generated is for a Todo app. You'll notice a directive on the `Todo` type of `@model`. This directive is part of the [GraphQL transform](/cli/graphql/data-modeling) library of Amplify. 
+The schema generated is for a Todo app. You'll notice a directive on the `Todo` type of `@model`. This directive is part of the [GraphQL transform](/cli/graphql/data-modeling) library of Amplify.
 
 The GraphQL Transform Library provides custom directives you can use in your schema that allow you to do things like define data models, set up authentication and authorization rules, configure serverless functions as resolvers, and more.
 
 A type decorated with the `@model` directive will scaffold out the database table for the type (Todo table), the schema for CRUD (create, read, update, delete) and list operations, and the GraphQL resolvers needed to make everything work together.
 
-From the command line, press __enter__ to accept the schema and continue to the next steps.
+From the command line, press **enter** to accept the schema and continue to the next steps.
 
 ## Deploy your GraphQL API
 
@@ -128,7 +128,7 @@ This will open your Amplify app project in the AWS service console. Choose the *
 
 ## Connect frontend to API
 
-Next, open __App.vue__.
+Next, open **App.vue**.
 
 ### Writing data with GraphQL mutations
 
@@ -138,38 +138,38 @@ To create a new todo in the database, use the `API.graphql()` operation with the
 <template>
   <div id="app">
     <h1>Todo App</h1>
-    <input type="text" v-model="name" placeholder="Todo name">
-    <input type="text" v-model="description" placeholder="Todo description">
+    <input type="text" v-model="name" placeholder="Todo name" />
+    <input type="text" v-model="description" placeholder="Todo description" />
     <button v-on:click="createTodo">Create Todo</button>
   </div>
 </template>
 
 <script>
-import { API } from 'aws-amplify';
-import { createTodo } from './graphql/mutations';
-
-export default {
-  name: 'app',
-  data() {
-    return {
-      name: '',
-      description: ''
-    }
-  },
-  methods: {
-    async createTodo() {
-      const { name, description } = this;
-      if (!name || !description) return;
-      const todo = { name, description };
-      await API.graphql({
-        query: createTodo,
-        variables: {input: todo},
-      });
-      this.name = '';
-      this.description = '';
+  import { API } from 'aws-amplify';
+  import { createTodo } from './graphql/mutations';
+
+  export default {
+    name: 'app',
+    data() {
+      return {
+        name: '',
+        description: ''
+      };
+    },
+    methods: {
+      async createTodo() {
+        const { name, description } = this;
+        if (!name || !description) return;
+        const todo = { name, description };
+        await API.graphql({
+          query: createTodo,
+          variables: { input: todo }
+        });
+        this.name = '';
+        this.description = '';
+      }
     }
-  }
-};
+  };
 </script>
 ```
 
@@ -181,8 +181,8 @@ To display the data, update `App.vue` to list all the items in the database by i
 <template>
   <div id="app">
     <h1>Todo App</h1>
-    <input type="text" v-model="name" placeholder="Todo name">
-    <input type="text" v-model="description" placeholder="Todo description">
+    <input type="text" v-model="name" placeholder="Todo name" />
+    <input type="text" v-model="description" placeholder="Todo description" />
     <button v-on:click="createTodo">Create Todo</button>
     <div v-for="item in todos" :key="item.id">
       <h3>{{ item.name }}</h3>
@@ -192,44 +192,43 @@ To display the data, update `App.vue` to list all the items in the database by i
 </template>
 
 <script>
-import { API } from 'aws-amplify';
-import { createTodo } from './graphql/mutations';
-import { listTodos } from './graphql/queries';
-
-export default {
-  name: 'App',
-  async created() {
-    this.getTodos();
-    this.subscribe();
-  },
-  data() {
-    return {
-      name: '',
-      description: '',
-      todos: []
-    }
-  },
-  methods: {
-    async createTodo() {
-      const { name, description } = this;
-      if (!name || !description) return;
-      const todo = { name, description };
-      this.todos = [...this.todos, todo];
-      await API.graphql({
-        query: createTodo,
-        variables: {input: todo},
-      });
-      this.name = '';
-      this.description = '';
+  import { API } from 'aws-amplify';
+  import { createTodo } from './graphql/mutations';
+  import { listTodos } from './graphql/queries';
+
+  export default {
+    name: 'App',
+    async created() {
+      this.getTodos();
+    },
+    data() {
+      return {
+        name: '',
+        description: '',
+        todos: []
+      };
     },
-    async getTodos() {
-      const todos = await API.graphql({
-        query: listTodos
-      });
-      this.todos = todos.data.listTodos.items;
+    methods: {
+      async createTodo() {
+        const { name, description } = this;
+        if (!name || !description) return;
+        const todo = { name, description };
+        this.todos = [...this.todos, todo];
+        await API.graphql({
+          query: createTodo,
+          variables: { input: todo }
+        });
+        this.name = '';
+        this.description = '';
+      },
+      async getTodos() {
+        const todos = await API.graphql({
+          query: listTodos
+        });
+        this.todos = todos.data.listTodos.items;
+      }
     }
-  }
-}
+  };
 </script>
 ```
 
@@ -239,28 +238,27 @@ Now if you wish to subscribe to data, import the `onCreateTodo` subscription and
 
 ```html
 <script>
-// other imports
-import { onCreateTodo } from './graphql/subscriptions';
-
-export default {
-  // other functions and properties
-  created(){
-    this.getTodos();
-    this.subscribe();
-  },
-  methods: {
-    // other methods
-    subscribe() {
-      API.graphql({ query: onCreateTodo })
-        .subscribe({
+  // other imports
+  import { onCreateTodo } from './graphql/subscriptions';
+
+  export default {
+    // other functions and properties
+    created() {
+      this.getTodos();
+      this.subscribe();
+    },
+    methods: {
+      // other methods
+      subscribe() {
+        API.graphql({ query: onCreateTodo }).subscribe({
           next: (eventData) => {
             let todo = eventData.value.data.onCreateTodo;
-            if (this.todos.some(item => item.name === todo.name)) return; // remove duplications
+            if (this.todos.some((item) => item.name === todo.name)) return; // remove duplications
             this.todos = [...this.todos, todo];
           }
         });
+      }
     }
-  }
-};
+  };
 </script>
 ```
diff --git a/src/fragments/start/getting-started/vue/setup.mdx b/src/fragments/start/getting-started/vue/setup.mdx
index ac6149d4e07..943d0b94508 100644
--- a/src/fragments/start/getting-started/vue/setup.mdx
+++ b/src/fragments/start/getting-started/vue/setup.mdx
@@ -1,17 +1,25 @@
-Use the Vue CLI to bootstrap a new Vue 3 app (selecting the defaults will work for this project):
+Use the Vue Vite powered `create-app` to bootstrap a new Vue 3 app (selecting the defaults will work for this project):
 
-<BlockSwitcher>
 <Block name="NPM">
 
 ```bash
-npm install -g @vue/cli
-vue create myamplifyproject
+npm init vue@3
 
-? Please pick a preset: (Use arrow keys)
-❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)  <--
-  Manually select features
+Need to install the following packages:
+  create-vue@3
+Ok to proceed? (y) y
+
+✔ Project name: … myamplifyproject
+✔ Add TypeScript? … No 
+✔ Add JSX Support? … No 
+✔ Add Vue Router for Single Page Application development? … No 
+✔ Add Pinia for state management? … No 
+✔ Add Vitest for Unit Testing? … No 
+✔ Add Cypress for both Unit and End-to-End testing? … No 
+✔ Add ESLint for code quality? … No 
 
 cd myamplifyproject
+
 ```
 
 Install required modules:
@@ -23,39 +31,12 @@ npm install
 Run your app:
 
 ```bash
-npm run serve --open
+npm run dev
 ```
 Press `Ctrl + C` to stop the server
 
 </Block>
-<Block name="Yarn">
-
-```bash
-yarn global add @vue/cli
-vue create myamplifyproject
-
-? Please pick a preset: (Use arrow keys)
-❯ default (babel, eslint)   <--
-  Manually select features
-
-cd myamplifyproject
-```
-
-Install required modules:
-
-```bash
-yarn
-```
 
-Run your app:
-
-```bash
-yarn serve --open
-```
-Press `Ctrl + C` to stop the server
-
-</Block>
-</BlockSwitcher>
 
 ## Initialize a new backend
 
@@ -73,132 +54,27 @@ Give your backend project the name `todo`
 ? Enter a name for the project (myamplifyproject) todo
 ```
 
-All AWS services you provision for your app are grouped into an "environment"
-A common naming convention is dev, staging, and production
-
-Set the backend environment name to be `dev`
-```console
-? Enter a name for the environment dev
-```
-
-Sometimes the CLI will prompt you to edit a file, it will use this editor to open those files.
-Select your preferred code editor software
-```console
-? Choose your default editor: (Use arrow keys)
-❯ Visual Studio Code
-  Atom Editor
-  Sublime Text
-  IntelliJ IDEA
-  Vim (via Terminal, Mac OS only)
-  Emacs (via Terminal, Mac OS only)
-  None
-```
-
-Amplify will provide configuration files for your frontend application to connect to this backend environment. Since Vue is based on Javascript, we'll select that here.
-Select the javascript framework for your backend integration
-```console
-# Amplify supports JavaScript (Web & React Native), iOS, and Android apps
-? Choose the type of app that you're building (Use arrow keys)
-  android
-  ios
-❯ javascript
-```
-
-```console
-? What JavaScript framework are you using (Use arrow keys)
-  angular
-  ember
-  ionic
-  react
-  react-native
-❯ vue
-  none
-```
-
-Vue CLI setup the source files for your project under a `./src` folder. Other tools, such as `Nuxt`, place the source files in the root directory. For this tutorial, we'll go with the default, `src`
-```console
-? Source Directory Path:  src
-```
+You'll then be asked to accept some recommended values:
 
-When your project is ready to be hosted, Vue will generate your website, ready for public use, into a folder called `dist`. This is the default, so you can just press enter to continue.
-```console
-? Distribution Directory Path:  dist
 ```
+The following configuration will be applied:
 
-<BlockSwitcher>
-<Block name="NPM">
+Project information
+| Name: todo
+| Environment: dev
+| Default editor: Visual Studio Code
+| App type: javascript
+| Javascript framework: vue
+| Source Directory Path: src
+| Distribution Directory Path: dist
+| Build Command: npm run-script build
+| Start Command: npm run-script serve
 
-Amplify's automated deployment needs to know what steps are needed to build your application for publishing. Here we will set that to be Vue CLI's default build script, found in the `package.json`
-```console
-? Build Command:  npm run-script build
-```
+? Initialize the project with the above configuration? Yes
 
-If Amplify needs to run the application in development mode, it needs to know how to start the development server. Again, we'll use Vue CLI's default scripts.
-```console
-? Start Command:  npm run-script serve
 ```
-</Block>
-<Block name="Yarn">
 
-Amplify's automated deployment needs to know what steps are needed to build your application for publishing. Here we will set that to be Vue CLI's default build script, found in the `package.json`
-```console
-? Build Command:  yarn build
-```
-
-If Amplify needs to run the application in development mode, it needs to know how to start the development server. Again, we'll use Vue CLI's default scripts.
-```console
-? Start Command:  yarn serve
-```
-</Block>
-</BlockSwitcher>
-
-Finally, Amplify needs an AWS account to connect to so that it can begin creating the backend services.
-This is the profile you created with the `amplify configure` command in the introduction step. [introduction step](/start/getting-started/installation)
-
-<BlockSwitcher>
-<Block name="With A Profile">
-
-Select "yes" by typing `y` and pressing `enter`.
-
-```console
-? Do you want to use an AWS profile? (Y/n)
-```
-Proceed to select your profile from the list and press enter. Amplify will now begin deploying your backend framework.
-
-</Block>
-<Block name="Without A Profile">
-
-If you have not setup an AWS profile yet, select "no" by typing `n` and pressing `enter`.
-
-```console
-? Do you want to use an AWS profile? (Y/n)
-```
-
-You will now be prompted for an Access Key and Secret Key for your AWS account. Fill in these details and press enter.
-
-```console
-? accessKeyId:  (<YOUR_ACCESS_KEY_ID>)
-? secretAccessKey:  (<YOUR_SECRET_ACCESS_KEY>)
-```
-
-AWS has multiple regions distributed around the world. Select the region that makes sense for your application to run in. For this tutorial, the closer the region is to you, the better your experience will be.
-
-```console
-? region:  (Use arrow keys)
-❯ us-east-1 
-  us-east-2 
-  us-west-2 
-  eu-west-1 
-  eu-west-2 
-  eu-central-1 
-  ap-northeast-1 
-(Move up and down to reveal more choices)
-```
-
-Amplify will now begin deploying your backend framework.
-
-</Block>
-</BlockSwitcher>
+> Where possible the CLI will infer the proper configuration based on the type of project Amplify is being initialized in. In this case it knew we are using Vue and provided the proper configuration for type of app, framework, source, distribution, build, and start options.
 
 When you initialize a new Amplify project, a few things happen:
 
@@ -211,7 +87,6 @@ When you initialize a new Amplify project, a few things happen:
 
 The first step to using Amplify in the client is to install the necessary dependencies:
 
-<BlockSwitcher>
 <Block name="NPM">
 
 ```
@@ -219,14 +94,6 @@ npm install aws-amplify @aws-amplify/ui-vue
 ```
 
 </Block>
-<Block name="Yarn">
-
-```
-yarn add aws-amplify @aws-amplify/ui-vue
-```
-
-</Block>
-</BlockSwitcher>
 
 <Callout>
 
@@ -248,7 +115,47 @@ import awsExports from './aws-exports';
 Amplify.configure(awsExports);
 ```
 
-And that's all it takes to configure Amplify. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in __aws-exports.js__ will update automatically.
+## Vue Vite Config
 
-Now that our Vue app is set up and Amplify is initialized, we're ready to add an API in the next step.
+When working with a Vue `create-app` that uses [Vite](https://vitejs.dev) you must make a few additional modifications. Please follow the steps below.
+
+**1.** Add the following script tag to the `index.html` file at the bottom of the `<body>` tag.
 
+```html
+...
+  <script>
+        window.global = window;
+        var exports = {};
+  </script>
+</body>
+```
+
+**2.** Update the `vite.config.ts` and add in a resolve object inside the `defineConfig({})` as seen below.
+
+```js
+...
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+      alias: [
+      {
+        find: './runtimeConfig',
+        replacement: './runtimeConfig.browser',
+      },
+    ]
+  }
+})
+```
+
+**3.** If you choose to add TypeScript, update the `tsconfig.json` file and add `skipLibCheck: true` under `compilerOptions`.
+
+```js
+...
+  "compilerOptions": {
+    "skipLibCheck": true,
+...
+```
+
+And that's all it takes to configure Amplify with Vue and `create-app`. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in __aws-exports.js__ will update automatically.
+
+Now that our Vue app is set up and Amplify is initialized, we're ready to add an API in the next step.