diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md
index fa4505c70d..e2d7b1436f 100644
--- a/docs/angular/quickstart.md
+++ b/docs/angular/quickstart.md
@@ -55,22 +55,24 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src/app` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── app.component.html
-├── app.component.scss
-├── app.component.ts
-├── app.routes.ts
-└── home/
-    ├── home.page.html
-    ├── home.page.scss
-    ├── home.page.spec.ts
-    └── home.page.ts
+└── src/
+    └── app
+        ├── app.component.html
+        ├── app.component.scss
+        ├── app.component.ts
+        ├── app.routes.ts
+        └── home/
+            ├── home.page.html
+            ├── home.page.scss
+            ├── home.page.spec.ts
+            └── home.page.ts
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/app/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -79,7 +81,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `app.component.ts`:
 
-```ts
+```ts title="src/app/app.component.ts"
 import { Component } from '@angular/core';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
@@ -95,7 +97,7 @@ export class AppComponent {
 
 And its template in `app.component.html`:
 
-```html
+```html title="src/app/app.component.html"
 <ion-app>
   <ion-router-outlet></ion-router-outlet>
 </ion-app>
@@ -107,7 +109,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 Routes are defined in `app.routes.ts`:
 
-```ts
+```ts title="src/app/app.routes.ts"
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
@@ -127,9 +129,9 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `home/home.page.ts`, imports the Ionic components it uses:
+The Home page component, defined in `home.page.ts`, imports the Ionic components it uses:
 
-```ts
+```ts title="src/app/home/home.page.ts"
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 
@@ -146,7 +148,7 @@ export class HomePage {
 
 And the template, in the `home.page.html` file, uses those components:
 
-```html
+```html title="src/app/home/home.page.html"
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title> Blank </ion-title>
@@ -170,17 +172,17 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
 
-```html
+```html title="src/app/home/home.page.html"
 <ion-content>
   <!-- existing content -->
 
@@ -190,7 +192,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in `home.page.ts`:
 
-```ts
+```ts title="src/app/home/home.page.ts"
 import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
@@ -209,9 +211,9 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In your `new/new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
 
-```html
+```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-buttons slot="start">
@@ -222,9 +224,9 @@ In your `new/new.page.html`, you can add a [Back Button](/docs/api/back-button)
 </ion-header>
 ```
 
-And import `IonBackButton` and `IonButtons` in `new/new.page.ts`:
+And import `IonBackButton` and `IonButtons` in `new.page.ts`:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
@@ -237,15 +239,15 @@ The `ion-back-button` will automatically handle navigation back to the previous
 
 ## Navigate to the New Page
 
-To navigate to the new page, update the button in `home/home.page.html`:
+To navigate to the new page, update the button in `home.page.html`:
 
-```html
+```html title="src/app/home/home.page.html"
 <ion-button [routerLink]="['/new']">Navigate</ion-button>
 ```
 
-Then, import `RouterLink` in `home/home.page.ts`:
+Then, import `RouterLink` in `home.page.ts`:
 
-```ts
+```ts title="src/app/home/home.page.ts"
 import { RouterLink } from '@angular/router';
 
 @Component({
@@ -255,14 +257,14 @@ import { RouterLink } from '@angular/router';
 ```
 
 :::info
-Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation#navigating-to-different-routes) for more information.
+Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
 :::
 
 ## Add Icons to the New Page
 
-Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new/new.page.html`:
+Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`:
 
-```html
+```html title="src/app/new/new.page.html"
 <ion-content>
   <!-- existing content -->
 
@@ -271,9 +273,9 @@ Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. Y
 </ion-content>
 ```
 
-You'll also need to import and register these icons in `new/new.page.ts`:
+You'll also need to import and register these icons in `new.page.ts`:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 // ...existing imports...
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
@@ -287,7 +289,7 @@ import { heart, logoIonic } from 'ionicons/icons';
 
 Then, update the constructor of the page to use `addIcons`:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 export class NewPage implements OnInit {
   constructor() {
     addIcons({ heart, logoIonic });
@@ -299,15 +301,15 @@ export class NewPage implements OnInit {
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update the `ion-content` in your `new/new.page.html` to include a button and some items after the existing icons:
+Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons:
 
-```html
+```html title="src/app/new/new.page.html"
 <ion-content [fullscreen]="true" #content>
   <ion-header collapse="condense">
     <ion-toolbar>
@@ -331,7 +333,7 @@ Update the `ion-content` in your `new/new.page.html` to include a button and som
 
 In the component, add the `ViewChild` import, the new component imports and define the `scrollToBottom` function:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 import { Component, OnInit, ViewChild } from '@angular/core';
 import {
   IonBackButton,
@@ -385,7 +387,7 @@ To call methods on Ionic components:
 1. Create a `ViewChild` reference for the component
 2. Call the method directly on the component instance
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/javascript/quickstart.md b/docs/javascript/quickstart.md
index 7d958bc4a9..7da5f0e77f 100644
--- a/docs/javascript/quickstart.md
+++ b/docs/javascript/quickstart.md
@@ -87,7 +87,7 @@ npm install vite-plugin-static-copy --save-dev
 
 Add a `vite.config.js` file at the project root with the following:
 
-```js
+```js title="vite.config.js"
 import { defineConfig } from 'vite';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
@@ -120,20 +120,16 @@ This copies the necessary Ionic files that Capacitor will need to work with lazy
 
 ## Initialize Ionic
 
-Replace the contents of `src/main.js` with the following:
-
-```js
-// Determine if the app is running in Capacitor
-const isCapacitor = location.protocol === 'capacitor:' || (window.Capacitor && window.Capacitor.platform !== 'web');
+Replace the contents of `main.js` with the following:
 
+```js title="src/main.js"
 // Load Ionic
-if (isCapacitor) {
-  // In Capacitor, import Ionic directly from copied dist files
-  import(/* @vite-ignore */ location.origin + '/ionic.esm.js');
-} else {
-  // In the browser, use the normal loader
-  import('@ionic/core/loader').then((m) => m.defineCustomElements(window));
-}
+(async () => {
+  // Set the path to a variable to
+  // prevent Vite from analyzing in dev
+  const ionicPath = '/ionic.esm.js';
+  await import(/* @vite-ignore */ ionicPath);
+})();
 
 // Core CSS required for Ionic components to work properly
 import '@ionic/core/css/core.css';
@@ -158,7 +154,7 @@ This initializes Ionic based on the environment and then imports all of the avai
 
 Update your `index.html` to configure the metadata and use Ionic components:
 
-```html
+```html title="index.html"
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
@@ -190,7 +186,7 @@ This sets up the root of your application, using Ionic's `ion-app`, `ion-router`
 
 Routes are defined in the `index.html` using `ion-route` components inside the `ion-router`:
 
-```html
+```html title="index.html"
 <ion-router>
   <ion-route url="/" component="home-page"></ion-route>
   <ion-route url="/new" component="new-page"></ion-route>
@@ -203,7 +199,7 @@ When you visit the root URL (`/`), the `home-page` component will be loaded. Whe
 
 Create a new directory called `pages` inside the `src` folder, then add a file called `HomePage.js` in that directory with the following content:
 
-```js
+```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -231,12 +227,12 @@ customElements.define('home-page', HomePage);
 This creates a custom element called `home-page` that contains the layout for your Home page. The page uses Ionic's layout components to create a header with a toolbar and scrollable content area.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
-Next, add a `<script>` tag before the `src/main.js` import in `index.html` to import the Home page:
+Next, add a `<script>` tag before the `main.js` import in `index.html` to import the Home page:
 
-```html
+```html title="index.html"
 <script type="module">
   import './src/pages/HomePage.js';
 </script>
@@ -250,9 +246,9 @@ At this point your browser should be displaying the Home page.
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) to navigate to another page. Update the `HomePage` component in `src/pages/HomePage.js`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
 
-```js
+```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -283,7 +279,7 @@ customElements.define('home-page', HomePage);
 
 Add a new file named `NewPage.js` to `src/pages` with the following content:
 
-```js
+```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -305,11 +301,11 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
 Next, update the `<script>` tag which imports the Home page in the `index.html` file to also import the New page:
 
-```html
+```html title="index.html"
 <script type="module">
   import './src/pages/HomePage.js';
   import './src/pages/NewPage.js';
@@ -318,9 +314,9 @@ Next, update the `<script>` tag which imports the Home page in the `index.html`
 
 ## Navigate to the New Page
 
-To navigate to the new page, update the button in `src/pages/HomePage.js` to be inside of an `ion-router-link`:
+To navigate to the new page, update the button in `HomePage.js` to be inside of an `ion-router-link`:
 
-```html
+```html title="src/pages/HomePage.js"
 <ion-router-link href="/new">
   <ion-button>Navigate</ion-button>
 </ion-router-link>
@@ -329,16 +325,16 @@ To navigate to the new page, update the button in `src/pages/HomePage.js` to be
 When the button is clicked, Ionic's router will automatically navigate to the `/new` route and display the `new-page` component.
 
 :::info
-Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. See the [Ionic Router documentation](/docs/api/router) for more information.
+Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. See the [Ionic Router documentation](/docs/api/router.md) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic JavaScript comes with [Ionicons](https://ionic.io/ionicons/) support. To use icons, you need to import them, register them with `addIcons`, and then use them with the `ion-icon` component.
 
-Add the necessary imports and register the icons in `src/main.js`:
+Add the necessary imports and register the icons in `main.js`:
 
-```js
+```js title="src/main.js"
 // ...Ionic initialization
 
 // Icon imports
@@ -350,9 +346,9 @@ addIcons({ heart, logoIonic });
 // ...CSS imports
 ```
 
-Next, update `src/pages/NewPage.js` to include the icons:
+Next, update `NewPage.js` to include the icons:
 
-```js
+```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -377,13 +373,13 @@ class NewPage extends HTMLElement {
 customElements.define('new-page', NewPage);
 ```
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
-Let's add a button that can scroll the content area to the bottom. Update `src/pages/NewPage.js` to include scrollable content and a scroll button:
+Let's add a button that can scroll the content area to the bottom. Update `NewPage.js` to include scrollable content and a scroll button:
 
-```js
+```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -446,7 +442,7 @@ To call methods on Ionic components:
 1. Get a reference to the component element using `querySelector`
 2. Call the method directly on the element
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index d0242135d5..220dc01058 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -53,21 +53,22 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.tsx
-├── components
-│   ├── ExploreContainer.css
-│   └── ExploreContainer.tsx
-├── main.tsx
-└──  pages
-    ├── Home.css
-    └── Home.tsx
+└── src/
+    ├── App.tsx
+    ├── components
+    │   ├── ExploreContainer.css
+    │   └── ExploreContainer.tsx
+    ├── main.tsx
+    └── pages
+        ├── Home.css
+        └── Home.tsx
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -76,7 +77,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
@@ -110,7 +111,7 @@ This sets up the root of your application, using Ionic's `IonApp` and `IonReactR
 
 Routes are defined within the `IonRouterOutlet` in `App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -125,9 +126,9 @@ When you visit the root URL (`/`), the `Home` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `pages/Home.tsx`, imports the Ionic components and defines the page template:
+The Home page component, defined in `Home.tsx`, imports the Ionic components and defines the page template:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';
@@ -155,17 +156,17 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `pages/Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 // ...existing imports...
 
@@ -191,9 +192,9 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `pages/New.tsx`:
+Create a new page at `New.tsx`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const New: React.FC = () => {
@@ -221,9 +222,9 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
@@ -231,13 +232,13 @@ When creating your own pages, always use `IonPage` as the root component. This i
 
 To navigate to the new page, create a route for it by first importing it at the top of `App.tsx` after the `Home` import:
 
-```tsx
+```tsx title="src/App.tsx"
 import New from './pages/New';
 ```
 
 Then, add its route in `IonRouterOutlet`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -251,45 +252,45 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `pages/Home.tsx`:
+Once that is done, update the button in `Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 <IonButton routerLink="/new">Navigate</IonButton>
 ```
 
 :::info
-Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation#navigating-using-history) for more information.
+Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
 ```
 
 Then, include them inside of the `IonContent`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonIcon icon={heart} />
 <IonIcon icon={logoIonic} />
 ```
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+Update `New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonContent ref={content}>
   <IonIcon icon={heart} />
   <IonIcon icon={logoIonic} />
@@ -307,7 +308,7 @@ Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some item
 
 Then, add the imports for the additional components and define the `scrollToBottom` function:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { useRef } from 'react';
 import { IonButton, IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
@@ -334,7 +335,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 6f96596157..b1bb31141a 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -53,19 +53,20 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.vue
-├── main.ts
-├── router
-│   └── index.ts
-└── views
-    └── HomePage.vue
+└── src/
+    ├── App.vue
+    ├── main.ts
+    ├── router
+    │   └── index.ts
+    └── views
+       └── HomePage.vue
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -74,7 +75,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.vue`:
 
-```vue
+```vue title="src/App.vue"
 <template>
   <ion-app>
     <ion-router-outlet />
@@ -92,7 +93,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 Routes are defined in `router/index.ts`:
 
-```ts
+```ts title="src/router/index.ts"
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import HomePage from '../views/HomePage.vue';
@@ -121,9 +122,9 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `views/HomePage.vue`, imports the Ionic components and defines the page template:
+The Home page component, defined in `HomePage.vue`, imports the Ionic components and defines the page template:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -159,17 +160,17 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <ion-content>
   <!-- existing content -->
 
@@ -179,7 +180,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in the `<script>` tag:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <script setup lang="ts">
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
@@ -187,9 +188,9 @@ import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from
 
 ## Add a New Page
 
-Create a new page at `views/NewPage.vue`:
+Create a new page at `NewPage.vue`:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -216,9 +217,9 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
@@ -226,15 +227,13 @@ When creating your own pages, always use `ion-page` as the root component. This
 
 To navigate to the new page, create a route for it by first importing it at the top of `router/index.ts` after the `HomePage` import:
 
-To navigate to a new page, add the route to `router/index.ts`
-
-```tsx
+```ts title="src/router/index.ts"
 import NewPage from '../views/NewPage.vue';
 ```
 
 Then, add its route in the `routes` array:
 
-```tsx
+```ts title="src/router/index.ts"
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -253,23 +252,23 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-Once that is done, update the button in `views/HomePage.vue`:
+Once that is done, update the button in `HomePage.vue`:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <ion-button router-link="/new">Navigate</ion-button>
 ```
 
 :::info
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `ion-icon` component.
 
-Update the imports in `views/NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import { heart, logoIonic } from 'ionicons/icons';
@@ -278,22 +277,22 @@ import { heart, logoIonic } from 'ionicons/icons';
 
 Then, include them inside of the `ion-content`:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <ion-icon :icon="heart"></ion-icon>
 <ion-icon :icon="logoIonic"></ion-icon>
 ```
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
+Update `NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <ion-content ref="content">
   <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
 
@@ -306,7 +305,7 @@ Update `views/NewPage.vue` to include a ref on `ion-content` and a button and so
 
 In the script section, add the new component imports and define the `scrollToBottom` function:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
 import {
   IonBackButton,
@@ -340,7 +339,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
@@ -371,15 +370,15 @@ Ionic Vue projects are created with TypeScript by default, but you can easily co
 npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
 ```
 
-2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `router/index.ts`, `main.ts`, and files in the `tests` directory.
+2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `src/router/index.ts`, `src/main.ts`, and files in the `tests` directory.
 
 3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
 4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: 'off'` from `.eslintrc.js`.
 
-5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `router/index.js`.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-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`.
+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 `src/App.vue` and `src/views/HomePage.vue`.
 
 7. Delete `tsconfig.json` and `vite-env.d.ts`.
 
diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md
index d0242135d5..220dc01058 100644
--- a/versioned_docs/version-v6/react/quickstart.md
+++ b/versioned_docs/version-v6/react/quickstart.md
@@ -53,21 +53,22 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.tsx
-├── components
-│   ├── ExploreContainer.css
-│   └── ExploreContainer.tsx
-├── main.tsx
-└──  pages
-    ├── Home.css
-    └── Home.tsx
+└── src/
+    ├── App.tsx
+    ├── components
+    │   ├── ExploreContainer.css
+    │   └── ExploreContainer.tsx
+    ├── main.tsx
+    └── pages
+        ├── Home.css
+        └── Home.tsx
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -76,7 +77,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
@@ -110,7 +111,7 @@ This sets up the root of your application, using Ionic's `IonApp` and `IonReactR
 
 Routes are defined within the `IonRouterOutlet` in `App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -125,9 +126,9 @@ When you visit the root URL (`/`), the `Home` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `pages/Home.tsx`, imports the Ionic components and defines the page template:
+The Home page component, defined in `Home.tsx`, imports the Ionic components and defines the page template:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';
@@ -155,17 +156,17 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `pages/Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 // ...existing imports...
 
@@ -191,9 +192,9 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `pages/New.tsx`:
+Create a new page at `New.tsx`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const New: React.FC = () => {
@@ -221,9 +222,9 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
@@ -231,13 +232,13 @@ When creating your own pages, always use `IonPage` as the root component. This i
 
 To navigate to the new page, create a route for it by first importing it at the top of `App.tsx` after the `Home` import:
 
-```tsx
+```tsx title="src/App.tsx"
 import New from './pages/New';
 ```
 
 Then, add its route in `IonRouterOutlet`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -251,45 +252,45 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `pages/Home.tsx`:
+Once that is done, update the button in `Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 <IonButton routerLink="/new">Navigate</IonButton>
 ```
 
 :::info
-Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation#navigating-using-history) for more information.
+Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
 ```
 
 Then, include them inside of the `IonContent`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonIcon icon={heart} />
 <IonIcon icon={logoIonic} />
 ```
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+Update `New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonContent ref={content}>
   <IonIcon icon={heart} />
   <IonIcon icon={logoIonic} />
@@ -307,7 +308,7 @@ Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some item
 
 Then, add the imports for the additional components and define the `scrollToBottom` function:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { useRef } from 'react';
 import { IonButton, IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
@@ -334,7 +335,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 8ff548436d..b1bb31141a 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -53,19 +53,20 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.vue
-├── main.ts
-├── router
-│   └── index.ts
-└── views
-    └── HomePage.vue
+└── src/
+    ├── App.vue
+    ├── main.ts
+    ├── router
+    │   └── index.ts
+    └── views
+       └── HomePage.vue
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -74,7 +75,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.vue`:
 
-```tsx
+```vue title="src/App.vue"
 <template>
   <ion-app>
     <ion-router-outlet />
@@ -92,7 +93,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 Routes are defined in `router/index.ts`:
 
-```ts
+```ts title="src/router/index.ts"
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import HomePage from '../views/HomePage.vue';
@@ -121,9 +122,9 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `views/HomePage.vue`, imports the Ionic components and defines the page template:
+The Home page component, defined in `HomePage.vue`, imports the Ionic components and defines the page template:
 
-```html
+```vue title="src/views/HomePage.vue"
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -153,23 +154,23 @@ The Home page component, defined in `views/HomePage.vue`, imports the Ionic comp
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
 
-```html
+```vue title="src/views/HomePage.vue"
 <ion-content>
   <!-- existing content -->
 
@@ -179,17 +180,17 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in the `<script>` tag:
 
-```html
+```vue title="src/views/HomePage.vue"
 <script setup lang="ts">
-  import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
 ## Add a New Page
 
-Create a new page at `views/NewPage.vue`:
+Create a new page at `NewPage.vue`:
 
-```html
+```vue title="src/views/NewPage.vue"
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -212,13 +213,13 @@ Create a new page at `views/NewPage.vue`:
 </template>
 
 <script setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
@@ -226,15 +227,13 @@ When creating your own pages, always use `ion-page` as the root component. This
 
 To navigate to the new page, create a route for it by first importing it at the top of `router/index.ts` after the `HomePage` import:
 
-To navigate to a new page, add the route to `router/index.ts`
-
-```tsx
+```ts title="src/router/index.ts"
 import NewPage from '../views/NewPage.vue';
 ```
 
 Then, add its route in the `routes` array:
 
-```tsx
+```ts title="src/router/index.ts"
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -253,47 +252,47 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-Once that is done, update the button in `views/HomePage.vue`:
+Once that is done, update the button in `HomePage.vue`:
 
-```tsx
+```vue title="src/views/HomePage.vue"
 <ion-button router-link="/new">Navigate</ion-button>
 ```
 
 :::info
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `ion-icon` component.
 
-Update the imports in `views/NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```html
+```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { heart, logoIonic } from 'ionicons/icons';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { heart, logoIonic } from 'ionicons/icons';
 </script>
 ```
 
 Then, include them inside of the `ion-content`:
 
-```tsx
+```vue title="src/views/NewPage.vue"
 <ion-icon :icon="heart"></ion-icon>
 <ion-icon :icon="logoIonic"></ion-icon>
 ```
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
+Update `NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
 
-```html
+```vue title="src/views/NewPage.vue"
 <ion-content ref="content">
   <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
 
@@ -306,29 +305,29 @@ Update `views/NewPage.vue` to include a ref on `ion-content` and a button and so
 
 In the script section, add the new component imports and define the `scrollToBottom` function:
 
-```html
+```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
-  import {
-    IonBackButton,
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  } from '@ionic/vue';
-  import { heart, logoIonic } from 'ionicons/icons';
-  import { ref } from 'vue';
-
-  const content = ref();
-
-  const scrollToBottom = () => {
-    content.value.$el.scrollToBottom(300);
-  };
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
+import { heart, logoIonic } from 'ionicons/icons';
+import { ref } from 'vue';
+
+const content = ref();
+
+const scrollToBottom = () => {
+  content.value.$el.scrollToBottom(300);
+};
 </script>
 ```
 
@@ -340,7 +339,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
@@ -371,15 +370,15 @@ Ionic Vue projects are created with TypeScript by default, but you can easily co
 npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
 ```
 
-2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `router/index.ts`, `main.ts`, and files in the `tests` directory.
+2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `src/router/index.ts`, `src/main.ts`, and files in the `tests` directory.
 
 3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
 4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: 'off'` from `.eslintrc.js`.
 
-5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `router/index.js`.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-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`.
+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 `src/App.vue` and `src/views/HomePage.vue`.
 
 7. Delete `tsconfig.json` and `vite-env.d.ts`.
 
diff --git a/versioned_docs/version-v7/angular/quickstart.md b/versioned_docs/version-v7/angular/quickstart.md
index fa4505c70d..e2d7b1436f 100644
--- a/versioned_docs/version-v7/angular/quickstart.md
+++ b/versioned_docs/version-v7/angular/quickstart.md
@@ -55,22 +55,24 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src/app` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── app.component.html
-├── app.component.scss
-├── app.component.ts
-├── app.routes.ts
-└── home/
-    ├── home.page.html
-    ├── home.page.scss
-    ├── home.page.spec.ts
-    └── home.page.ts
+└── src/
+    └── app
+        ├── app.component.html
+        ├── app.component.scss
+        ├── app.component.ts
+        ├── app.routes.ts
+        └── home/
+            ├── home.page.html
+            ├── home.page.scss
+            ├── home.page.spec.ts
+            └── home.page.ts
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/app/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -79,7 +81,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `app.component.ts`:
 
-```ts
+```ts title="src/app/app.component.ts"
 import { Component } from '@angular/core';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
@@ -95,7 +97,7 @@ export class AppComponent {
 
 And its template in `app.component.html`:
 
-```html
+```html title="src/app/app.component.html"
 <ion-app>
   <ion-router-outlet></ion-router-outlet>
 </ion-app>
@@ -107,7 +109,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 Routes are defined in `app.routes.ts`:
 
-```ts
+```ts title="src/app/app.routes.ts"
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
@@ -127,9 +129,9 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `home/home.page.ts`, imports the Ionic components it uses:
+The Home page component, defined in `home.page.ts`, imports the Ionic components it uses:
 
-```ts
+```ts title="src/app/home/home.page.ts"
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 
@@ -146,7 +148,7 @@ export class HomePage {
 
 And the template, in the `home.page.html` file, uses those components:
 
-```html
+```html title="src/app/home/home.page.html"
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title> Blank </ion-title>
@@ -170,17 +172,17 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
 
-```html
+```html title="src/app/home/home.page.html"
 <ion-content>
   <!-- existing content -->
 
@@ -190,7 +192,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in `home.page.ts`:
 
-```ts
+```ts title="src/app/home/home.page.ts"
 import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
@@ -209,9 +211,9 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In your `new/new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
 
-```html
+```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-buttons slot="start">
@@ -222,9 +224,9 @@ In your `new/new.page.html`, you can add a [Back Button](/docs/api/back-button)
 </ion-header>
 ```
 
-And import `IonBackButton` and `IonButtons` in `new/new.page.ts`:
+And import `IonBackButton` and `IonButtons` in `new.page.ts`:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
@@ -237,15 +239,15 @@ The `ion-back-button` will automatically handle navigation back to the previous
 
 ## Navigate to the New Page
 
-To navigate to the new page, update the button in `home/home.page.html`:
+To navigate to the new page, update the button in `home.page.html`:
 
-```html
+```html title="src/app/home/home.page.html"
 <ion-button [routerLink]="['/new']">Navigate</ion-button>
 ```
 
-Then, import `RouterLink` in `home/home.page.ts`:
+Then, import `RouterLink` in `home.page.ts`:
 
-```ts
+```ts title="src/app/home/home.page.ts"
 import { RouterLink } from '@angular/router';
 
 @Component({
@@ -255,14 +257,14 @@ import { RouterLink } from '@angular/router';
 ```
 
 :::info
-Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation#navigating-to-different-routes) for more information.
+Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
 :::
 
 ## Add Icons to the New Page
 
-Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new/new.page.html`:
+Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`:
 
-```html
+```html title="src/app/new/new.page.html"
 <ion-content>
   <!-- existing content -->
 
@@ -271,9 +273,9 @@ Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. Y
 </ion-content>
 ```
 
-You'll also need to import and register these icons in `new/new.page.ts`:
+You'll also need to import and register these icons in `new.page.ts`:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 // ...existing imports...
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
@@ -287,7 +289,7 @@ import { heart, logoIonic } from 'ionicons/icons';
 
 Then, update the constructor of the page to use `addIcons`:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 export class NewPage implements OnInit {
   constructor() {
     addIcons({ heart, logoIonic });
@@ -299,15 +301,15 @@ export class NewPage implements OnInit {
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update the `ion-content` in your `new/new.page.html` to include a button and some items after the existing icons:
+Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons:
 
-```html
+```html title="src/app/new/new.page.html"
 <ion-content [fullscreen]="true" #content>
   <ion-header collapse="condense">
     <ion-toolbar>
@@ -331,7 +333,7 @@ Update the `ion-content` in your `new/new.page.html` to include a button and som
 
 In the component, add the `ViewChild` import, the new component imports and define the `scrollToBottom` function:
 
-```ts
+```ts title="src/app/new/new.page.ts"
 import { Component, OnInit, ViewChild } from '@angular/core';
 import {
   IonBackButton,
@@ -385,7 +387,7 @@ To call methods on Ionic components:
 1. Create a `ViewChild` reference for the component
 2. Call the method directly on the component instance
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v7/react/quickstart.md b/versioned_docs/version-v7/react/quickstart.md
index d0242135d5..220dc01058 100644
--- a/versioned_docs/version-v7/react/quickstart.md
+++ b/versioned_docs/version-v7/react/quickstart.md
@@ -53,21 +53,22 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.tsx
-├── components
-│   ├── ExploreContainer.css
-│   └── ExploreContainer.tsx
-├── main.tsx
-└──  pages
-    ├── Home.css
-    └── Home.tsx
+└── src/
+    ├── App.tsx
+    ├── components
+    │   ├── ExploreContainer.css
+    │   └── ExploreContainer.tsx
+    ├── main.tsx
+    └── pages
+        ├── Home.css
+        └── Home.tsx
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -76,7 +77,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
@@ -110,7 +111,7 @@ This sets up the root of your application, using Ionic's `IonApp` and `IonReactR
 
 Routes are defined within the `IonRouterOutlet` in `App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -125,9 +126,9 @@ When you visit the root URL (`/`), the `Home` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `pages/Home.tsx`, imports the Ionic components and defines the page template:
+The Home page component, defined in `Home.tsx`, imports the Ionic components and defines the page template:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';
@@ -155,17 +156,17 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `pages/Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 // ...existing imports...
 
@@ -191,9 +192,9 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `pages/New.tsx`:
+Create a new page at `New.tsx`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const New: React.FC = () => {
@@ -221,9 +222,9 @@ const New: React.FC = () => {
 export default New;
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
@@ -231,13 +232,13 @@ When creating your own pages, always use `IonPage` as the root component. This i
 
 To navigate to the new page, create a route for it by first importing it at the top of `App.tsx` after the `Home` import:
 
-```tsx
+```tsx title="src/App.tsx"
 import New from './pages/New';
 ```
 
 Then, add its route in `IonRouterOutlet`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -251,45 +252,45 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `pages/Home.tsx`:
+Once that is done, update the button in `Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 <IonButton routerLink="/new">Navigate</IonButton>
 ```
 
 :::info
-Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation#navigating-using-history) for more information.
+Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
 ```
 
 Then, include them inside of the `IonContent`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonIcon icon={heart} />
 <IonIcon icon={logoIonic} />
 ```
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+Update `New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonContent ref={content}>
   <IonIcon icon={heart} />
   <IonIcon icon={logoIonic} />
@@ -307,7 +308,7 @@ Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some item
 
 Then, add the imports for the additional components and define the `scrollToBottom` function:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { useRef } from 'react';
 import { IonButton, IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
@@ -334,7 +335,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because React refs store the component instance in the `.current` property.
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md
index 6f96596157..b1bb31141a 100644
--- a/versioned_docs/version-v7/vue/quickstart.md
+++ b/versioned_docs/version-v7/vue/quickstart.md
@@ -53,19 +53,20 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.vue
-├── main.ts
-├── router
-│   └── index.ts
-└── views
-    └── HomePage.vue
+└── src/
+    ├── App.vue
+    ├── main.ts
+    ├── router
+    │   └── index.ts
+    └── views
+       └── HomePage.vue
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -74,7 +75,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.vue`:
 
-```vue
+```vue title="src/App.vue"
 <template>
   <ion-app>
     <ion-router-outlet />
@@ -92,7 +93,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 Routes are defined in `router/index.ts`:
 
-```ts
+```ts title="src/router/index.ts"
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import HomePage from '../views/HomePage.vue';
@@ -121,9 +122,9 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `views/HomePage.vue`, imports the Ionic components and defines the page template:
+The Home page component, defined in `HomePage.vue`, imports the Ionic components and defines the page template:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -159,17 +160,17 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
-For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <ion-content>
   <!-- existing content -->
 
@@ -179,7 +180,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in the `<script>` tag:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <script setup lang="ts">
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
@@ -187,9 +188,9 @@ import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from
 
 ## Add a New Page
 
-Create a new page at `views/NewPage.vue`:
+Create a new page at `NewPage.vue`:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -216,9 +217,9 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io
 </script>
 ```
 
-This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
@@ -226,15 +227,13 @@ When creating your own pages, always use `ion-page` as the root component. This
 
 To navigate to the new page, create a route for it by first importing it at the top of `router/index.ts` after the `HomePage` import:
 
-To navigate to a new page, add the route to `router/index.ts`
-
-```tsx
+```ts title="src/router/index.ts"
 import NewPage from '../views/NewPage.vue';
 ```
 
 Then, add its route in the `routes` array:
 
-```tsx
+```ts title="src/router/index.ts"
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -253,23 +252,23 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-Once that is done, update the button in `views/HomePage.vue`:
+Once that is done, update the button in `HomePage.vue`:
 
-```vue
+```vue title="src/views/HomePage.vue"
 <ion-button router-link="/new">Navigate</ion-button>
 ```
 
 :::info
-Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation) for more information.
+Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information.
 :::
 
 ## Add Icons to the New Page
 
 Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `ion-icon` component.
 
-Update the imports in `views/NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import { heart, logoIonic } from 'ionicons/icons';
@@ -278,22 +277,22 @@ import { heart, logoIonic } from 'ionicons/icons';
 
 Then, include them inside of the `ion-content`:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <ion-icon :icon="heart"></ion-icon>
 <ion-icon :icon="logoIonic"></ion-icon>
 ```
 
 Note that we are passing the imported SVG reference, **not** the icon name as a string.
 
-For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
+Update `NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <ion-content ref="content">
   <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
 
@@ -306,7 +305,7 @@ Update `views/NewPage.vue` to include a ref on `ion-content` and a button and so
 
 In the script section, add the new component imports and define the `scrollToBottom` function:
 
-```vue
+```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
 import {
   IonBackButton,
@@ -340,7 +339,7 @@ To call methods on Ionic components:
 
 This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
 
-You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
 
 ## Run on a Device
 
@@ -371,15 +370,15 @@ Ionic Vue projects are created with TypeScript by default, but you can easily co
 npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
 ```
 
-2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `router/index.ts`, `main.ts`, and files in the `tests` directory.
+2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `src/router/index.ts`, `src/main.ts`, and files in the `tests` directory.
 
 3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
 4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: 'off'` from `.eslintrc.js`.
 
-5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `router/index.js`.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-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`.
+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 `src/App.vue` and `src/views/HomePage.vue`.
 
 7. Delete `tsconfig.json` and `vite-env.d.ts`.