+<template>

+  <ion-page>

+    <ion-header>

+      <ion-toolbar>

+        <ion-title>Tab 3</ion-title>

+      </ion-toolbar>

+    </ion-header>

+    <ion-content :fullscreen="true">

+      <ion-header collapse="condense">

+        <ion-toolbar>

+          <ion-title size="large">Tab 3</ion-title>

+        </ion-toolbar>

+      </ion-header>

+

+      <ExploreContainer name="Tab 3 page" />

+    </ion-content>

+  </ion-page>

+</template>

+

+<script setup lang="ts">

+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';

+import ExploreContainer from '@/components/ExploreContainer.vue';

+</script>

+<template>

+  <ion-page>

+    <ion-tabs>

+      <ion-router-outlet></ion-router-outlet>

+      <ion-tab-bar slot="bottom">

+        <ion-tab-button tab="tab1" href="/tabs/tab1">

+          <ion-icon aria-hidden="true" :icon="triangle" />

+          <ion-label>Tab 1</ion-label>

+        </ion-tab-button>

+

+        <ion-tab-button tab="tab2" href="/tabs/tab2">

+          <ion-icon aria-hidden="true" :icon="ellipse" />

+          <ion-label>Tab 2</ion-label>

+        </ion-tab-button>

+

+        <ion-tab-button tab="tab3" href="/tabs/tab3">

+          <ion-icon aria-hidden="true" :icon="square" />

+          <ion-label>Tab 3</ion-label>

+        </ion-tab-button>

+      </ion-tab-bar>

+    </ion-tabs>

+  </ion-page>

+</template>

+

+<script setup lang="ts">

+import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';

+import { ellipse, square, triangle } from 'ionicons/icons';

+</script>

+/// <reference types="vite/client" />

+{

+  "name": "Using fixtures to represent data",

+  "email": "hello@cypress.io",

+  "body": "Fixtures are a great way to mock data for responses to routes"

+}

+describe('My First Test', () => {

+  it('Visits the app root url', () => {

+    cy.visit('/')

+    cy.contains('ion-content', 'Tab 1 page')

+  })

+})

+/// <reference types="cypress" />

+// ***********************************************

+// This example commands.ts shows you how to

+// create various custom commands and overwrite

+// existing commands.

+//

+// For more comprehensive examples of custom

+// commands please read more here:

+// https://on.cypress.io/custom-commands

+// ***********************************************

+//

+//

+// -- This is a parent command --

+// Cypress.Commands.add('login', (email, password) => { ... })

+//

+//

+// -- This is a child command --

+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })

+//

+//

+// -- This is a dual command --

+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })

+//

+//

+// -- This will overwrite an existing command --

+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

+//

+// declare global {

+//   namespace Cypress {

+//     interface Chainable {

+//       login(email: string, password: string): Chainable<void>

+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>

+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>

+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>

+//     }

+//   }

+// }

+// ***********************************************************

+// This example support/e2e.ts is processed and

+// loaded automatically before your test files.

+//

+// This is a great place to put global configuration and

+// behavior that modifies Cypress.

+//

+// You can change the location of this file or turn off

+// automatically serving support files with the

+// 'supportFile' configuration option.

+//

+// You can read more here:

+// https://on.cypress.io/configuration

+// ***********************************************************

+

+// Import commands.js using ES2015 syntax:

+import './commands'

+

+// Alternatively you can use CommonJS syntax:

+// require('./commands')

+import { mount } from '@vue/test-utils'

+import Tab1Page from '@/views/Tab1Page.vue'

+import { describe, expect, test } from 'vitest'

+

+describe('Tab1Page.vue', () => {

+  test('renders tab 1 Tab1Page', () => {

+    const wrapper = mount(Tab1Page)

+    expect(wrapper.text()).toMatch('Tab 1 page')

+  })

+})

+{

+  "compilerOptions": {

+    "target": "ESNext",

+    "useDefineForClassFields": true,

+    "module": "ESNext",

+    "moduleResolution": "Node",

+    "strict": true,

+    "jsx": "preserve",

+    "resolveJsonModule": true,

+    "isolatedModules": true,

+    "esModuleInterop": true,

+    "lib": ["ESNext", "DOM"],

+    "skipLibCheck": true,

+    "noEmit": true,

+    "paths": {

+      "@/*": ["./src/*"]

+    }

+  },

+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

+  "references": [{ "path": "./tsconfig.node.json" }]

+}

+{

+  "compilerOptions": {

+    "composite": true,

+    "module": "ESNext",

+    "moduleResolution": "Node",

+    "allowSyntheticDefaultImports": true

+  },

+  "include": ["vite.config.ts"]

+}

+import legacy from '@vitejs/plugin-legacy'

+import vue from '@vitejs/plugin-vue'

+import path from 'path'

+import { defineConfig } from 'vite'

+

+// https://vitejs.dev/config/

+export default defineConfig({

+  plugins: [

+    vue(),

+    legacy()

+  ],

+  resolve: {

+    alias: {

+      '@': path.resolve(__dirname, './src'),

+    },

+  },

+  test: {

+    globals: true,

+    environment: 'jsdom'

+  }

+})