Merge branch 'main' of github.com:ionic-team/ionic-docs

# Conflicts:
#	docs/core-concepts/fundamentals.md

Author: rdlabo

_templates/playground/new/vue.md.ejs.t

@@ -7,15 +7,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
   <<%= component %>></<%= component %>>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { <%= pascalComponent %> } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      <%= pascalComponent %>,
-    },
-  });
 </script>
 <% if (css){ -%>
 

docs/api/tab-bar.md

@@ -130,17 +130,9 @@ export const TabBarExample: React.FC = () => (
   </ion-tabs>
 </template>
 
-<script>
+<script setup lang="ts">
 import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
 import { call, person, settings } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
-  setup() {
-    return { call, person, settings }
-  }
-});
 </script>
 ```
 
@@ -176,4 +168,4 @@ import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/tab-button.md

@@ -12,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v8/tab-button/custom-prop
 import Slots from '@ionic-internal/component-api/v8/tab-button/slots.md';
 
 
- 
+
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
@@ -166,7 +166,7 @@ export const TabButtonExample: React.FC = () => (
       </ion-tab-button>
 
       <ion-tab-button tab="speakers" href="/tabs/speakers">
-        <ion-icon :icon="person-circle" aria-hidden="true"></ion-icon>
+        <ion-icon :icon="personCircle" aria-hidden="true"></ion-icon>
         <ion-label>Speakers</ion-label>
       </ion-tab-button>
 
@@ -183,29 +183,15 @@ export const TabButtonExample: React.FC = () => (
   </ion-tabs>
 </template>
 
-<script>
-import { 
-  IonIcon, 
-  IonLabel, 
-  IonTabBar, 
-  IonTabButton, 
+<script setup lang="ts">
+import {
+  IonIcon,
+  IonLabel,
+  IonTabBar,
+  IonTabButton,
   IonTabs
 } from '@ionic/vue';
 import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonIcon, 
-    IonLabel, 
-    IonTabBar, 
-    IonTabButton, 
-    IonTabs
-  },
-  setup() {
-    return { calendar, informationCircle, map, personCircle }
-  }
-});
 </script>
 ```
 

docs/core-concepts/fundamentals.md

@@ -51,4 +51,30 @@ Ionic Framework は<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" ta
 
 多くの Ionic コンポーネントは [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) を使用して、コンポーネントの重要な状態変化を開発者に通知します。例えば、 `ion-datetime` コンポーネントは、選択された日付が変更されると `ionChange` を発行します。
 
-開発者は通常通り `click` などの標準的なイベントを使用することができる。しかし、コンポーネントの [shadow root](../reference/glossary.md#shadow) 内で発生した多くのイベントは、ホスト要素に [retargeted](https://dom.spec.whatwg.org/#retarget) されます。この結果、ユーザーが 1 回しかクリックしなくても、複数の `click` ハンドラが実行される可能性があります。そのため、開発者は Ionic コンポーネントの状態変化を適切に通知するために、Ionic のイベントに頼る必要があります。Ionic のイベントには、標準的なイベントとの衝突を避けるために`ion`というプレフィックスが付けられています。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる利用可能なイベントのリストがあります。
+開発者は通常通り click などの標準的なイベントを使用することができる。しかし、コンポーネントの [shadow root](../reference/glossary.md#shadow) 内で発生した多くのイベントは、ホスト要素に [retargeted](https://dom.spec.whatwg.org/#retarget) されます。この結果、ユーザーが 1 回しかクリックしなくても、複数の click ハンドラが実行される可能性があります。そのため、開発者は Ionic コンポーネントの状態変化を適切に通知するために、Ionic のイベントに頼る必要があります。Ionic のイベントには、標準的なイベントとの衝突を避けるためにionというプレフィックスが付けられています。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる利用可能なイベントのリストがあります。
+
+## Properties
+
+Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/docs/api) page.
+
+### Reactive Properties
+
+Reactive properties automatically update the component when their values change. These are the most common type of property in Ionic components.
+
+```html
+<ion-button color="primary">Primary Button</ion-button>
+```
+
+The `color` property is a reactive property that configures how the button appears. If you change the `color` value after the initial render, the button will update to reflect the new value.
+
+### Virtual Properties
+
+Virtual properties are designed for one-time configuration during component initialization. They do not trigger re-renders when updated.
+
+```html
+<ion-button mode="ios">iOS Style Button</ion-button> <ion-button mode="md">Material Design Button</ion-button>
+```
+
+The `mode` property is a virtual property that determines which platform styles to use for a component. It can be set at the component level or globally through the app configuration. In both cases, it's set once during initialization and doesn't change during the component's lifecycle.
+
+For more information on Ionic modes, read the [Platform Styles documentation](/docs/theming/platform-styles).

docs/developing/hardware-back-button.md

@@ -122,13 +122,9 @@ import { useBackButton } from '@ionic/vue';
 
 ...
 
-export default {
-  setup() {
-    useBackButton(10, () => {
-      console.log('Handler was called!');
-    });
-  }
-}
+useBackButton(10, () => {
+  console.log('Handler was called!');
+});
 ```
 </TabItem>
 </Tabs>
@@ -236,19 +232,15 @@ import { useBackButton } from '@ionic/vue';
 
 ...
 
-export default {
-  setup() {
-    useBackButton(5, () => {
-      console.log('Another handler was called!');
-    });
+useBackButton(5, () => {
+  console.log('Another handler was called!');
+});
 
-    useBackButton(10, (processNextHandler) => {
-      console.log('Handler was called!');
+useBackButton(10, (processNextHandler) => {
+  console.log('Handler was called!');
 
-      processNextHandler();
-    });
-  }
-}
+  processNextHandler();
+});
 ```
 </TabItem>
 </Tabs>
@@ -385,16 +377,12 @@ import { App } from '@capacitor/app';
 
 ...
 
-export default {
-  setup() {
-    const ionRouter = useIonRouter();
-    useBackButton(-1, () => {
-      if (!ionRouter.canGoBack()) {
-        App.exitApp();
-      }
-    });
+const ionRouter = useIonRouter();
+useBackButton(-1, () => {
+  if (!ionRouter.canGoBack()) {
+    App.exitApp();
   }
-}
+});
 ```
 </TabItem>
 </Tabs>

docs/updating/6-0.md

@@ -196,13 +196,8 @@ module.exports = {
   <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
-<script>
+<script setup lang="ts">
   import { IonTabs, IonTabBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar },
-  });
 </script>
 ```
 
@@ -214,13 +209,8 @@ module.exports = {
   <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
-<script>
+<script setup lang="ts">
   import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar, IonRouterOutlet },
-  });
 </script>
 ```
 

docs/vue/lifecycle.md

@@ -22,60 +22,51 @@ Ionic Framework はアプリで使えるいくつかのライフサイクルメ
 ライフサイクルは、Vue のライフサイクルメソッドと同じように、Vue コンポーネントのルートで関数として定義されます：
 
 ```tsx
+<script setup lang="ts">
 import { IonPage } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Home',
-  ionViewDidEnter() {
-    console.log('Home page did enter');
-  },
-  ionViewDidLeave() {
-    console.log('Home page did leave');
-  },
-  ionViewWillEnter() {
-    console.log('Home page will enter');
-  },
-  ionViewWillLeave() {
-    console.log('Home page will leave');
-  },
-  components: {
-    IonPage,
-  },
-});
+
+const ionViewDidEnter = () => {
+  console.log('Home page did enter');
+};
+
+const ionViewDidLeave = () => {
+  console.log('Home page did leave');
+};
+
+const ionViewWillEnter = () => {
+  console.log('Home page will enter');
+};
+
+const ionViewWillLeave = () => {
+  console.log('Home page will leave');
+};
+</script>
 ```
 
 ### Composition API Hooks
 
 These lifecycles can also be expressed using Vue 3's Composition API:
 
 ```tsx
+<script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    IonPage,
-  },
-  setup() {
-    onIonViewDidEnter(() => {
-      console.log('Home page did enter');
-    });
-
-    onIonViewDidLeave(() => {
-      console.log('Home page did leave');
-    });
-
-    onIonViewWillEnter(() => {
-      console.log('Home page will enter');
-    });
-
-    onIonViewWillLeave(() => {
-      console.log('Home page will leave');
-    });
-  },
+
+onIonViewDidEnter(() => {
+  console.log('Home page did enter');
+});
+
+onIonViewDidLeave(() => {
+  console.log('Home page did leave');
+});
+
+onIonViewWillEnter(() => {
+  console.log('Home page will enter');
+});
+
+onIonViewWillLeave(() => {
+  console.log('Home page will leave');
 });
+</script>
 ```
 
 :::note