From 940545327fc9283d5dd15f7d19876b36eb13ada9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 22 Jun 2022 00:11:17 -0400
Subject: [PATCH 1/8] docs(nav): nav link component playground

---
 docs/api/nav.md                               |  4 +-
 .../nav-link/angular/app_component_html.md    |  3 +
 .../nav/nav-link/angular/app_component_ts.md  | 13 +++
 .../nav/nav-link/angular/app_module_ts.md     | 20 +++++
 .../nav-link/angular/page_one_component_ts.md | 25 ++++++
 .../angular/page_three_component_ts.md        | 21 +++++
 .../nav-link/angular/page_two_component_ts.md | 30 +++++++
 static/usage/nav/nav-link/demo.html           | 84 +++++++++++++++++++
 static/usage/nav/nav-link/index.md            | 27 ++++++
 static/usage/nav/nav-link/javascript.md       | 67 +++++++++++++++
 10 files changed, 293 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/nav/nav-link/angular/app_component_html.md
 create mode 100644 static/usage/nav/nav-link/angular/app_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/app_module_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/nav-link/demo.html
 create mode 100644 static/usage/nav/nav-link/index.md
 create mode 100644 static/usage/nav/nav-link/javascript.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 678969eca07..4cd9f5587d7 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -42,7 +42,9 @@ TODO: Playground Example
 
 ## Using NavLink
 
-TODO: Playground Example
+import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
+
+<NavLinkExample />
 
 ## Navigation within a Modal
 
diff --git a/static/usage/nav/nav-link/angular/app_component_html.md b/static/usage/nav/nav-link/angular/app_component_html.md
new file mode 100644
index 00000000000..078dc23a556
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="pageOne"></ion-nav>
+```
diff --git a/static/usage/nav/nav-link/angular/app_component_ts.md b/static/usage/nav/nav-link/angular/app_component_ts.md
new file mode 100644
index 00000000000..4b261cd344f
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+})
+export class AppComponent {
+  pageOne = PageOneComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/angular/app_module_ts.md b/static/usage/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..599b26a1d54
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/nav/nav-link/angular/page_one_component_ts.md b/static/usage/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..0145562aeb9
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_one_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" [component]="pageTwo">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  pageTwo = PageTwoComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/angular/page_three_component_ts.md b/static/usage/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/nav/nav-link/angular/page_two_component_ts.md b/static/usage/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..a2938a0e7a1
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <div>
+        <ion-nav-link router-direction="forward" [component]="pageThree">
+          <ion-button>Go to Page Three</ion-button>
+        </ion-nav-link>
+      </div>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  pageThree = PageThreeComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/demo.html b/static/usage/nav/nav-link/demo.html
new file mode 100644
index 00000000000..d813dfe8a87
--- /dev/null
+++ b/static/usage/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | NavLink</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+      }
+    }
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+  </script>
+
+</body>
+
+</html>
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
new file mode 100644
index 00000000000..fe46fd7a3fa
--- /dev/null
+++ b/static/usage/nav/nav-link/index.md
@@ -0,0 +1,27 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_app_component_ts from './angular/app_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+  }}
+  src="usage/nav/nav-link/demo.html"
+/>
diff --git a/static/usage/nav/nav-link/javascript.md b/static/usage/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/nav/nav-link/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-app>
+  <ion-nav root="page-one"></ion-nav>
+</ion-app>
+
+<script>
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+    }
+  }
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+    }
+  }
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+    }
+  }
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```

From efcdd0dd8d09b840ffc29933df82f5801ec8259a Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 22 Jun 2022 11:55:31 -0400
Subject: [PATCH 2/8] wip(): react example

---
 docs/api/nav.md                               |  2 +
 static/usage/nav/nav-link/index.md            | 13 +++++++
 static/usage/nav/nav-link/react/main_tsx.md   | 11 ++++++
 .../usage/nav/nav-link/react/page_one_tsx.md  | 26 +++++++++++++
 .../nav/nav-link/react/page_three_tsx.md      | 24 ++++++++++++
 .../usage/nav/nav-link/react/page_two_tsx.md  | 39 +++++++++++++++++++
 6 files changed, 115 insertions(+)
 create mode 100644 static/usage/nav/nav-link/react/main_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_one_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_three_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_two_tsx.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 4cd9f5587d7..5e649ae8912 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -42,6 +42,8 @@ TODO: Playground Example
 
 ## Using NavLink
 
+NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating. 
+
 import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 <NavLinkExample />
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
index fe46fd7a3fa..0b309dc58f0 100644
--- a/static/usage/nav/nav-link/index.md
+++ b/static/usage/nav/nav-link/index.md
@@ -9,6 +9,11 @@ import angular_page_one_component_ts from './angular/page_one_component_ts.md';
 import angular_page_two_component_ts from './angular/page_two_component_ts.md';
 import angular_page_three_component_ts from './angular/page_three_component_ts.md';
 
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
 <Playground
   code={{
     javascript,
@@ -22,6 +27,14 @@ import angular_page_three_component_ts from './angular/page_three_component_ts.m
         'src/app/app.module.ts': angular_app_module_ts,
       },
     },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
   }}
   src="usage/nav/nav-link/demo.html"
 />
diff --git a/static/usage/nav/nav-link/react/main_tsx.md b/static/usage/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  return <IonNav root={() => <PageOne />}></IonNav>;
+}
+export default Example;
+```
diff --git a/static/usage/nav/nav-link/react/page_one_tsx.md b/static/usage/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..25cb4d087c2
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Page One</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page One</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Go to Page Two</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/nav/nav-link/react/page_three_tsx.md b/static/usage/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..02b5ba6b406
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function PageThree() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Three</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Three</h1>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/nav/nav-link/react/page_two_tsx.md b/static/usage/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..2ba3d75f7ab
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonHeader,
+  IonContent,
+  IonNavLink,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Two</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Two</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageThree />}>
+          <IonButton>Go to Page Three</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default PageTwo;
+```

From b27d02148e01406708ec1fc12a5b83b219693a92 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 5 Jul 2022 22:00:26 -0400
Subject: [PATCH 3/8] docs(): vue nav-link example

---
 static/usage/nav/nav-link/index.md            | 13 ++++++++
 static/usage/nav/nav-link/vue/example_vue.md  | 19 ++++++++++++
 static/usage/nav/nav-link/vue/page_one_vue.md | 31 +++++++++++++++++++
 .../usage/nav/nav-link/vue/page_three_vue.md  | 25 +++++++++++++++
 static/usage/nav/nav-link/vue/page_two_vue.md | 31 +++++++++++++++++++
 5 files changed, 119 insertions(+)
 create mode 100644 static/usage/nav/nav-link/vue/example_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_one_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_three_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_two_vue.md

diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
index 0b309dc58f0..e0bcea0661b 100644
--- a/static/usage/nav/nav-link/index.md
+++ b/static/usage/nav/nav-link/index.md
@@ -14,6 +14,11 @@ import react_page_one_tsx from './react/page_one_tsx.md';
 import react_page_two_tsx from './react/page_two_tsx.md';
 import react_page_three_tsx from './react/page_three_tsx.md';
 
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
 <Playground
   code={{
     javascript,
@@ -35,6 +40,14 @@ import react_page_three_tsx from './react/page_three_tsx.md';
         'src/page-three.tsx': react_page_three_tsx,
       },
     },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
   }}
   src="usage/nav/nav-link/demo.html"
 />
diff --git a/static/usage/nav/nav-link/vue/example_vue.md b/static/usage/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-nav :root="component"></ion-nav>
+</template>
+
+<script lang="ts">
+  import { IonNav } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav },
+    data() {
+      return {
+        component: PageOne,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_one_vue.md b/static/usage/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..0cd03901703
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" :component="component">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    data() {
+      return {
+        component: PageTwo,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_three_vue.md b/static/usage/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..542cfb916d9
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+
+  export default {
+    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_two_vue.md b/static/usage/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..a02a9bc6d9d
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <ion-nav-link router-direction="forward" :component="component">
+        <ion-button>Go to Page Three</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    data() {
+      return {
+        component: PageThree,
+      };
+    },
+  };
+</script>
+```

From fe321b77e1d26ecb97a2a2b6eb3c279886b51336 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 5 Jul 2022 22:03:41 -0400
Subject: [PATCH 4/8] docs(): make angular example match other examples

---
 static/usage/nav/nav-link/angular/app_component_html.md    | 2 +-
 static/usage/nav/nav-link/angular/app_component_ts.md      | 2 +-
 static/usage/nav/nav-link/angular/page_one_component_ts.md | 4 ++--
 static/usage/nav/nav-link/angular/page_two_component_ts.md | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/usage/nav/nav-link/angular/app_component_html.md b/static/usage/nav/nav-link/angular/app_component_html.md
index 078dc23a556..1534ea3a6ec 100644
--- a/static/usage/nav/nav-link/angular/app_component_html.md
+++ b/static/usage/nav/nav-link/angular/app_component_html.md
@@ -1,3 +1,3 @@
 ```html
-<ion-nav [root]="pageOne"></ion-nav>
+<ion-nav [root]="component"></ion-nav>
 ```
diff --git a/static/usage/nav/nav-link/angular/app_component_ts.md b/static/usage/nav/nav-link/angular/app_component_ts.md
index 4b261cd344f..472f41634da 100644
--- a/static/usage/nav/nav-link/angular/app_component_ts.md
+++ b/static/usage/nav/nav-link/angular/app_component_ts.md
@@ -8,6 +8,6 @@ import { PageOneComponent } from './page-one.component';
   templateUrl: 'app.component.html',
 })
 export class AppComponent {
-  pageOne = PageOneComponent;
+  component = PageOneComponent;
 }
 ```
diff --git a/static/usage/nav/nav-link/angular/page_one_component_ts.md b/static/usage/nav/nav-link/angular/page_one_component_ts.md
index 0145562aeb9..06c42b342cf 100644
--- a/static/usage/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/nav/nav-link/angular/page_one_component_ts.md
@@ -13,13 +13,13 @@ import { PageTwoComponent } from './page-two.component';
     </ion-header>
     <ion-content class="ion-padding">
       <h1>Page One</h1>
-      <ion-nav-link router-direction="forward" [component]="pageTwo">
+      <ion-nav-link router-direction="forward" [component]="component">
         <ion-button>Go to Page Two</ion-button>
       </ion-nav-link>
     </ion-content>
   `,
 })
 export class PageOneComponent {
-  pageTwo = PageTwoComponent;
+  component = PageTwoComponent;
 }
 ```
diff --git a/static/usage/nav/nav-link/angular/page_two_component_ts.md b/static/usage/nav/nav-link/angular/page_two_component_ts.md
index a2938a0e7a1..d6edd90a593 100644
--- a/static/usage/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/nav/nav-link/angular/page_two_component_ts.md
@@ -17,7 +17,7 @@ import { PageThreeComponent } from './page-three.component';
     <ion-content class="ion-padding">
       <h1>Page Two</h1>
       <div>
-        <ion-nav-link router-direction="forward" [component]="pageThree">
+        <ion-nav-link router-direction="forward" [component]="component">
           <ion-button>Go to Page Three</ion-button>
         </ion-nav-link>
       </div>
@@ -25,6 +25,6 @@ import { PageThreeComponent } from './page-three.component';
   `,
 })
 export class PageTwoComponent {
-  pageThree = PageThreeComponent;
+  component = PageThreeComponent;
 }
 ```

From 374e91e9c3c417df177b6c5ef6a1119f8135c09e Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Jul 2022 13:28:07 -0400
Subject: [PATCH 5/8] fix(): render example in device frame

---
 static/usage/nav/nav-link/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
index e0bcea0661b..07f88bf10f1 100644
--- a/static/usage/nav/nav-link/index.md
+++ b/static/usage/nav/nav-link/index.md
@@ -50,4 +50,5 @@ import vue_page_three from './vue/page_three_vue.md';
     },
   }}
   src="usage/nav/nav-link/demo.html"
+  devicePreview
 />

From 4729edb8a4aa7dbec858b084fdb045c69eac324d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Jul 2022 13:38:03 -0400
Subject: [PATCH 6/8] fix(): react back button

---
 static/usage/nav/nav-link/react/page_one_tsx.md   | 6 +++---
 static/usage/nav/nav-link/react/page_three_tsx.md | 6 +++---
 static/usage/nav/nav-link/react/page_two_tsx.md   | 5 ++---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/static/usage/nav/nav-link/react/page_one_tsx.md b/static/usage/nav/nav-link/react/page_one_tsx.md
index 25cb4d087c2..303ad18547a 100644
--- a/static/usage/nav/nav-link/react/page_one_tsx.md
+++ b/static/usage/nav/nav-link/react/page_one_tsx.md
@@ -1,12 +1,12 @@
 ```tsx
 import React from 'react';
-import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
 
 import PageTwo from './page-two';
 
 function PageOne() {
   return (
-    <IonPage>
+    <>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page One</IonTitle>
@@ -18,7 +18,7 @@ function PageOne() {
           <IonButton>Go to Page Two</IonButton>
         </IonNavLink>
       </IonContent>
-    </IonPage>
+    </>
   );
 }
 
diff --git a/static/usage/nav/nav-link/react/page_three_tsx.md b/static/usage/nav/nav-link/react/page_three_tsx.md
index 02b5ba6b406..451d30db85d 100644
--- a/static/usage/nav/nav-link/react/page_three_tsx.md
+++ b/static/usage/nav/nav-link/react/page_three_tsx.md
@@ -1,10 +1,10 @@
 ```tsx
 import React from 'react';
-import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
 
 function PageThree() {
   return (
-    <IonPage>
+    <>
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
@@ -16,7 +16,7 @@ function PageThree() {
       <IonContent class="ion-padding">
         <h1>Page Three</h1>
       </IonContent>
-    </IonPage>
+    </>
   );
 }
 
diff --git a/static/usage/nav/nav-link/react/page_two_tsx.md b/static/usage/nav/nav-link/react/page_two_tsx.md
index 2ba3d75f7ab..fd3f8764873 100644
--- a/static/usage/nav/nav-link/react/page_two_tsx.md
+++ b/static/usage/nav/nav-link/react/page_two_tsx.md
@@ -9,14 +9,13 @@ import {
   IonNavLink,
   IonToolbar,
   IonTitle,
-  IonPage,
 } from '@ionic/react';
 
 import PageThree from './page-three';
 
 function PageTwo() {
   return (
-    <IonPage>
+    <>
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
@@ -31,7 +30,7 @@ function PageTwo() {
           <IonButton>Go to Page Three</IonButton>
         </IonNavLink>
       </IonContent>
-    </IonPage>
+    </>
   );
 }
 

From 4a3e5396baa50da2de5923881bee6fce4efbf6d7 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Jul 2022 13:39:24 -0400
Subject: [PATCH 7/8] fix(): vue back button

---
 static/usage/nav/nav-link/vue/page_one_vue.md | 28 +++++------
 .../usage/nav/nav-link/vue/page_three_vue.md  | 28 +++++------
 static/usage/nav/nav-link/vue/page_two_vue.md | 49 +++++++++++++------
 3 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/static/usage/nav/nav-link/vue/page_one_vue.md b/static/usage/nav/nav-link/vue/page_one_vue.md
index 0cd03901703..f3635e1db37 100644
--- a/static/usage/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/nav/nav-link/vue/page_one_vue.md
@@ -1,26 +1,24 @@
 ```html
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Page One</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Page One</h1>
-      <ion-nav-link router-direction="forward" :component="component">
-        <ion-button>Go to Page Two</ion-button>
-      </ion-nav-link>
-    </ion-content>
-  </ion-page>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page One</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Go to Page Two</ion-button>
+    </ion-nav-link>
+  </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
   export default {
-    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
         component: PageTwo,
diff --git a/static/usage/nav/nav-link/vue/page_three_vue.md b/static/usage/nav/nav-link/vue/page_three_vue.md
index 542cfb916d9..54d6acf24c9 100644
--- a/static/usage/nav/nav-link/vue/page_three_vue.md
+++ b/static/usage/nav/nav-link/vue/page_three_vue.md
@@ -1,25 +1,23 @@
 ```html
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
-        </ion-buttons>
-        <ion-title>Page Three</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Page Three</h1>
-    </ion-content>
-  </ion-page>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Three</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Three</h1>
+  </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
 
   export default {
-    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
   };
 </script>
 ```
diff --git a/static/usage/nav/nav-link/vue/page_two_vue.md b/static/usage/nav/nav-link/vue/page_two_vue.md
index a02a9bc6d9d..0d736d69c88 100644
--- a/static/usage/nav/nav-link/vue/page_two_vue.md
+++ b/static/usage/nav/nav-link/vue/page_two_vue.md
@@ -1,26 +1,45 @@
 ```html
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Page Two</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <h1>Page Two</h1>
-      <ion-nav-link router-direction="forward" :component="component">
-        <ion-button>Go to Page Three</ion-button>
-      </ion-nav-link>
-    </ion-content>
-  </ion-page>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Two</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Go to Page Three</ion-button>
+    </ion-nav-link>
+  </ion-content>
 </template>
 
 <script lang="ts">
-  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import {
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonContent,
+    IonNavLink,
+    IonButton,
+    IonButtons,
+    IonBackButton,
+  } from '@ionic/vue';
   import PageThree from './PageThree.vue';
 
   export default {
-    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    components: {
+      IonHeader,
+      IonTitle,
+      IonToolbar,
+      IonContent,
+      IonNavLink,
+      IonButton,
+      IonButtons,
+      IonBackButton,
+    },
     data() {
       return {
         component: PageThree,

From cab2a2eab182397e2c94f6deb6e40f7a3a5523b4 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Jul 2022 13:41:04 -0400
Subject: [PATCH 8/8] fix(): angular examples

---
 static/usage/nav/nav-link/angular/app_module_ts.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/nav/nav-link/angular/app_module_ts.md b/static/usage/nav/nav-link/angular/app_module_ts.md
index 599b26a1d54..17eb272293f 100644
--- a/static/usage/nav/nav-link/angular/app_module_ts.md
+++ b/static/usage/nav/nav-link/angular/app_module_ts.md
@@ -12,7 +12,7 @@ import { PageTwoComponent } from './page-two.component';
 import { PageThreeComponent } from './page-three.component';
 
 @NgModule({
-  imports: [BrowserModule, RouterModule, IonicModule.forRoot({})],
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
   declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
   bootstrap: [AppComponent],
 })