From ad2c4bf63a374ea401d66f56a7f9f13a54b3d7dd Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 10:36:14 -0400
Subject: [PATCH 1/7] docs(quickstart): update to include imports and match
 current starter app

---
 versioned_docs/version-v6/vue/quickstart.md | 265 +++++---------------
 1 file changed, 61 insertions(+), 204 deletions(-)

diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index de98ac8bc6d..f092266aa72 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -56,7 +56,7 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 5. Delete the `shims-vue.d.ts` file.
 
-6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `App.vue` and `views/Home.vue`.
+6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `App.vue` and `views/HomePage.vue`.
 
 ## A look at a Vue Component
 
@@ -91,17 +91,8 @@ If we open `App.vue` we should see the following:
   </ion-app>
 </template>
 
-<script lang="ts">
-  import { IonApp, IonRouterOutlet } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'App',
-    components: {
-      IonApp,
-      IonRouterOutlet,
-    },
-  });
+<script setup lang="ts">
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 
@@ -125,24 +116,15 @@ From there, let's look at the template.
 
 All Vue components must have a `<template>`. Inside of there, we place our `IonApp` and `IonRouterOutlet` components.
 
-Finally, let's look at the component definition:
+Finally, let's look at the script:
 
 ```tsx
+<script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet,
-  },
-});
+</script>
 ```
 
-Vue 3 offers a new `defineComponent` function when creating components for improved tooling support, and we are going to use that here. We first define the name of the component, and then we supply the components that we will use in our template.
-
-There are several arguments you can supply here such as `methods`, `setup` and more. This is explained as part of Vue's [Composition API Documentation](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api).
+We are going to use Vue's [`script setup`](https://vuejs.org/api/sfc-script-setup.html) syntax when creating components.
 
 ## Initializing the router
 
@@ -151,7 +133,7 @@ Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -161,7 +143,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
 ];
 
@@ -192,12 +174,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: () => import('@/views/Home.vue'),
+    component: () => import('@/views/HomePage.vue'),
   },
 ];
 ```
 
-Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/Home.vue'`, we could simply do `'@/views/Home.vue'`.
+Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/HomePage.vue'`, we could simply do `'@/views/HomePage.vue'`.
 
 ## A component with style
 
@@ -236,20 +218,8 @@ Currently, the `Home` component looks like so:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 
 <style scoped>
@@ -321,6 +291,10 @@ For brevity, we are excluding repeating parts of our component, like the functio
     </ion-content>
   </ion-page>
 </template>
+
+<script setup lang="ts">
+import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
 ```
 
 Here in our `IonContent`, we are adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem` as it is the centerpiece here.
@@ -355,20 +329,9 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
   </ion-page>
 </template>
 
-<script>
+<script setup>
+  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { add } from 'ionicons/icons';
-
-  ...
-
-  export default defineComponent({
-    name: 'Home',
-    ...,
-    setup() {
-      return {
-        add
-      }
-    }
-  })
 </script>
 ```
 
@@ -391,31 +354,10 @@ Now let's wire up a click handler to this. When clicking the FAB button, we want
   </ion-page>
 </template>
 
-<script>
+<script setup>
   import { add } from 'ionicons/icons';
   import { useRouter } from 'vue-router';
-
-  ...
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonFab,
-      IonFabButton,
-      IonHeader,
-      IonIcon,
-      IonPage,
-      IonTitle,
-      IonToolbar
-    },
-    setup() {
-      return {
-        router: useRouter(),
-        add
-      }
-    }
-  });
+  const router = useRouter();
 </script>
 ```
 
@@ -432,7 +374,7 @@ Now that we have the pieces in place to navigate in our app, we need to create a
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '../views/HomePage.vue';
 import NewItem from '@/views/NewItem.vue';
 
 const routes: Array<RouteRecordRaw> = [
@@ -443,7 +385,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
   {
     path: '/new',
@@ -479,22 +421,8 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment.
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'NewItem',
-    components: {
-      IonBackButton,
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
 
@@ -527,21 +455,14 @@ In other framework integrations such as Ionic React, this is not needed as any `
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent },
-    setup() {
-      const content = ref();
-      const scrollToBottom = () => {
-        content.value.$el.scrollToBottom(300);
-      };
-
-      return { content, scrollToBottom };
-    },
-  });
+  import { ref } from 'vue';
+
+  const content = ref();
+  const scrollToBottom = () => {
+    content.value.$el.scrollToBottom(300);
+  };
 </script>
 ```
 
@@ -562,29 +483,15 @@ Per-Component Imports is the recommended approach to using Ionicons. This involv
   </ion-page>
 </template>
 
-<script>
+<script setup>
   import { heart } from 'ionicons/icons';
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Icon',
-    components: {
-      IonContent,
-      IonPage,
-    },
-    setup() {
-      return { heart };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
 Let's break down what we are doing here. First, we are importing the `heart` icon from `ionicons/icons`. This will load the appropriate SVG data for our icon.
 
-Next, we pass the `heart` data to our template in the `setup` method.
-
-Finally, we pass the icon data into the `ion-icon` component via the `icon` property.
+Then we pass the icon data into the `ion-icon` component via the `icon` property.
 
 Developers also have the option of setting different icons based upon the mode:
 
@@ -597,21 +504,9 @@ Developers also have the option of setting different icons based upon the mode:
   </ion-page>
 </template>
 
-<script>
+<script setup>
   import { logoAndroid, logoApple } from 'ionicons/icons';
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Icon',
-    components: {
-      IonContent,
-      IonPage,
-    },
-    setup() {
-      return { logoAndroid, logoApple };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -633,8 +528,7 @@ addIcons({
   heart: heart,
 });
 ```
-
-**Home.vue**
+**HomePage.vue**
 
 ```html
 <template>
@@ -645,17 +539,8 @@ addIcons({
   </ion-page>
 </template>
 
-<script>
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonPage,
-    },
-  });
+<script setup>
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -679,25 +564,20 @@ Let's take a look at how local component registration works:
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <SubComponent></SubComponent>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { IonContent, IonPage } from '@ionic/vue';
-  import Subcomponent from '@/components/Subcomponent.vue';
-
-  export default defineComponent({
-    components: { IonContent, IonPage, Subcomponent },
-  });
+  import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
-In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue`. Then, we provide them to our Vue component in the `components` option. From there, we can use the components in our template.
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. From there, we can use the components in our template.
 
-Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `Subcomponent` unless we register them there as well.
+Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `SubComponent` unless we register them there as well.
 
 For more information, see the <a href="https://v3.vuejs.org/guide/component-registration.html#local-registration" target="_blank" rel="noopener noreferrer">Local Registration Vue Documentation</a>.
 
@@ -726,18 +606,13 @@ app.component('ion-page', IonPage);
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <SubComponent></SubComponent>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import Subcomponent from '@/components/Subcomponent.vue';
-
-  export default defineComponent({
-    components: { Subcomponent },
-  });
+<script setup lang="ts">
+  import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -801,45 +676,27 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <img :src="photo" />
+      <img :src="imageSrc" />
       <ion-button @click="takePhoto()">Take Photo</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonHeader, IonPage, IonTitle } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  import { Plugins, CameraResultType } from '@capacitor/core';
-  const { Camera } = Plugins;
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonButton,
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-    },
-    setup() {
-      const imageSrc = ref('');
-      const takePhoto = async () => {
-        const image = await Camera.getPhoto({
-          quality: 90,
-          allowEditing: true,
-          resultType: CameraResultType.Uri,
-        });
-
-        imageSrc.value = image.webPath;
-      };
-
-      return {
-        photo: imageSrc,
-        takePhoto,
-      };
-    },
-  });
+  import { ref } from 'vue';
+  import { Camera, CameraResultType } from '@capacitor/camera';
+
+  const imageSrc = ref('');
+  const takePhoto = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri,
+    });
+
+    imageSrc.value = image.webPath;
+  };
 </script>
 ```
 

From 572013292f990707884f234d1ae481e301946470 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 10:50:20 -0400
Subject: [PATCH 2/7] Change import

---
 versioned_docs/version-v6/vue/quickstart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index f092266aa72..7c8f794ee49 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -374,7 +374,7 @@ Now that we have the pieces in place to navigate in our app, we need to create a
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue';
+import HomePage from '@/views/HomePage.vue';
 import NewItem from '@/views/NewItem.vue';
 
 const routes: Array<RouteRecordRaw> = [

From 3b6d8d4728e8db8f5f67b39103147325d616525d Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 10:56:23 -0400
Subject: [PATCH 3/7] Update versioned_docs/version-v6/vue/quickstart.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 versioned_docs/version-v6/vue/quickstart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 7c8f794ee49..ccfce8b361d 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -133,7 +133,7 @@ Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import HomePage from '@/views/HomePage.vue'
+import HomePage from '@/views/HomePage.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {

From 894dba6eea4413a32e669d14beb571a0ec4ae779 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 13:04:32 -0400
Subject: [PATCH 4/7] Add info about accessing components

---
 versioned_docs/version-v6/vue/quickstart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index ccfce8b361d..9812fd1bd6a 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -124,7 +124,7 @@ import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 
-We are going to use Vue's [`script setup`](https://vuejs.org/api/sfc-script-setup.html) syntax when creating components.
+Here we import the `IonApp` and `IonRouterOutlet` components that we will use in our template. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
 
 ## Initializing the router
 

From 203aae34123277779b07d72bff2ab99184dde97b Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 13:45:51 -0400
Subject: [PATCH 5/7] Update v7 docs

---
 docs/vue/quickstart.md                      | 274 +++++---------------
 versioned_docs/version-v6/vue/quickstart.md |  20 +-
 2 files changed, 70 insertions(+), 224 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index de98ac8bc6d..0a652b1de51 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -56,7 +56,7 @@ npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @ty
 
 5. Delete the `shims-vue.d.ts` file.
 
-6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `App.vue` and `views/Home.vue`.
+6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `App.vue` and `views/HomePage.vue`.
 
 ## A look at a Vue Component
 
@@ -91,27 +91,22 @@ If we open `App.vue` we should see the following:
   </ion-app>
 </template>
 
-<script lang="ts">
-  import { IonApp, IonRouterOutlet } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'App',
-    components: {
-      IonApp,
-      IonRouterOutlet,
-    },
-  });
+<script setup lang="ts">
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 
-Let's break it down, starting with the first group of imports.
+Let's break it down, starting with the imports.
 
 ```tsx
+<script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
+</script>
 ```
 
-To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your Build](#optimizing-your-build).
+To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
+
+You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your Build](#optimizing-your-build).
 
 From there, let's look at the template.
 
@@ -125,25 +120,6 @@ From there, let's look at the template.
 
 All Vue components must have a `<template>`. Inside of there, we place our `IonApp` and `IonRouterOutlet` components.
 
-Finally, let's look at the component definition:
-
-```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet,
-  },
-});
-```
-
-Vue 3 offers a new `defineComponent` function when creating components for improved tooling support, and we are going to use that here. We first define the name of the component, and then we supply the components that we will use in our template.
-
-There are several arguments you can supply here such as `methods`, `setup` and more. This is explained as part of Vue's [Composition API Documentation](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api).
-
 ## Initializing the router
 
 Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you are already familiar with Vue Router, you will be able to apply what you know to navigation in Ionic Vue. Let's take a look at the router configuration we mentioned before. In `router/index.ts`, you should see something similar to the following:
@@ -151,7 +127,7 @@ Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -161,7 +137,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
 ];
 
@@ -192,12 +168,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: () => import('@/views/Home.vue'),
+    component: () => import('@/views/HomePage.vue'),
   },
 ];
 ```
 
-Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/Home.vue'`, we could simply do `'@/views/Home.vue'`.
+Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/HomePage.vue'`, we could simply do `'@/views/HomePage.vue'`.
 
 ## A component with style
 
@@ -236,20 +212,8 @@ Currently, the `Home` component looks like so:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 
 <style scoped>
@@ -321,6 +285,10 @@ For brevity, we are excluding repeating parts of our component, like the functio
     </ion-content>
   </ion-page>
 </template>
+
+<script setup lang="ts">
+  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
 ```
 
 Here in our `IonContent`, we are adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem` as it is the centerpiece here.
@@ -355,20 +323,9 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
   </ion-page>
 </template>
 
-<script>
+<script setup>
+  import { IonBadge, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { add } from 'ionicons/icons';
-
-  ...
-
-  export default defineComponent({
-    name: 'Home',
-    ...,
-    setup() {
-      return {
-        add
-      }
-    }
-  })
 </script>
 ```
 
@@ -391,31 +348,10 @@ Now let's wire up a click handler to this. When clicking the FAB button, we want
   </ion-page>
 </template>
 
-<script>
+<script setup>
   import { add } from 'ionicons/icons';
   import { useRouter } from 'vue-router';
-
-  ...
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonFab,
-      IonFabButton,
-      IonHeader,
-      IonIcon,
-      IonPage,
-      IonTitle,
-      IonToolbar
-    },
-    setup() {
-      return {
-        router: useRouter(),
-        add
-      }
-    }
-  });
+  const router = useRouter();
 </script>
 ```
 
@@ -432,7 +368,7 @@ Now that we have the pieces in place to navigate in our app, we need to create a
 ```tsx
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
+import HomePage from '@/views/HomePage.vue';
 import NewItem from '@/views/NewItem.vue';
 
 const routes: Array<RouteRecordRaw> = [
@@ -443,7 +379,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'Home',
-    component: Home,
+    component: HomePage,
   },
   {
     path: '/new',
@@ -479,22 +415,8 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment.
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'NewItem',
-    components: {
-      IonBackButton,
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
 
@@ -527,21 +449,14 @@ In other framework integrations such as Ionic React, this is not needed as any `
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent },
-    setup() {
-      const content = ref();
-      const scrollToBottom = () => {
-        content.value.$el.scrollToBottom(300);
-      };
-
-      return { content, scrollToBottom };
-    },
-  });
+  import { ref } from 'vue';
+
+  const content = ref();
+  const scrollToBottom = () => {
+    content.value.$el.scrollToBottom(300);
+  };
 </script>
 ```
 
@@ -562,29 +477,15 @@ Per-Component Imports is the recommended approach to using Ionicons. This involv
   </ion-page>
 </template>
 
-<script>
+<script setup>
   import { heart } from 'ionicons/icons';
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Icon',
-    components: {
-      IonContent,
-      IonPage,
-    },
-    setup() {
-      return { heart };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
 Let's break down what we are doing here. First, we are importing the `heart` icon from `ionicons/icons`. This will load the appropriate SVG data for our icon.
 
-Next, we pass the `heart` data to our template in the `setup` method.
-
-Finally, we pass the icon data into the `ion-icon` component via the `icon` property.
+Then we pass the icon data into the `ion-icon` component via the `icon` property.
 
 Developers also have the option of setting different icons based upon the mode:
 
@@ -597,21 +498,9 @@ Developers also have the option of setting different icons based upon the mode:
   </ion-page>
 </template>
 
-<script>
+<script setup>
   import { logoAndroid, logoApple } from 'ionicons/icons';
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Icon',
-    components: {
-      IonContent,
-      IonPage,
-    },
-    setup() {
-      return { logoAndroid, logoApple };
-    },
-  });
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -634,7 +523,7 @@ addIcons({
 });
 ```
 
-**Home.vue**
+**HomePage.vue**
 
 ```html
 <template>
@@ -645,17 +534,8 @@ addIcons({
   </ion-page>
 </template>
 
-<script>
-  import { IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonContent,
-      IonPage,
-    },
-  });
+<script setup>
+  import { IonContent, IonIcon, IonPage } from '@ionic/vue';
 </script>
 ```
 
@@ -679,25 +559,20 @@ Let's take a look at how local component registration works:
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <SubComponent></SubComponent>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { IonContent, IonPage } from '@ionic/vue';
-  import Subcomponent from '@/components/Subcomponent.vue';
-
-  export default defineComponent({
-    components: { IonContent, IonPage, Subcomponent },
-  });
+  import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
-In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue`. Then, we provide them to our Vue component in the `components` option. From there, we can use the components in our template.
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. From there, we can use the components in our template.
 
-Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `Subcomponent` unless we register them there as well.
+Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `SubComponent` unless we register them there as well.
 
 For more information, see the <a href="https://v3.vuejs.org/guide/component-registration.html#local-registration" target="_blank" rel="noopener noreferrer">Local Registration Vue Documentation</a>.
 
@@ -726,18 +601,13 @@ app.component('ion-page', IonPage);
 <template>
   <ion-page>
     <ion-content>
-      <Subcomponent></Subcomponent>
+      <SubComponent></SubComponent>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import Subcomponent from '@/components/Subcomponent.vue';
-
-  export default defineComponent({
-    components: { Subcomponent },
-  });
+<script setup lang="ts">
+  import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -801,45 +671,27 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <img :src="photo" />
+      <img :src="imageSrc" />
       <ion-button @click="takePhoto()">Take Photo</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonHeader, IonPage, IonTitle } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  import { Plugins, CameraResultType } from '@capacitor/core';
-  const { Camera } = Plugins;
-
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      IonButton,
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-    },
-    setup() {
-      const imageSrc = ref('');
-      const takePhoto = async () => {
-        const image = await Camera.getPhoto({
-          quality: 90,
-          allowEditing: true,
-          resultType: CameraResultType.Uri,
-        });
-
-        imageSrc.value = image.webPath;
-      };
-
-      return {
-        photo: imageSrc,
-        takePhoto,
-      };
-    },
-  });
+  import { ref } from 'vue';
+  import { Camera, CameraResultType } from '@capacitor/camera';
+
+  const imageSrc = ref('');
+  const takePhoto = async () => {
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Uri,
+    });
+
+    imageSrc.value = image.webPath;
+  };
 </script>
 ```
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 9812fd1bd6a..dcd65df3c0e 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -96,13 +96,17 @@ import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 
-Let's break it down, starting with the first group of imports.
+Let's break it down, starting with the imports.
 
 ```tsx
+<script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
+</script>
 ```
 
-To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your Build](#optimizing-your-build).
+To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
+
+You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your Build](#optimizing-your-build).
 
 From there, let's look at the template.
 
@@ -116,16 +120,6 @@ From there, let's look at the template.
 
 All Vue components must have a `<template>`. Inside of there, we place our `IonApp` and `IonRouterOutlet` components.
 
-Finally, let's look at the script:
-
-```tsx
-<script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
-</script>
-```
-
-Here we import the `IonApp` and `IonRouterOutlet` components that we will use in our template. Vue's [`script setup` syntax](https://vuejs.org/api/sfc-script-setup.html) gives the template access to those components as `<ion-app>` and `<ion-router-outlet>`.
-
 ## Initializing the router
 
 Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you are already familiar with Vue Router, you will be able to apply what you know to navigation in Ionic Vue. Let's take a look at the router configuration we mentioned before. In `router/index.ts`, you should see something similar to the following:
@@ -293,7 +287,7 @@ For brevity, we are excluding repeating parts of our component, like the functio
 </template>
 
 <script setup lang="ts">
-import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonBadge, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonNote, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 

From a26b4264a686f0a47f2f0a6c49841c86d2670e2c Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 14:16:07 -0400
Subject: [PATCH 6/7] Fix whitespace

---
 docs/vue/quickstart.md                      | 2 +-
 versioned_docs/version-v6/vue/quickstart.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 0a652b1de51..b73bf3458a4 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -100,7 +100,7 @@ Let's break it down, starting with the imports.
 
 ```tsx
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index dcd65df3c0e..e4d81985d3e 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -100,7 +100,7 @@ Let's break it down, starting with the imports.
 
 ```tsx
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 

From cc394ee4020c7e5d9fc4e2251f812088b20b07f0 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 23 Mar 2023 14:32:59 -0400
Subject: [PATCH 7/7] Fix whitespace

---
 docs/vue/quickstart.md                      | 2 +-
 versioned_docs/version-v6/vue/quickstart.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index b73bf3458a4..c7a5e4bbde8 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -92,7 +92,7 @@ If we open `App.vue` we should see the following:
 </template>
 
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index e4d81985d3e..3a0aebc88a9 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -92,7 +92,7 @@ If we open `App.vue` we should see the following:
 </template>
 
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+  import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
 ```