diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t
index a22edd2b2b4..3779af3113b 100644
--- a/_templates/playground/new/vue.md.ejs.t
+++ b/_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 lang="ts" setup>
import { <%= pascalComponent %> } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- <%= pascalComponent %>,
- },
- });
</script>
<% if (css){ -%>
diff --git a/docs/api/toast.md b/docs/api/toast.md
index 6e49ee25bdc..13f39807ad6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -79,7 +79,7 @@ Toasts can be swiped to dismiss by using the `swipeGesture` property. This featu
import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
<SwipeGesture />
-
+
## Layout
Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
diff --git a/static/usage/v7/accordion/accessibility/animations/vue.md b/static/usage/v7/accordion/accessibility/animations/vue.md
index 05847edab7b..632621029e9 100644
--- a/static/usage/v7/accordion/accessibility/animations/vue.md
+++ b/static/usage/v7/accordion/accessibility/animations/vue.md
@@ -22,16 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/basic/vue.md b/static/usage/v7/accordion/basic/vue.md
index 8ac8c6bbeec..8c26e42b96b 100644
--- a/static/usage/v7/accordion/basic/vue.md
+++ b/static/usage/v7/accordion/basic/vue.md
@@ -22,17 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
index 5e8e8da6925..f6f673aad4f 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
@@ -22,18 +22,8 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/accordion/customization/expansion-styles/vue.md b/static/usage/v7/accordion/customization/expansion-styles/vue.md
index 05f22d0d2ff..8d5ab0ec26e 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/vue.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/vue.md
@@ -22,17 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/customization/icons/vue.md b/static/usage/v7/accordion/customization/icons/vue.md
index 453e9963a89..c02668b8aca 100644
--- a/static/usage/v7/accordion/customization/icons/vue.md
+++ b/static/usage/v7/accordion/customization/icons/vue.md
@@ -22,21 +22,8 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
import { caretDownCircle } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- setup() {
- return { caretDownCircle };
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md
index c049c4b89d8..117c54cf2be 100644
--- a/static/usage/v7/accordion/customization/theming/vue.md
+++ b/static/usage/v7/accordion/customization/theming/vue.md
@@ -22,22 +22,9 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
import { caretDownCircle } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- setup() {
- return { caretDownCircle };
- },
- });
</script>
<style>
diff --git a/static/usage/v7/accordion/disable-group/vue.md b/static/usage/v7/accordion/disable-group/vue.md
index 6c9e3567845..d139bde4afb 100644
--- a/static/usage/v7/accordion/disable-group/vue.md
+++ b/static/usage/v7/accordion/disable-group/vue.md
@@ -22,16 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/disable/group/vue.md b/static/usage/v7/accordion/disable/group/vue.md
index 6c9e3567845..d139bde4afb 100644
--- a/static/usage/v7/accordion/disable/group/vue.md
+++ b/static/usage/v7/accordion/disable/group/vue.md
@@ -22,16 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/disable/individual/vue.md b/static/usage/v7/accordion/disable/individual/vue.md
index dc26bc3b11f..d4ae8e63566 100644
--- a/static/usage/v7/accordion/disable/individual/vue.md
+++ b/static/usage/v7/accordion/disable/individual/vue.md
@@ -22,16 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
index 60607870264..578ddc305ad 100644
--- a/static/usage/v7/accordion/listen-changes/vue.md
+++ b/static/usage/v7/accordion/listen-changes/vue.md
@@ -22,32 +22,17 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- setup() {
- const values = ['first', 'second', 'third'];
- const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
- const collapsedItems = values.filter((value) => value !== ev.detail.value);
- const selectedValue = ev.detail.value;
+ const values = ['first', 'second', 'third'];
+ const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+ const collapsedItems = values.filter((value) => value !== ev.detail.value);
+ const selectedValue = ev.detail.value;
- console.log(
- `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
- ', '
- )}`
- );
- };
-
- return { accordionGroupChange };
- },
- });
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+ );
+ };
</script>
```
diff --git a/static/usage/v7/accordion/multiple/vue.md b/static/usage/v7/accordion/multiple/vue.md
index dcf86fbd7d4..902fa36f7b0 100644
--- a/static/usage/v7/accordion/multiple/vue.md
+++ b/static/usage/v7/accordion/multiple/vue.md
@@ -22,17 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md
index 0de1be3fe91..e12c07c0727 100644
--- a/static/usage/v7/accordion/readonly/group/vue.md
+++ b/static/usage/v7/accordion/readonly/group/vue.md
@@ -22,17 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md
index b9a5daac451..3c813d85be3 100644
--- a/static/usage/v7/accordion/readonly/individual/vue.md
+++ b/static/usage/v7/accordion/readonly/individual/vue.md
@@ -22,17 +22,7 @@
</ion-accordion-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonItem,
- IonLabel,
- },
- });
</script>
```
diff --git a/static/usage/v7/accordion/toggle/vue.md b/static/usage/v7/accordion/toggle/vue.md
index c9fa11c0e9c..d88a9a09b3f 100644
--- a/static/usage/v7/accordion/toggle/vue.md
+++ b/static/usage/v7/accordion/toggle/vue.md
@@ -24,35 +24,22 @@
<ion-button @click="toggleAccordion()">Toggle Second Accordion</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: {
- IonAccordion,
- IonAccordionGroup,
- IonButton,
- IonItem,
- IonLabel,
- },
- setup() {
- const accordionGroup = ref(null);
- const toggleAccordion = () => {
- if (!accordionGroup.value) {
- return;
- }
- const nativeEl = accordionGroup.value.$el;
+ const accordionGroup = ref(null);
+ const toggleAccordion = () => {
+ if (!accordionGroup.value) {
+ return;
+ }
+ const nativeEl = accordionGroup.value.$el;
- if (nativeEl.value === 'second') {
- nativeEl.value = undefined;
- } else {
- nativeEl.value = 'second';
- }
- };
-
- return { accordionGroup, toggleAccordion };
- },
- });
+ if (nativeEl.value === 'second') {
+ nativeEl.value = undefined;
+ } else {
+ nativeEl.value = 'second';
+ }
+ };
</script>
```
diff --git a/static/usage/v7/action-sheet/controller/vue.md b/static/usage/v7/action-sheet/controller/vue.md
index 8e98e65e36a..4be2504e160 100644
--- a/static/usage/v7/action-sheet/controller/vue.md
+++ b/static/usage/v7/action-sheet/controller/vue.md
@@ -3,44 +3,37 @@
<ion-button @click="presentActionSheet">Open</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, actionSheetController } from '@ionic/vue';
- export default {
- components: { IonButton },
- setup() {
- const presentActionSheet = async () => {
- const actionSheet = await actionSheetController.create({
- header: 'Actions',
- buttons: [
- {
- text: 'Delete',
- role: 'destructive',
- data: {
- action: 'delete',
- },
- },
- {
- text: 'Share',
- data: {
- action: 'share',
- },
- },
- {
- text: 'Cancel',
- role: 'cancel',
- data: {
- action: 'cancel',
- },
- },
- ],
- });
+ const presentActionSheet = async () => {
+ const actionSheet = await actionSheetController.create({
+ header: 'Actions',
+ buttons: [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ],
+ });
- await actionSheet.present();
- };
-
- return { presentActionSheet };
- },
+ await actionSheet.present();
};
</script>
```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md
index 9d82efd4ea1..6bbcec0a0c1 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/vue.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md
@@ -9,47 +9,36 @@
></ion-action-sheet>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { ref } from 'vue';
import { IonActionSheet, IonButton } from '@ionic/vue';
- export default {
- components: { IonActionSheet, IonButton },
- setup() {
- const isOpen = ref(false);
- const actionSheetButtons = [
- {
- text: 'Delete',
- role: 'destructive',
- data: {
- action: 'delete',
- },
- },
- {
- text: 'Share',
- data: {
- action: 'share',
- },
- },
- {
- text: 'Cancel',
- role: 'cancel',
- data: {
- action: 'cancel',
- },
- },
- ];
-
- const setOpen = (state: boolean) => {
- isOpen.value = state;
- };
-
- return {
- actionSheetButtons,
- isOpen,
- setOpen,
- };
+ const isOpen = ref(false);
+ const actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
},
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+
+ const setOpen = (state: boolean) => {
+ isOpen.value = state;
};
</script>
```
diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md
index c32a8ea9bdd..1466d15fb64 100644
--- a/static/usage/v7/action-sheet/inline/trigger/vue.md
+++ b/static/usage/v7/action-sheet/inline/trigger/vue.md
@@ -4,37 +4,30 @@
<ion-action-sheet trigger="open-action-sheet" header="Actions" :buttons="actionSheetButtons"></ion-action-sheet>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonActionSheet, IonButton } from '@ionic/vue';
- export default {
- components: { IonActionSheet, IonButton },
- setup() {
- const actionSheetButtons = [
- {
- text: 'Delete',
- role: 'destructive',
- data: {
- action: 'delete',
- },
- },
- {
- text: 'Share',
- data: {
- action: 'share',
- },
- },
- {
- text: 'Cancel',
- role: 'cancel',
- data: {
- action: 'cancel',
- },
- },
- ];
-
- return { actionSheetButtons };
+ const actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
},
- };
+ ];
</script>
```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
index 6f56c29920d..e36b089cee4 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
@@ -22,44 +22,34 @@
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonActionSheet, IonButton } from '@ionic/vue';
- export default {
- components: { IonActionSheet, IonButton },
- setup() {
- const actionSheetButtons = [
- {
- text: 'Delete',
- role: 'destructive',
- data: {
- action: 'delete',
- },
- },
- {
- text: 'Share',
- data: {
- action: 'share',
- },
- },
- {
- text: 'Cancel',
- role: 'cancel',
- data: {
- action: 'cancel',
- },
- },
- ];
-
- const logResult = (ev: CustomEvent) => {
- console.log(JSON.stringify(ev.detail, null, 2));
- };
-
- return {
- actionSheetButtons,
- logResult,
- };
+ const actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
},
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+
+ const logResult = (ev: CustomEvent) => {
+ console.log(JSON.stringify(ev.detail, null, 2));
};
</script>
```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/vue.md b/static/usage/v7/action-sheet/theming/css-properties/vue.md
index 2f8cc168f58..937b82200b6 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/vue.md
+++ b/static/usage/v7/action-sheet/theming/css-properties/vue.md
@@ -22,37 +22,30 @@
></ion-action-sheet>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonActionSheet, IonButton } from '@ionic/vue';
- export default {
- components: { IonActionSheet, IonButton },
- setup() {
- const actionSheetButtons = [
- {
- text: 'Delete',
- role: 'destructive',
- data: {
- action: 'delete',
- },
- },
- {
- text: 'Share',
- data: {
- action: 'share',
- },
- },
- {
- text: 'Cancel',
- role: 'cancel',
- data: {
- action: 'cancel',
- },
- },
- ];
-
- return { actionSheetButtons };
+ const actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
},
- };
+ ];
</script>
```
diff --git a/static/usage/v7/action-sheet/theming/styling/vue.md b/static/usage/v7/action-sheet/theming/styling/vue.md
index c46ae0bcbd3..7c2cf6bde23 100644
--- a/static/usage/v7/action-sheet/theming/styling/vue.md
+++ b/static/usage/v7/action-sheet/theming/styling/vue.md
@@ -39,37 +39,30 @@
></ion-action-sheet>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonActionSheet, IonButton } from '@ionic/vue';
- export default {
- components: { IonActionSheet, IonButton },
- setup() {
- const actionSheetButtons = [
- {
- text: 'Delete',
- role: 'destructive',
- data: {
- action: 'delete',
- },
- },
- {
- text: 'Share',
- data: {
- action: 'share',
- },
- },
- {
- text: 'Cancel',
- role: 'cancel',
- data: {
- action: 'cancel',
- },
- },
- ];
-
- return { actionSheetButtons };
+ const actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
},
- };
+ ];
</script>
```
diff --git a/static/usage/v7/avatar/basic/vue.md b/static/usage/v7/avatar/basic/vue.md
index 5136ca90400..18138c2ed49 100644
--- a/static/usage/v7/avatar/basic/vue.md
+++ b/static/usage/v7/avatar/basic/vue.md
@@ -5,12 +5,7 @@
</ion-avatar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAvatar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonAvatar },
- });
</script>
```
diff --git a/static/usage/v7/avatar/chip/vue.md b/static/usage/v7/avatar/chip/vue.md
index c872bb48de3..c608c4b2163 100644
--- a/static/usage/v7/avatar/chip/vue.md
+++ b/static/usage/v7/avatar/chip/vue.md
@@ -8,12 +8,7 @@
</ion-chip>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonAvatar, IonChip, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md
index 5a9ddea4499..a3e33447ac8 100644
--- a/static/usage/v7/avatar/item/vue.md
+++ b/static/usage/v7/avatar/item/vue.md
@@ -8,12 +8,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonAvatar, IonItem, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md
index 32237336a1c..645968f3ea2 100644
--- a/static/usage/v7/avatar/theming/css-properties/vue.md
+++ b/static/usage/v7/avatar/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
</ion-avatar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAvatar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonAvatar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md
index e26a6f13562..b2bed90a389 100644
--- a/static/usage/v7/back-button/basic/vue/page_two_vue.md
+++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md
@@ -14,11 +14,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-
- export default {
- components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar },
- };
</script>
```
diff --git a/static/usage/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md
index 4667abeced5..d6937d7e397 100644
--- a/static/usage/v7/back-button/custom/vue/page_two_vue.md
+++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md
@@ -14,15 +14,8 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
import { caretBack } from 'ionicons/icons';
-
- export default {
- components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
- setup() {
- return { caretBack };
- },
- };
</script>
```
diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
index 247b67c098b..0fc031d0a27 100644
--- a/static/usage/v7/backdrop/basic/vue.md
+++ b/static/usage/v7/backdrop/basic/vue.md
@@ -22,7 +22,7 @@
</ion-content>
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonBackdrop,
IonHeader,
@@ -33,10 +33,5 @@
IonCheckbox,
IonButton,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonButton },
- });
</script>
```
diff --git a/static/usage/v7/backdrop/styling/vue.md b/static/usage/v7/backdrop/styling/vue.md
index 7e884eb2fb4..d5dbd2b9ebb 100644
--- a/static/usage/v7/backdrop/styling/vue.md
+++ b/static/usage/v7/backdrop/styling/vue.md
@@ -42,12 +42,7 @@
<ion-button class="ion-margin-start" color="light">Clickable</ion-button>
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton },
- });
</script>
```
diff --git a/static/usage/v7/badge/basic/vue.md b/static/usage/v7/badge/basic/vue.md
index e02b9c552e3..95b35869235 100644
--- a/static/usage/v7/badge/basic/vue.md
+++ b/static/usage/v7/badge/basic/vue.md
@@ -12,12 +12,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBadge, IonItem, IonLabel, IonList },
- });
</script>
```
diff --git a/static/usage/v7/badge/theming/colors/vue.md b/static/usage/v7/badge/theming/colors/vue.md
index 77e5c1a9e97..a29983eb27a 100644
--- a/static/usage/v7/badge/theming/colors/vue.md
+++ b/static/usage/v7/badge/theming/colors/vue.md
@@ -28,12 +28,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBadge, IonItem, IonLabel, IonList },
- });
</script>
```
diff --git a/static/usage/v7/badge/theming/css-properties/vue.md b/static/usage/v7/badge/theming/css-properties/vue.md
index 08a5d88d81e..0ab8f1d3b87 100644
--- a/static/usage/v7/badge/theming/css-properties/vue.md
+++ b/static/usage/v7/badge/theming/css-properties/vue.md
@@ -8,13 +8,8 @@
</ion-list>
</template>
-<script>
+<script setup>
import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBadge, IonItem, IonLabel, IonList },
- });
</script>
<style>
diff --git a/static/usage/v7/breadcrumbs/basic/vue.md b/static/usage/v7/breadcrumbs/basic/vue.md
index f665b4cb686..4b69c1890b9 100644
--- a/static/usage/v7/breadcrumbs/basic/vue.md
+++ b/static/usage/v7/breadcrumbs/basic/vue.md
@@ -8,12 +8,7 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs },
- });
</script>
```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
index fdd63471ed4..a71502e721b 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -10,22 +10,14 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
- import { defineComponent } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs },
- data() {
- return {
- maxBreadcrumbs: 4,
- };
- },
- methods: {
- expandBreadcrumbs() {
- this.maxBreadcrumbs = undefined;
- },
- },
- });
+ const maxBreadcrumbs = ref<number | undefined>(4);
+
+ function expandBreadcrumbs() {
+ maxBreadcrumbs.value = undefined;
+ }
</script>
```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
index 61dbebde1d7..47bda8f3481 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
@@ -41,12 +41,7 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs },
- });
</script>
```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
index a9804c52f33..3779ecaadf2 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
@@ -10,12 +10,7 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs },
- });
</script>
```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
index 54368fa7213..74e69f38e7c 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -23,26 +23,19 @@
</ion-popover>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/vue';
import Popover from './Popover.vue';
+ import { ref } from 'vue';
- export default {
- components: { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover },
- data() {
- return {
- popoverOpen: false,
- collapsedBreadcrumbs: [],
- event: null,
- };
- },
- methods: {
- presentPopover(e: Event) {
- this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
- this.event = e;
- this.popoverOpen = true;
- },
- },
- };
+ const popoverOpen = ref(false);
+ const collapsedBreadcrumbs = ref([]);
+ const event = ref(null);
+
+ function presentPopover(e: Event) {
+ this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
+ this.event = e;
+ this.popoverOpen = true;
+ }
</script>
```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
index f0849705aab..5e72a26ae06 100644
--- a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
@@ -20,16 +20,8 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { arrowForwardCircle } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
- setup() {
- return { arrowForwardCircle };
- },
- });
</script>
```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
index 2e1634143f6..faf459e7320 100644
--- a/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
@@ -41,16 +41,8 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { camera, film, flash, home } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel },
- setup() {
- return { camera, film, flash, home };
- },
- });
</script>
```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/vue.md b/static/usage/v7/breadcrumbs/theming/colors/vue.md
index 357d76b7422..50a0f0b09c7 100644
--- a/static/usage/v7/breadcrumbs/theming/colors/vue.md
+++ b/static/usage/v7/breadcrumbs/theming/colors/vue.md
@@ -8,12 +8,7 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs },
- });
</script>
```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/vue.md b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
index 119ed6e5a0a..e552cbb5e62 100644
--- a/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
@@ -8,13 +8,8 @@
</ion-breadcrumbs>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBreadcrumb, IonBreadcrumbs },
- });
</script>
<style>
diff --git a/static/usage/v7/button/basic/vue.md b/static/usage/v7/button/basic/vue.md
index dbd787691fb..0e8895d6d73 100644
--- a/static/usage/v7/button/basic/vue.md
+++ b/static/usage/v7/button/basic/vue.md
@@ -4,12 +4,7 @@
<ion-button :disabled="true">Disabled</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/expand/vue.md b/static/usage/v7/button/expand/vue.md
index f67d93ecdef..a9b233838f2 100644
--- a/static/usage/v7/button/expand/vue.md
+++ b/static/usage/v7/button/expand/vue.md
@@ -4,12 +4,7 @@
<ion-button expand="full">Full</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/fill/vue.md b/static/usage/v7/button/fill/vue.md
index 4b965ed3582..995bbcaf531 100644
--- a/static/usage/v7/button/fill/vue.md
+++ b/static/usage/v7/button/fill/vue.md
@@ -6,12 +6,7 @@
<ion-button fill="solid">Solid</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md
index 03d8648c878..09b565cbc0a 100644
--- a/static/usage/v7/button/icons/vue.md
+++ b/static/usage/v7/button/icons/vue.md
@@ -15,16 +15,8 @@
</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonIcon } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { star } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonButton, IonIcon },
- setup() {
- return { star };
- },
- });
</script>
```
diff --git a/static/usage/v7/button/shape/vue.md b/static/usage/v7/button/shape/vue.md
index 6db047c9532..5ab975dcafd 100644
--- a/static/usage/v7/button/shape/vue.md
+++ b/static/usage/v7/button/shape/vue.md
@@ -4,12 +4,7 @@
<ion-button shape="round">Round</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/size/vue.md b/static/usage/v7/button/size/vue.md
index 02a27f22d1d..b1a081f8a0b 100644
--- a/static/usage/v7/button/size/vue.md
+++ b/static/usage/v7/button/size/vue.md
@@ -5,12 +5,7 @@
<ion-button size="large">Large</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/text-wrapping/vue.md b/static/usage/v7/button/text-wrapping/vue.md
index 3462f7357ea..2aba13bd01e 100644
--- a/static/usage/v7/button/text-wrapping/vue.md
+++ b/static/usage/v7/button/text-wrapping/vue.md
@@ -7,12 +7,7 @@
>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/theming/colors/vue.md b/static/usage/v7/button/theming/colors/vue.md
index 7fee983d696..1dd7cbff39d 100644
--- a/static/usage/v7/button/theming/colors/vue.md
+++ b/static/usage/v7/button/theming/colors/vue.md
@@ -12,12 +12,7 @@
<ion-button color="dark">Dark</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
```
diff --git a/static/usage/v7/button/theming/css-properties/vue.md b/static/usage/v7/button/theming/css-properties/vue.md
index 0243821d67f..a7d7c386195 100644
--- a/static/usage/v7/button/theming/css-properties/vue.md
+++ b/static/usage/v7/button/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
<ion-button>Custom Button</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/buttons/basic/vue.md b/static/usage/v7/buttons/basic/vue.md
index 3da668fcb20..a0387282fbc 100644
--- a/static/usage/v7/buttons/basic/vue.md
+++ b/static/usage/v7/buttons/basic/vue.md
@@ -8,12 +8,7 @@
</ion-toolbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonButtons, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/buttons/placement/vue.md b/static/usage/v7/buttons/placement/vue.md
index dc0217fc146..2f935635812 100644
--- a/static/usage/v7/buttons/placement/vue.md
+++ b/static/usage/v7/buttons/placement/vue.md
@@ -21,12 +21,7 @@
</ion-toolbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonButtons, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md
index 60b04a067da..26e42f1efef 100644
--- a/static/usage/v7/buttons/types/vue.md
+++ b/static/usage/v7/buttons/types/vue.md
@@ -74,16 +74,8 @@
</ion-toolbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
- setup() {
- return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star };
- },
- });
</script>
```
diff --git a/static/usage/v7/card/basic/vue.md b/static/usage/v7/card/basic/vue.md
index aa44d9f0931..f114e152281 100644
--- a/static/usage/v7/card/basic/vue.md
+++ b/static/usage/v7/card/basic/vue.md
@@ -12,12 +12,7 @@
</ion-card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
- });
</script>
```
diff --git a/static/usage/v7/card/buttons/vue.md b/static/usage/v7/card/buttons/vue.md
index 2266589135f..df8568d1b89 100644
--- a/static/usage/v7/card/buttons/vue.md
+++ b/static/usage/v7/card/buttons/vue.md
@@ -15,12 +15,7 @@
</ion-card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
- });
</script>
```
diff --git a/static/usage/v7/card/list/vue.md b/static/usage/v7/card/list/vue.md
index 1a565483588..e8f53701fb8 100644
--- a/static/usage/v7/card/list/vue.md
+++ b/static/usage/v7/card/list/vue.md
@@ -39,13 +39,8 @@
</ion-card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/card/media/vue.md b/static/usage/v7/card/media/vue.md
index 472b8a7d991..1df325765ff 100644
--- a/static/usage/v7/card/media/vue.md
+++ b/static/usage/v7/card/media/vue.md
@@ -13,12 +13,7 @@
</ion-card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
- });
</script>
```
diff --git a/static/usage/v7/card/theming/colors/vue.md b/static/usage/v7/card/theming/colors/vue.md
index e0070961be8..b366b0ebcd1 100644
--- a/static/usage/v7/card/theming/colors/vue.md
+++ b/static/usage/v7/card/theming/colors/vue.md
@@ -82,12 +82,7 @@
</ion-card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
- });
</script>
```
diff --git a/static/usage/v7/card/theming/css-properties/vue.md b/static/usage/v7/card/theming/css-properties/vue.md
index e2db7992d85..a509bd6770c 100644
--- a/static/usage/v7/card/theming/css-properties/vue.md
+++ b/static/usage/v7/card/theming/css-properties/vue.md
@@ -12,13 +12,8 @@
</ion-card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/checkbox/alignment/vue.md b/static/usage/v7/checkbox/alignment/vue.md
index 4dffcd383aa..a4e33b9479a 100644
--- a/static/usage/v7/checkbox/alignment/vue.md
+++ b/static/usage/v7/checkbox/alignment/vue.md
@@ -11,14 +11,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonCheckbox,
- },
- });
</script>
```
diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md
index fc8c1ff781f..e9c80af496a 100644
--- a/static/usage/v7/checkbox/basic/vue.md
+++ b/static/usage/v7/checkbox/basic/vue.md
@@ -3,12 +3,7 @@
<ion-checkbox>I agree to the terms and conditions</ion-checkbox>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCheckbox },
- });
</script>
```
diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md
index ff87a637bd6..26ffb748df3 100644
--- a/static/usage/v7/checkbox/indeterminate/vue.md
+++ b/static/usage/v7/checkbox/indeterminate/vue.md
@@ -3,12 +3,7 @@
<ion-checkbox :indeterminate="true">Indeterminate checkbox</ion-checkbox>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCheckbox },
- });
</script>
```
diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md
index ed34f0dcdc7..897a3e8996c 100644
--- a/static/usage/v7/checkbox/justify/vue.md
+++ b/static/usage/v7/checkbox/justify/vue.md
@@ -15,12 +15,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCheckbox, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
index 3530731da53..93c571cacba 100644
--- a/static/usage/v7/checkbox/label-placement/vue.md
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -15,12 +15,7 @@
<ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCheckbox },
- });
</script>
```
diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md
index 802cfa40b25..fa7b2a6d301 100644
--- a/static/usage/v7/checkbox/theming/css-properties/vue.md
+++ b/static/usage/v7/checkbox/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
<ion-checkbox>Themed checkbox</ion-checkbox>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCheckbox },
- });
</script>
<style>
diff --git a/static/usage/v7/chip/basic/vue.md b/static/usage/v7/chip/basic/vue.md
index 69634b44d3e..7c17ae49fb2 100644
--- a/static/usage/v7/chip/basic/vue.md
+++ b/static/usage/v7/chip/basic/vue.md
@@ -5,12 +5,7 @@
<ion-chip :outline="true">Outline</ion-chip>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonChip } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonChip },
- });
</script>
```
diff --git a/static/usage/v7/chip/slots/vue.md b/static/usage/v7/chip/slots/vue.md
index 76f0bbfcf48..6b7bf6bdcfd 100644
--- a/static/usage/v7/chip/slots/vue.md
+++ b/static/usage/v7/chip/slots/vue.md
@@ -15,20 +15,8 @@
</ion-chip>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/vue';
import { close, closeCircle, pin } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonChip, IonAvatar, IonLabel, IonIcon },
- setup() {
- return {
- close,
- closeCircle,
- pin,
- };
- },
- });
</script>
```
diff --git a/static/usage/v7/chip/theming/colors/vue.md b/static/usage/v7/chip/theming/colors/vue.md
index 55221ac5115..c2fcbed7204 100644
--- a/static/usage/v7/chip/theming/colors/vue.md
+++ b/static/usage/v7/chip/theming/colors/vue.md
@@ -12,12 +12,7 @@
<ion-chip color="dark">Dark</ion-chip>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonChip } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonChip },
- });
</script>
```
diff --git a/static/usage/v7/chip/theming/css-properties/vue.md b/static/usage/v7/chip/theming/css-properties/vue.md
index 7195787bd52..609e94cef29 100644
--- a/static/usage/v7/chip/theming/css-properties/vue.md
+++ b/static/usage/v7/chip/theming/css-properties/vue.md
@@ -10,12 +10,7 @@
<ion-chip>Default</ion-chip>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonChip } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonChip },
- });
</script>
```
diff --git a/static/usage/v7/content/basic/vue.md b/static/usage/v7/content/basic/vue.md
index 84e2e35470e..f75b6b24885 100644
--- a/static/usage/v7/content/basic/vue.md
+++ b/static/usage/v7/content/basic/vue.md
@@ -12,12 +12,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent },
- });
</script>
```
diff --git a/static/usage/v7/content/fixed/vue.md b/static/usage/v7/content/fixed/vue.md
index 31d3f7cd33c..929fed9ff50 100644
--- a/static/usage/v7/content/fixed/vue.md
+++ b/static/usage/v7/content/fixed/vue.md
@@ -54,13 +54,8 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonContent },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md
index 3de93600da7..58fb09ea268 100644
--- a/static/usage/v7/content/fullscreen/vue.md
+++ b/static/usage/v7/content/fullscreen/vue.md
@@ -61,13 +61,8 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md
index dc914aee8f5..0b73a444863 100644
--- a/static/usage/v7/content/header-footer/vue.md
+++ b/static/usage/v7/content/header-footer/vue.md
@@ -22,12 +22,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md
index 1b8bada7d57..eb9698e36e6 100644
--- a/static/usage/v7/content/scroll-events/vue.md
+++ b/static/usage/v7/content/scroll-events/vue.md
@@ -58,23 +58,19 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonContent },
- methods: {
- handleScrollStart() {
- console.log('scroll start');
- },
- handleScroll(ev: CustomEvent) {
- console.log('scroll', JSON.stringify(ev.detail));
- },
- handleScrollEnd() {
- console.log('scroll end');
- },
- },
- });
+ function handleScrollStart() {
+ console.log('scroll start');
+ }
+
+ function handleScroll(ev: CustomEvent) {
+ console.log('scroll', JSON.stringify(ev.detail));
+ }
+
+ function handleScrollEnd() {
+ console.log('scroll end');
+ }
</script>
```
diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md
index 5ac6e8ee1fc..5a4233bf267 100644
--- a/static/usage/v7/content/scroll-methods/vue.md
+++ b/static/usage/v7/content/scroll-methods/vue.md
@@ -55,24 +55,22 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButton, IonContent },
- methods: {
- scrollToBottom() {
- // Passing a duration to the method makes it so the scroll slowly
- // goes to the bottom instead of instantly
- this.$refs.content.$el.scrollToBottom(500);
- },
- scrollToTop() {
- // Passing a duration to the method makes it so the scroll slowly
- // goes to the top instead of instantly
- this.$refs.content.$el.scrollToTop(500);
- },
- },
- });
+ const content = ref(null);
+
+ function scrollToBottom() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the bottom instead of instantly
+ content.value.$el.scrollToBottom(500);
+ }
+
+ function scrollToTop() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the top instead of instantly
+ content.value.$el.scrollToTop(500);
+ }
</script>
```
diff --git a/static/usage/v7/content/theming/colors/vue.md b/static/usage/v7/content/theming/colors/vue.md
index 1bbcc99834e..45fe11425fb 100644
--- a/static/usage/v7/content/theming/colors/vue.md
+++ b/static/usage/v7/content/theming/colors/vue.md
@@ -38,12 +38,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent },
- });
</script>
```
diff --git a/static/usage/v7/content/theming/css-properties/vue.md b/static/usage/v7/content/theming/css-properties/vue.md
index 09322711dfd..2527afe3acb 100644
--- a/static/usage/v7/content/theming/css-properties/vue.md
+++ b/static/usage/v7/content/theming/css-properties/vue.md
@@ -12,13 +12,8 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/content/theming/css-shadow-parts/vue.md b/static/usage/v7/content/theming/css-shadow-parts/vue.md
index 129f3ec615a..7d752a3c38d 100644
--- a/static/usage/v7/content/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/content/theming/css-shadow-parts/vue.md
@@ -12,13 +12,8 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index 18c5e8c246e..b38aecc9bac 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -5,15 +5,8 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonContent,
- },
- });
</script>
<style>
diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md
index a595c27e409..b660cf05d0a 100644
--- a/static/usage/v7/datetime-button/basic/vue.md
+++ b/static/usage/v7/datetime-button/basic/vue.md
@@ -7,12 +7,7 @@
</ion-modal>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime, IonDatetimeButton, IonModal },
- });
</script>
```
diff --git a/static/usage/v7/datetime/basic/vue.md b/static/usage/v7/datetime/basic/vue.md
index cc68b9ab44a..27459806b39 100644
--- a/static/usage/v7/datetime/basic/vue.md
+++ b/static/usage/v7/datetime/basic/vue.md
@@ -3,12 +3,7 @@
<ion-datetime></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
index fddaa53fac1..3ff4868721f 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
@@ -3,12 +3,7 @@
<ion-datetime :show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
index 4d1408b7ab4..4bfb943ffd6 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
@@ -9,19 +9,16 @@
</ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButtons, IonButton, IonDatetime } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButtons, IonButton, IonDatetime },
- setup() {
- const datetime = ref();
- const reset = () => datetime.value.$el.reset();
- const cancel = () => datetime.value.$el.cancel();
- const confirm = () => datetime.value.$el.confirm();
- return { datetime, reset, cancel, confirm };
- },
- });
+ const datetime = ref();
+
+ const reset = () => datetime.value.$el.reset();
+
+ const cancel = () => datetime.value.$el.cancel();
+
+ const confirm = () => datetime.value.$el.confirm();
</script>
```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
index 196d89fbf4d..a3ea9f39587 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
@@ -3,12 +3,7 @@
<ion-datetime :show-default-buttons="true"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/vue.md b/static/usage/v7/datetime/date-constraints/advanced/vue.md
index afd310f0867..a64de0f5392 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/vue.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/vue.md
@@ -3,26 +3,18 @@
<ion-datetime :is-date-enabled="isWeekday"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonDatetime },
- setup() {
- const isWeekday = (dateString: string) => {
- const date = new Date(dateString);
- const utcDay = date.getUTCDay();
+ const isWeekday = (dateString: string) => {
+ const date = new Date(dateString);
+ const utcDay = date.getUTCDay();
- /**
- * Date will be enabled if it is not
- * Sunday or Saturday
- */
- return utcDay !== 0 && utcDay !== 6;
- };
-
- return { isWeekday };
- },
- });
+ /**
+ * Date will be enabled if it is not
+ * Sunday or Saturday
+ */
+ return utcDay !== 0 && utcDay !== 6;
+ };
</script>
```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/vue.md b/static/usage/v7/datetime/date-constraints/max-min/vue.md
index 32fec242e0a..df584eee68d 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/vue.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/vue.md
@@ -3,12 +3,7 @@
<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/date-constraints/values/vue.md b/static/usage/v7/datetime/date-constraints/values/vue.md
index cf1d0eaaa89..55a78d20a57 100644
--- a/static/usage/v7/datetime/date-constraints/values/vue.md
+++ b/static/usage/v7/datetime/date-constraints/values/vue.md
@@ -3,12 +3,7 @@
<ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
index 408f58f2833..74c1be1ae57 100644
--- a/static/usage/v7/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -3,38 +3,30 @@
<ion-datetime presentation="date" value="2023-01-01" :highlighted-dates="highlightedDates"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonDatetime },
- setup() {
- const highlightedDates = [
- {
- date: '2023-01-05',
- textColor: '#800080',
- backgroundColor: '#ffc0cb',
- },
- {
- date: '2023-01-10',
- textColor: '#09721b',
- backgroundColor: '#c8e5d0',
- },
- {
- date: '2023-01-20',
- textColor: 'var(--ion-color-secondary-contrast)',
- backgroundColor: 'var(--ion-color-secondary)',
- },
- {
- date: '2023-01-23',
- textColor: 'rgb(68, 10, 184)',
- backgroundColor: 'rgb(211, 200, 229)',
- },
- ];
-
- return { highlightedDates };
+ const highlightedDates = [
+ {
+ date: '2023-01-05',
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ },
+ {
+ date: '2023-01-10',
+ textColor: '#09721b',
+ backgroundColor: '#c8e5d0',
+ },
+ {
+ date: '2023-01-20',
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ },
+ {
+ date: '2023-01-23',
+ textColor: 'rgb(68, 10, 184)',
+ backgroundColor: 'rgb(211, 200, 229)',
},
- });
+ ];
</script>
```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
index e916b2cef1b..dbc55e29779 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -3,36 +3,28 @@
<ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonDatetime },
- setup() {
- const highlightedDates = (isoString) => {
- const date = new Date(isoString);
- const utcDay = date.getUTCDate();
+ const highlightedDates = (isoString) => {
+ const date = new Date(isoString);
+ const utcDay = date.getUTCDate();
- if (utcDay % 5 === 0) {
- return {
- textColor: '#800080',
- backgroundColor: '#ffc0cb',
- };
- }
-
- if (utcDay % 3 === 0) {
- return {
- textColor: 'var(--ion-color-secondary-contrast)',
- backgroundColor: 'var(--ion-color-secondary)',
- };
- }
+ if (utcDay % 5 === 0) {
+ return {
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ };
+ }
- return undefined;
+ if (utcDay % 3 === 0) {
+ return {
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
};
+ }
- return { highlightedDates };
- },
- });
+ return undefined;
+ };
</script>
```
diff --git a/static/usage/v7/datetime/localization/custom-locale/vue.md b/static/usage/v7/datetime/localization/custom-locale/vue.md
index 8a3712a255e..fd4bab86073 100644
--- a/static/usage/v7/datetime/localization/custom-locale/vue.md
+++ b/static/usage/v7/datetime/localization/custom-locale/vue.md
@@ -3,12 +3,7 @@
<ion-datetime locale="es-ES"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/vue.md b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
index 71c24fd72be..9ab463f7d3b 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/vue.md
+++ b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
@@ -3,12 +3,7 @@
<ion-datetime :first-day-of-week="1"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/vue.md b/static/usage/v7/datetime/localization/hour-cycle/vue.md
index b8767c6c2db..0d2ad759efe 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/vue.md
+++ b/static/usage/v7/datetime/localization/hour-cycle/vue.md
@@ -3,12 +3,7 @@
<ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/vue.md b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
index a0181dc8e2d..a2aca8534be 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
@@ -3,12 +3,7 @@
<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/localization/time-label/vue.md b/static/usage/v7/datetime/localization/time-label/vue.md
index 37af973ee32..b9dd89564a7 100644
--- a/static/usage/v7/datetime/localization/time-label/vue.md
+++ b/static/usage/v7/datetime/localization/time-label/vue.md
@@ -5,12 +5,7 @@
</ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/multiple/vue.md b/static/usage/v7/datetime/multiple/vue.md
index 837fc7e2f9f..67af1ef7bfa 100644
--- a/static/usage/v7/datetime/multiple/vue.md
+++ b/static/usage/v7/datetime/multiple/vue.md
@@ -3,12 +3,7 @@
<ion-datetime presentation="date" :multiple="true" :value="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/presentation/date/vue.md b/static/usage/v7/datetime/presentation/date/vue.md
index b686297a867..2764ba52660 100644
--- a/static/usage/v7/datetime/presentation/date/vue.md
+++ b/static/usage/v7/datetime/presentation/date/vue.md
@@ -3,12 +3,7 @@
<ion-datetime presentation="date"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/vue.md b/static/usage/v7/datetime/presentation/month-and-year/vue.md
index 01744a290fe..eee8d68bbe7 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/vue.md
+++ b/static/usage/v7/datetime/presentation/month-and-year/vue.md
@@ -3,12 +3,7 @@
<ion-datetime presentation="month-year"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/presentation/time/vue.md b/static/usage/v7/datetime/presentation/time/vue.md
index 7e01bc7d730..99bd30fb54b 100644
--- a/static/usage/v7/datetime/presentation/time/vue.md
+++ b/static/usage/v7/datetime/presentation/time/vue.md
@@ -3,12 +3,7 @@
<ion-datetime presentation="time"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/presentation/wheel/vue.md b/static/usage/v7/datetime/presentation/wheel/vue.md
index c1055e8cfb7..009eecb0e18 100644
--- a/static/usage/v7/datetime/presentation/wheel/vue.md
+++ b/static/usage/v7/datetime/presentation/wheel/vue.md
@@ -3,12 +3,7 @@
<ion-datetime presentation="date-time" :prefer-wheel="true"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/styling/calendar-days/vue.md b/static/usage/v7/datetime/styling/calendar-days/vue.md
index 98031201d7c..310b711e422 100644
--- a/static/usage/v7/datetime/styling/calendar-days/vue.md
+++ b/static/usage/v7/datetime/styling/calendar-days/vue.md
@@ -3,40 +3,29 @@
<ion-datetime presentation="date" :value="datetime"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: {
- IonDatetime,
- },
- setup() {
- let datetime = ref('');
+ const datetime = ref('');
- const date = new Date();
+ const date = new Date();
- // Set the value of the datetime to 2 days
- // before the current day
- let dayChange = -2;
+ // Set the value of the datetime to 2 days
+ // before the current day
+ const dayChange = ref(-2);
- // If the day we are going to set the value to
- // is in the previous month then set the day 2 days
- // later instead so it remains in the same month
- if (date.getDate() + dayChange <= 0) {
- dayChange = -dayChange;
- }
-
- // Set the value of the datetime to the day
- // calculated above
- date.setDate(date.getDate() + dayChange);
- datetime = date.toISOString();
+ // If the day we are going to set the value to
+ // is in the previous month then set the day 2 days
+ // later instead so it remains in the same month
+ if (date.getDate() + dayChange.value <= 0) {
+ dayChange.value = -dayChange.value;
+ }
- return {
- datetime,
- };
- },
- });
+ // Set the value of the datetime to the day
+ // calculated above
+ date.setDate(date.getDate() + dayChange.value);
+ datetime.value = date.toISOString();
</script>
<style scoped>
diff --git a/static/usage/v7/datetime/styling/global-theming/vue.md b/static/usage/v7/datetime/styling/global-theming/vue.md
index 32e682cfbc9..918189cad29 100644
--- a/static/usage/v7/datetime/styling/global-theming/vue.md
+++ b/static/usage/v7/datetime/styling/global-theming/vue.md
@@ -3,13 +3,8 @@
<ion-datetime color="rose"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
<style>
diff --git a/static/usage/v7/datetime/styling/wheel-styling/vue.md b/static/usage/v7/datetime/styling/wheel-styling/vue.md
index a90c729af63..7546da90a19 100644
--- a/static/usage/v7/datetime/styling/wheel-styling/vue.md
+++ b/static/usage/v7/datetime/styling/wheel-styling/vue.md
@@ -3,13 +3,8 @@
<ion-datetime presentation="date" :prefer-wheel="true"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/theming/vue.md
index 32e682cfbc9..918189cad29 100644
--- a/static/usage/v7/datetime/theming/vue.md
+++ b/static/usage/v7/datetime/theming/vue.md
@@ -3,13 +3,8 @@
<ion-datetime color="rose"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
<style>
diff --git a/static/usage/v7/datetime/title/customizing-title/vue.md b/static/usage/v7/datetime/title/customizing-title/vue.md
index cb633931dba..9baf774651c 100644
--- a/static/usage/v7/datetime/title/customizing-title/vue.md
+++ b/static/usage/v7/datetime/title/customizing-title/vue.md
@@ -5,12 +5,7 @@
</ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/datetime/title/showing-default-title/vue.md b/static/usage/v7/datetime/title/showing-default-title/vue.md
index 7a6e48f7214..919ac6f5dcc 100644
--- a/static/usage/v7/datetime/title/showing-default-title/vue.md
+++ b/static/usage/v7/datetime/title/showing-default-title/vue.md
@@ -3,12 +3,7 @@
<ion-datetime :show-default-title="true"></ion-datetime>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonDatetime } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonDatetime },
- });
</script>
```
diff --git a/static/usage/v7/fab/basic/vue.md b/static/usage/v7/fab/basic/vue.md
index dc16daae992..daede45af20 100644
--- a/static/usage/v7/fab/basic/vue.md
+++ b/static/usage/v7/fab/basic/vue.md
@@ -7,16 +7,8 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
import { add } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFab, IonFabButton, IonIcon },
- setup() {
- return { add };
- },
- });
</script>
```
diff --git a/static/usage/v7/fab/button-sizing/vue.md b/static/usage/v7/fab/button-sizing/vue.md
index 5ea6d8adb56..3b4d20158bb 100644
--- a/static/usage/v7/fab/button-sizing/vue.md
+++ b/static/usage/v7/fab/button-sizing/vue.md
@@ -18,16 +18,8 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
import { add, colorPalette, document, globe } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFab, IonFabButton, IonFabList, IonIcon },
- setup() {
- return { add, colorPalette, document, globe };
- },
- });
</script>
```
diff --git a/static/usage/v7/fab/list-side/vue.md b/static/usage/v7/fab/list-side/vue.md
index 459ea75e845..3a1d638d11d 100644
--- a/static/usage/v7/fab/list-side/vue.md
+++ b/static/usage/v7/fab/list-side/vue.md
@@ -33,16 +33,8 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFab, IonFabButton, IonFabList, IonIcon },
- setup() {
- return { add, chevronBack, chevronDown, chevronForward, chevronUp };
- },
- });
</script>
```
diff --git a/static/usage/v7/fab/positioning/vue.md b/static/usage/v7/fab/positioning/vue.md
index baa2f82e882..420c9177d78 100644
--- a/static/usage/v7/fab/positioning/vue.md
+++ b/static/usage/v7/fab/positioning/vue.md
@@ -59,7 +59,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/vue';
import {
chevronDownCircle,
@@ -69,13 +69,5 @@
document,
globe,
} from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar },
- setup() {
- return { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe };
- },
- });
</script>
```
diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
index 1127a3128db..f941e36eca4 100644
--- a/static/usage/v7/fab/safe-area/vue.md
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -7,21 +7,9 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { add } from 'ionicons/icons';
-
- export default defineComponent({
- components: {
- IonFab,
- IonFabButton,
- IonIcon,
- },
- setup() {
- return { add };
- },
- });
</script>
<style>
diff --git a/static/usage/v7/fab/theming/colors/vue.md b/static/usage/v7/fab/theming/colors/vue.md
index f37cb9707b3..10dd0c17096 100644
--- a/static/usage/v7/fab/theming/colors/vue.md
+++ b/static/usage/v7/fab/theming/colors/vue.md
@@ -33,16 +33,8 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFab, IonFabButton, IonFabList, IonIcon },
- setup() {
- return { add, chevronBack, chevronDown, chevronForward, chevronUp };
- },
- });
</script>
```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/vue.md b/static/usage/v7/fab/theming/css-custom-properties/vue.md
index 00d3b6c87f8..a48634fc0b5 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/vue.md
+++ b/static/usage/v7/fab/theming/css-custom-properties/vue.md
@@ -18,17 +18,9 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
import { add, colorPalette, document, globe } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFab, IonFabButton, IonFabList, IonIcon },
- setup() {
- return { add, colorPalette, document, globe };
- },
- });
</script>
<style>
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/vue.md b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
index aee0d929a06..a6daed217a7 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
@@ -18,17 +18,9 @@
</ion-fab>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
import { add, colorPalette, document, globe } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFab, IonFabButton, IonFabList, IonIcon },
- setup() {
- return { add, colorPalette, document, globe };
- },
- });
</script>
<style>
diff --git a/static/usage/v7/footer/basic/vue.md b/static/usage/v7/footer/basic/vue.md
index ed20057150d..289c3424129 100644
--- a/static/usage/v7/footer/basic/vue.md
+++ b/static/usage/v7/footer/basic/vue.md
@@ -10,12 +10,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/footer/custom-scroll-target/vue.md b/static/usage/v7/footer/custom-scroll-target/vue.md
index b85998db4cb..bcebd4009b6 100644
--- a/static/usage/v7/footer/custom-scroll-target/vue.md
+++ b/static/usage/v7/footer/custom-scroll-target/vue.md
@@ -69,13 +69,8 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonTitle, IonToolbar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/footer/fade/vue.md b/static/usage/v7/footer/fade/vue.md
index 757e78f59da..18c332a79b9 100644
--- a/static/usage/v7/footer/fade/vue.md
+++ b/static/usage/v7/footer/fade/vue.md
@@ -67,12 +67,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/footer/no-border/vue.md b/static/usage/v7/footer/no-border/vue.md
index 9a3eccff15a..68f4573b615 100644
--- a/static/usage/v7/footer/no-border/vue.md
+++ b/static/usage/v7/footer/no-border/vue.md
@@ -10,12 +10,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/footer/translucent/vue.md b/static/usage/v7/footer/translucent/vue.md
index 5d5a0e1497f..a83970ced16 100644
--- a/static/usage/v7/footer/translucent/vue.md
+++ b/static/usage/v7/footer/translucent/vue.md
@@ -67,12 +67,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonFooter, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/grid/basic/vue.md b/static/usage/v7/grid/basic/vue.md
index d693fc8510d..a847141efd7 100644
--- a/static/usage/v7/grid/basic/vue.md
+++ b/static/usage/v7/grid/basic/vue.md
@@ -37,13 +37,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/customizing/column-number/vue.md b/static/usage/v7/grid/customizing/column-number/vue.md
index 1af3143593f..16f4d11a38c 100644
--- a/static/usage/v7/grid/customizing/column-number/vue.md
+++ b/static/usage/v7/grid/customizing/column-number/vue.md
@@ -11,13 +11,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/customizing/padding/vue.md b/static/usage/v7/grid/customizing/padding/vue.md
index 343511e231d..5e11710364b 100644
--- a/static/usage/v7/grid/customizing/padding/vue.md
+++ b/static/usage/v7/grid/customizing/padding/vue.md
@@ -9,13 +9,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/customizing/width/vue.md b/static/usage/v7/grid/customizing/width/vue.md
index 40b0002e822..5ac6e06147b 100644
--- a/static/usage/v7/grid/customizing/width/vue.md
+++ b/static/usage/v7/grid/customizing/width/vue.md
@@ -9,13 +9,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/fixed/vue.md b/static/usage/v7/grid/fixed/vue.md
index fbaa7118bbd..78d815fa74d 100644
--- a/static/usage/v7/grid/fixed/vue.md
+++ b/static/usage/v7/grid/fixed/vue.md
@@ -9,13 +9,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/horizontal-alignment/vue.md b/static/usage/v7/grid/horizontal-alignment/vue.md
index 689efada3ea..e0cf63695f9 100644
--- a/static/usage/v7/grid/horizontal-alignment/vue.md
+++ b/static/usage/v7/grid/horizontal-alignment/vue.md
@@ -41,13 +41,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/offset-responsive/vue.md b/static/usage/v7/grid/offset-responsive/vue.md
index ca540bee471..262912a22de 100644
--- a/static/usage/v7/grid/offset-responsive/vue.md
+++ b/static/usage/v7/grid/offset-responsive/vue.md
@@ -30,13 +30,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/offset/vue.md b/static/usage/v7/grid/offset/vue.md
index 1a69ea6e061..120fadbdd7c 100644
--- a/static/usage/v7/grid/offset/vue.md
+++ b/static/usage/v7/grid/offset/vue.md
@@ -29,13 +29,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/push-pull-responsive/vue.md b/static/usage/v7/grid/push-pull-responsive/vue.md
index 82015e52758..c91fe1db4b7 100644
--- a/static/usage/v7/grid/push-pull-responsive/vue.md
+++ b/static/usage/v7/grid/push-pull-responsive/vue.md
@@ -31,13 +31,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md
index b5146e95e0e..6747aa0b18a 100644
--- a/static/usage/v7/grid/push-pull/vue.md
+++ b/static/usage/v7/grid/push-pull/vue.md
@@ -39,13 +39,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/size-auto/vue.md b/static/usage/v7/grid/size-auto/vue.md
index f410272730d..2b0c0878317 100644
--- a/static/usage/v7/grid/size-auto/vue.md
+++ b/static/usage/v7/grid/size-auto/vue.md
@@ -34,13 +34,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonInput, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/size-responsive/vue.md b/static/usage/v7/grid/size-responsive/vue.md
index 2762e9c4774..c9bd5652b40 100644
--- a/static/usage/v7/grid/size-responsive/vue.md
+++ b/static/usage/v7/grid/size-responsive/vue.md
@@ -32,13 +32,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/size/vue.md b/static/usage/v7/grid/size/vue.md
index 14baef9e1c4..671fe715074 100644
--- a/static/usage/v7/grid/size/vue.md
+++ b/static/usage/v7/grid/size/vue.md
@@ -30,13 +30,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/grid/vertical-alignment/vue.md b/static/usage/v7/grid/vertical-alignment/vue.md
index e48b234b38a..0c024997cf5 100644
--- a/static/usage/v7/grid/vertical-alignment/vue.md
+++ b/static/usage/v7/grid/vertical-alignment/vue.md
@@ -46,13 +46,8 @@
</ion-grid>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCol, IonGrid, IonRow } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCol, IonGrid, IonRow },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/header/basic/vue.md b/static/usage/v7/header/basic/vue.md
index 1bba4fdee2b..38642bf55b1 100644
--- a/static/usage/v7/header/basic/vue.md
+++ b/static/usage/v7/header/basic/vue.md
@@ -10,12 +10,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/header/condense/vue.md b/static/usage/v7/header/condense/vue.md
index dddaef7f71c..dda020ade07 100644
--- a/static/usage/v7/header/condense/vue.md
+++ b/static/usage/v7/header/condense/vue.md
@@ -75,12 +75,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md
index 84aac1c56fe..5a71b3c6dd4 100644
--- a/static/usage/v7/header/custom-scroll-target/vue.md
+++ b/static/usage/v7/header/custom-scroll-target/vue.md
@@ -69,13 +69,8 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonTitle, IonToolbar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md
index 264038c103c..f3a2e3f52cb 100644
--- a/static/usage/v7/header/fade/vue.md
+++ b/static/usage/v7/header/fade/vue.md
@@ -67,12 +67,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/header/no-border/vue.md b/static/usage/v7/header/no-border/vue.md
index a5583fb06d1..0cb3f566fa1 100644
--- a/static/usage/v7/header/no-border/vue.md
+++ b/static/usage/v7/header/no-border/vue.md
@@ -10,12 +10,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md
index 26370009d44..77f6e8ef141 100644
--- a/static/usage/v7/header/translucent/vue.md
+++ b/static/usage/v7/header/translucent/vue.md
@@ -67,12 +67,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/icon/basic/vue.md b/static/usage/v7/icon/basic/vue.md
index c78d79fb041..83adf87290f 100644
--- a/static/usage/v7/icon/basic/vue.md
+++ b/static/usage/v7/icon/basic/vue.md
@@ -6,16 +6,8 @@
<ion-icon :icon="logoIonic" size="large" color="primary"></ion-icon>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonIcon } from '@ionic/vue';
import { logoIonic } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonIcon },
- setup() {
- return { logoIonic };
- },
- });
</script>
```
diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md
index db4d74618ef..a4760b2bbe4 100644
--- a/static/usage/v7/img/basic/vue.md
+++ b/static/usage/v7/img/basic/vue.md
@@ -6,12 +6,7 @@
></ion-img>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonImg } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonImg },
- });
</script>
```
diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
index dc7a7c45f46..1c40860040a 100644
--- a/static/usage/v7/infinite-scroll/basic/vue.md
+++ b/static/usage/v7/infinite-scroll/basic/vue.md
@@ -15,7 +15,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonContent,
IonInfiniteScroll,
@@ -27,39 +27,22 @@
IonLabel,
InfiniteScrollCustomEvent,
} from '@ionic/vue';
- import { defineComponent, reactive } from 'vue';
+ import { reactive } from 'vue';
- export default defineComponent({
- components: {
- IonContent,
- IonContent,
- IonInfiniteScroll,
- IonInfiniteScrollContent,
- IonList,
- IonItem,
- IonAvatar,
- IonImg,
- IonLabel,
- },
- setup() {
- const items = reactive([]);
+ const items = reactive([]);
- const generateItems = () => {
- const count = items.length + 1;
- for (let i = 0; i < 50; i++) {
- items.push(`Item ${count + i}`);
- }
- };
+ const generateItems = () => {
+ const count = items.length + 1;
+ for (let i = 0; i < 50; i++) {
+ items.push(`Item ${count + i}`);
+ }
+ };
- const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
- generateItems();
- setTimeout(() => ev.target.complete(), 500);
- };
+ const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
+ generateItems();
+ setTimeout(() => ev.target.complete(), 500);
+ };
- generateItems();
-
- return { ionInfinite, items };
- },
- });
+ generateItems();
</script>
```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
index 85954295280..a6a1d40bd92 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -81,7 +81,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonContent,
IonInfiniteScroll,
@@ -93,29 +93,12 @@
IonLabel,
InfiniteScrollCustomEvent,
} from '@ionic/vue';
- import { defineComponent, reactive } from 'vue';
+ import { reactive } from 'vue';
- export default defineComponent({
- components: {
- IonContent,
- IonContent,
- IonInfiniteScroll,
- IonInfiniteScrollContent,
- IonList,
- IonItem,
- IonAvatar,
- IonImg,
- IonLabel,
- },
- setup() {
- const items = reactive([]);
+ const items = reactive([]);
- for (let i = 1; i < 51; i++) {
- items.push(`Item ${i}`);
- }
-
- return { items };
- },
- });
+ for (let i = 1; i < 51; i++) {
+ items.push(`Item ${i}`);
+ }
</script>
```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
index f00b47e1fb8..e8bc7c0053b 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
@@ -18,7 +18,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonContent,
IonInfiniteScroll,
@@ -30,29 +30,12 @@
IonLabel,
InfiniteScrollCustomEvent,
} from '@ionic/vue';
- import { defineComponent, reactive } from 'vue';
+ import { reactive } from 'vue';
- export default defineComponent({
- components: {
- IonContent,
- IonContent,
- IonInfiniteScroll,
- IonInfiniteScrollContent,
- IonList,
- IonItem,
- IonAvatar,
- IonImg,
- IonLabel,
- },
- setup() {
- const items = reactive([]);
+ const items = reactive([]);
- for (let i = 1; i < 51; i++) {
- items.push(`Item ${i}`);
- }
-
- return { items };
- },
- });
+ for (let i = 1; i < 51; i++) {
+ items.push(`Item ${i}`);
+ }
</script>
```
diff --git a/static/usage/v7/input/basic/vue.md b/static/usage/v7/input/basic/vue.md
index cfdca09244a..17dd0ef4e00 100644
--- a/static/usage/v7/input/basic/vue.md
+++ b/static/usage/v7/input/basic/vue.md
@@ -23,12 +23,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/input/clear/vue.md b/static/usage/v7/input/clear/vue.md
index e5cd540d469..097fe701b48 100644
--- a/static/usage/v7/input/clear/vue.md
+++ b/static/usage/v7/input/clear/vue.md
@@ -34,12 +34,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
index d1f2e440b05..e4f2c1ecd7c 100644
--- a/static/usage/v7/input/fill/vue.md
+++ b/static/usage/v7/input/fill/vue.md
@@ -7,12 +7,7 @@
<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput },
- });
</script>
```
diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md
index a95e5dcc843..d2b6f0f0019 100644
--- a/static/usage/v7/input/filtering/vue.md
+++ b/static/usage/v7/input/filtering/vue.md
@@ -12,35 +12,28 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonInput, IonItem, IonList },
- setup() {
- const ionInputEl = ref();
- const inputModel = ref('');
- const onInput = (ev) => {
- const value = ev.target!.value;
+ const ionInputEl = ref();
+ const inputModel = ref('');
+ const onInput = (ev) => {
+ const value = ev.target!.value;
- // Removes non alphanumeric characters
- const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
- /**
- * Update both the state variable and
- * the component to keep them in sync.
- */
- inputModel.value = filteredValue;
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ inputModel.value = filteredValue;
- const inputCmp = ionInputEl.value;
- if (inputCmp !== undefined) {
- inputCmp.$el.value = filteredValue;
- }
- };
-
- return { ionInputEl, inputModel, onInput };
- },
- });
+ const inputCmp = ionInputEl.value;
+ if (inputCmp !== undefined) {
+ inputCmp.$el.value = filteredValue;
+ }
+ };
</script>
```
diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md
index ce801d04ac7..221728a8ef0 100644
--- a/static/usage/v7/input/helper-error/vue.md
+++ b/static/usage/v7/input/helper-error/vue.md
@@ -13,36 +13,31 @@
></ion-input>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput },
- methods: {
- validateEmail(email) {
- return email.match(
- /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
- );
- },
-
- validate(ev) {
- const value = ev.target.value;
-
- this.$refs.input.$el.classList.remove('ion-valid');
- this.$refs.input.$el.classList.remove('ion-invalid');
-
- if (value === '') return;
-
- this.validateEmail(value)
- ? this.$refs.input.$el.classList.add('ion-valid')
- : this.$refs.input.$el.classList.add('ion-invalid');
- },
-
- markTouched() {
- this.$refs.input.$el.classList.add('ion-touched');
- },
- },
- });
+ import { ref } from 'vue';
+
+ const input = ref(null);
+
+ function validateEmail(email) {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ }
+
+ function validate(ev) {
+ const value = ev.target.value;
+
+ input.value.$el.classList.remove('ion-valid');
+ input.value.$el.classList.remove('ion-invalid');
+
+ if (value === '') return;
+
+ validateEmail(value) ? input.value.$el.classList.add('ion-valid') : input.value.$el.classList.add('ion-invalid');
+ }
+
+ function markTouched() {
+ input.value.$el.classList.add('ion-touched');
+ }
</script>
```
diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md
index 8854647965d..3537bf3cbde 100644
--- a/static/usage/v7/input/label-placement/vue.md
+++ b/static/usage/v7/input/label-placement/vue.md
@@ -19,12 +19,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/input/label-slot/vue.md b/static/usage/v7/input/label-slot/vue.md
index 4b3fb3daeb8..d99c6b25f66 100644
--- a/static/usage/v7/input/label-slot/vue.md
+++ b/static/usage/v7/input/label-slot/vue.md
@@ -9,12 +9,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput, IonItem, IonList, IonText },
- });
</script>
```
diff --git a/static/usage/v7/input/no-visible-label/vue.md b/static/usage/v7/input/no-visible-label/vue.md
index cc181047943..d4c6746a75a 100644
--- a/static/usage/v7/input/no-visible-label/vue.md
+++ b/static/usage/v7/input/no-visible-label/vue.md
@@ -7,12 +7,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/input/start-end-slots/vue.md b/static/usage/v7/input/start-end-slots/vue.md
index 76380eb566a..bf178ac64bc 100644
--- a/static/usage/v7/input/start-end-slots/vue.md
+++ b/static/usage/v7/input/start-end-slots/vue.md
@@ -12,22 +12,8 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
import { eye, lockClosed } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButton,
- IonIcon,
- IonInput,
- IonItem,
- IonList,
- },
- setup() {
- return { eye, lockClosed };
- },
- });
</script>
```
diff --git a/static/usage/v7/input/theming/colors/vue.md b/static/usage/v7/input/theming/colors/vue.md
index e9d3a4e0ef4..4749c965d21 100644
--- a/static/usage/v7/input/theming/colors/vue.md
+++ b/static/usage/v7/input/theming/colors/vue.md
@@ -11,12 +11,7 @@
<ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput },
- });
</script>
```
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
index 77ab74eeeab..2d50d1df579 100644
--- a/static/usage/v7/input/theming/css-properties/vue.md
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -10,13 +10,8 @@
></ion-input>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput },
- });
</script>
<style>
diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md
index 752f60c183f..16b198ae457 100644
--- a/static/usage/v7/input/types/vue.md
+++ b/static/usage/v7/input/types/vue.md
@@ -23,12 +23,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonInput, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md
index 22c9565c278..b855b433bfd 100644
--- a/static/usage/v7/item-divider/basic/vue.md
+++ b/static/usage/v7/item-divider/basic/vue.md
@@ -35,12 +35,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList },
- });
</script>
```
diff --git a/static/usage/v7/item-divider/theming/colors/vue.md b/static/usage/v7/item-divider/theming/colors/vue.md
index 981f99a09da..6ec7f5568cf 100644
--- a/static/usage/v7/item-divider/theming/colors/vue.md
+++ b/static/usage/v7/item-divider/theming/colors/vue.md
@@ -32,12 +32,7 @@
</ion-item-divider>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItemDivider, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItemDivider, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md
index 950e3775d83..1fbe0ff634a 100644
--- a/static/usage/v7/item-divider/theming/css-properties/vue.md
+++ b/static/usage/v7/item-divider/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
</ion-item-divider>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItemDivider } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItemDivider },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/item-group/basic/vue.md b/static/usage/v7/item-group/basic/vue.md
index edba72f0e69..7ae2ab676fe 100644
--- a/static/usage/v7/item-group/basic/vue.md
+++ b/static/usage/v7/item-group/basic/vue.md
@@ -33,12 +33,7 @@
</ion-item-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonItemDivider, IonItemGroup, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md
index 43109034598..c5b9e239535 100644
--- a/static/usage/v7/item-group/sliding-items/vue.md
+++ b/static/usage/v7/item-group/sliding-items/vue.md
@@ -67,7 +67,7 @@
</ion-item-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonItem,
IonItemDivider,
@@ -77,10 +77,5 @@
IonItemSliding,
IonLabel,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
index c8e25a1819a..608321a0e41 100644
--- a/static/usage/v7/item/basic/vue.md
+++ b/static/usage/v7/item/basic/vue.md
@@ -40,12 +40,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md
index 8680f189472..0b7ce00869f 100644
--- a/static/usage/v7/item/buttons/vue.md
+++ b/static/usage/v7/item/buttons/vue.md
@@ -36,16 +36,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
import { home, navigate, star } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonIcon, IonItem, IonLabel },
- setup() {
- return { home, navigate, star };
- },
- });
</script>
```
diff --git a/static/usage/v7/item/clickable/vue.md b/static/usage/v7/item/clickable/vue.md
index 1af8f362758..9f7bd18f991 100644
--- a/static/usage/v7/item/clickable/vue.md
+++ b/static/usage/v7/item/clickable/vue.md
@@ -17,12 +17,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/item/content-types/actions/vue.md b/static/usage/v7/item/content-types/actions/vue.md
index bef520f8f19..b533b636b45 100644
--- a/static/usage/v7/item/content-types/actions/vue.md
+++ b/static/usage/v7/item/content-types/actions/vue.md
@@ -150,7 +150,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonAvatar,
IonContent,
@@ -165,27 +165,6 @@
IonTitle,
IonToolbar,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
import { pin, share, trash } from 'ionicons/icons';
-
- export default defineComponent({
- components: {
- IonAvatar,
- IonContent,
- IonHeader,
- IonIcon,
- IonItem,
- IonItemOptions,
- IonItemOption,
- IonItemSliding,
- IonLabel,
- IonList,
- IonTitle,
- IonToolbar,
- },
- setup() {
- return { pin, share, trash };
- },
- });
</script>
```
diff --git a/static/usage/v7/item/content-types/controls/vue.md b/static/usage/v7/item/content-types/controls/vue.md
index 4c5e5b8bf76..e97590b2ce2 100644
--- a/static/usage/v7/item/content-types/controls/vue.md
+++ b/static/usage/v7/item/content-types/controls/vue.md
@@ -39,21 +39,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonCheckbox,
- IonContent,
- IonHeader,
- IonInput,
- IonItem,
- IonList,
- IonTitle,
- IonToolbar,
- },
- });
</script>
```
diff --git a/static/usage/v7/item/content-types/metadata/vue.md b/static/usage/v7/item/content-types/metadata/vue.md
index 5183d079aef..12f522972eb 100644
--- a/static/usage/v7/item/content-types/metadata/vue.md
+++ b/static/usage/v7/item/content-types/metadata/vue.md
@@ -90,7 +90,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonContent,
IonHeader,
@@ -103,26 +103,7 @@
IonTitle,
IonToolbar,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
import { chevronForward, listCircle } from 'ionicons/icons';
-
- export default defineComponent({
- components: {
- IonContent,
- IonHeader,
- IonIcon,
- IonItem,
- IonLabel,
- IonList,
- IonNote,
- IonText,
- IonTitle,
- IonToolbar,
- },
- setup() {
- return { chevronForward, listCircle };
- },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/item/content-types/supporting-visuals/vue.md b/static/usage/v7/item/content-types/supporting-visuals/vue.md
index 73f3eb56721..7adeaebdbe7 100644
--- a/static/usage/v7/item/content-types/supporting-visuals/vue.md
+++ b/static/usage/v7/item/content-types/supporting-visuals/vue.md
@@ -47,22 +47,8 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
-
- export default defineComponent({
- components: {
- IonAvatar,
- IonItem,
- IonLabel,
- IonList,
- IonIcon,
- },
- setup() {
- return { airplane, bluetooth, call, wifi };
- },
- });
</script>
```
diff --git a/static/usage/v7/item/content-types/text/vue.md b/static/usage/v7/item/content-types/text/vue.md
index f6b36a8f6d8..b5c85edbe9b 100644
--- a/static/usage/v7/item/content-types/text/vue.md
+++ b/static/usage/v7/item/content-types/text/vue.md
@@ -33,7 +33,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonContent,
IonHeader,
@@ -47,23 +47,6 @@
IonToolbar,
IonTitle,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonContent,
- IonHeader,
- IonInput,
- IonItem,
- IonLabel,
- IonList,
- IonNote,
- IonTextarea,
- IonToggle,
- IonToolbar,
- IonTitle,
- },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md
index 54010095652..c2be4777aca 100644
--- a/static/usage/v7/item/detail-arrows/vue.md
+++ b/static/usage/v7/item/detail-arrows/vue.md
@@ -37,18 +37,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
import { caretForwardOutline } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- setup() {
- return {
- caretForwardOutline,
- };
- },
- });
</script>
```
diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md
index a89e5e6aad0..f2b61cc324b 100644
--- a/static/usage/v7/item/icons/vue.md
+++ b/static/usage/v7/item/icons/vue.md
@@ -21,16 +21,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
import { informationCircle, star } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonIcon, IonItem, IonLabel },
- setup() {
- return { informationCircle, star };
- },
- });
</script>
```
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 62ce6f5efc1..c7ba5b0a451 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -43,7 +43,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonCheckbox,
IonInput,
@@ -54,10 +54,5 @@
IonSelectOption,
IonToggle,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md
index fb855de221f..0097ab96f3c 100644
--- a/static/usage/v7/item/lines/vue.md
+++ b/static/usage/v7/item/lines/vue.md
@@ -41,16 +41,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonIcon, IonItem, IonLabel } from '@ionic/vue';
import { informationCircle, star } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonIcon, IonItem, IonLabel },
- setup() {
- return { informationCircle, star };
- },
- });
</script>
```
diff --git a/static/usage/v7/item/media/vue.md b/static/usage/v7/item/media/vue.md
index 38b16a91fb3..b6236edf0f8 100644
--- a/static/usage/v7/item/media/vue.md
+++ b/static/usage/v7/item/media/vue.md
@@ -15,12 +15,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonAvatar, IonItem, IonLabel, IonThumbnail },
- });
</script>
```
diff --git a/static/usage/v7/item/theming/colors/vue.md b/static/usage/v7/item/theming/colors/vue.md
index b98f625e479..b989b73bc00 100644
--- a/static/usage/v7/item/theming/colors/vue.md
+++ b/static/usage/v7/item/theming/colors/vue.md
@@ -32,12 +32,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/item/theming/css-properties/vue.md b/static/usage/v7/item/theming/css-properties/vue.md
index 305102b811b..ea2524248a1 100644
--- a/static/usage/v7/item/theming/css-properties/vue.md
+++ b/static/usage/v7/item/theming/css-properties/vue.md
@@ -13,13 +13,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- });
</script>
<style>
diff --git a/static/usage/v7/item/theming/css-shadow-parts/vue.md b/static/usage/v7/item/theming/css-shadow-parts/vue.md
index b0ebb030693..003d3d86d13 100644
--- a/static/usage/v7/item/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/item/theming/css-shadow-parts/vue.md
@@ -13,13 +13,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- });
</script>
<style>
diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md
index 76bb289ee00..a76a6c06fdd 100644
--- a/static/usage/v7/item/theming/input-highlight/vue.md
+++ b/static/usage/v7/item/theming/input-highlight/vue.md
@@ -16,12 +16,8 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonInput, IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonInput, IonItem, IonLabel },
- });
</script>
<style>
diff --git a/static/usage/v7/label/basic/vue.md b/static/usage/v7/label/basic/vue.md
index 87f46b68110..cde7c134310 100644
--- a/static/usage/v7/label/basic/vue.md
+++ b/static/usage/v7/label/basic/vue.md
@@ -3,12 +3,7 @@
<ion-label>Label</ion-label>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md
index 6f9443e1a5e..3f33390b65a 100644
--- a/static/usage/v7/label/input/vue.md
+++ b/static/usage/v7/label/input/vue.md
@@ -31,11 +31,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md
index fe4cd48904a..ad431420dbe 100644
--- a/static/usage/v7/label/item/vue.md
+++ b/static/usage/v7/label/item/vue.md
@@ -26,12 +26,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/label/theming/colors/vue.md b/static/usage/v7/label/theming/colors/vue.md
index da18a00d4d1..f917013b789 100644
--- a/static/usage/v7/label/theming/colors/vue.md
+++ b/static/usage/v7/label/theming/colors/vue.md
@@ -12,12 +12,7 @@
<ion-label color="dark">Dark</ion-label>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel },
- });
</script>
```
diff --git a/static/usage/v7/layout/dynamic-font-scaling/vue.md b/static/usage/v7/layout/dynamic-font-scaling/vue.md
index 5e0f13156c6..15a7c0de7a3 100644
--- a/static/usage/v7/layout/dynamic-font-scaling/vue.md
+++ b/static/usage/v7/layout/dynamic-font-scaling/vue.md
@@ -45,7 +45,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonBackButton,
IonButton,
@@ -64,30 +64,6 @@
IonToolbar,
} from '@ionic/vue';
import { create } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonBackButton,
- IonButton,
- IonButtons,
- IonCheckbox,
- IonContent,
- IonFooter,
- IonHeader,
- IonIcon,
- IonInput,
- IonItem,
- IonLabel,
- IonList,
- IonTitle,
- IonToggle,
- IonToolbar,
- },
- setup() {
- return { create };
- },
- });
</script>
<style>
diff --git a/static/usage/v7/list-header/basic/vue.md b/static/usage/v7/list-header/basic/vue.md
index b7d6980e400..73188378d2d 100644
--- a/static/usage/v7/list-header/basic/vue.md
+++ b/static/usage/v7/list-header/basic/vue.md
@@ -22,12 +22,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonListHeader },
- });
</script>
```
diff --git a/static/usage/v7/list-header/buttons/vue.md b/static/usage/v7/list-header/buttons/vue.md
index 704e94f057a..23a1881bedd 100644
--- a/static/usage/v7/list-header/buttons/vue.md
+++ b/static/usage/v7/list-header/buttons/vue.md
@@ -23,12 +23,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonItem, IonLabel, IonList, IonListHeader },
- });
</script>
```
diff --git a/static/usage/v7/list-header/lines/vue.md b/static/usage/v7/list-header/lines/vue.md
index 6ec522dd8a4..2a0b957a982 100644
--- a/static/usage/v7/list-header/lines/vue.md
+++ b/static/usage/v7/list-header/lines/vue.md
@@ -37,12 +37,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonListHeader },
- });
</script>
```
diff --git a/static/usage/v7/list-header/theming/colors/vue.md b/static/usage/v7/list-header/theming/colors/vue.md
index b20672dd78f..78a1e07f465 100644
--- a/static/usage/v7/list-header/theming/colors/vue.md
+++ b/static/usage/v7/list-header/theming/colors/vue.md
@@ -32,12 +32,7 @@
</ion-list-header>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonListHeader } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonListHeader },
- });
</script>
```
diff --git a/static/usage/v7/list-header/theming/css-properties/vue.md b/static/usage/v7/list-header/theming/css-properties/vue.md
index c56d482c2a2..7178f04d73f 100644
--- a/static/usage/v7/list-header/theming/css-properties/vue.md
+++ b/static/usage/v7/list-header/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
</ion-list-header>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonListHeader } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonListHeader },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/list/basic/vue.md b/static/usage/v7/list/basic/vue.md
index 4f3886c0719..42d6ec6e270 100644
--- a/static/usage/v7/list/basic/vue.md
+++ b/static/usage/v7/list/basic/vue.md
@@ -19,12 +19,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonList },
- });
</script>
```
diff --git a/static/usage/v7/list/inset/vue.md b/static/usage/v7/list/inset/vue.md
index 5391206549f..4f75add243e 100644
--- a/static/usage/v7/list/inset/vue.md
+++ b/static/usage/v7/list/inset/vue.md
@@ -21,12 +21,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonItem, IonLabel, IonList },
- });
</script>
```
diff --git a/static/usage/v7/list/lines/vue.md b/static/usage/v7/list/lines/vue.md
index 914ba88d980..c43242456f9 100644
--- a/static/usage/v7/list/lines/vue.md
+++ b/static/usage/v7/list/lines/vue.md
@@ -37,12 +37,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonList },
- });
</script>
```
diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md
index e80b61cc8b3..f9159e5634e 100644
--- a/static/usage/v7/loading/controller/vue.md
+++ b/static/usage/v7/loading/controller/vue.md
@@ -3,24 +3,16 @@
<ion-button @click="showLoading">Show Loading</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, loadingController } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonButton },
- setup() {
- const showLoading = async () => {
- const loading = await loadingController.create({
- message: 'Dismissing after 3 seconds...',
- duration: 3000,
- });
+ const showLoading = async () => {
+ const loading = await loadingController.create({
+ message: 'Dismissing after 3 seconds...',
+ duration: 3000,
+ });
- loading.present();
- };
-
- return { showLoading };
- },
- });
+ loading.present();
+ };
</script>
```
diff --git a/static/usage/v7/loading/inline/vue.md b/static/usage/v7/loading/inline/vue.md
index 9c924108af8..c71803c3f23 100644
--- a/static/usage/v7/loading/inline/vue.md
+++ b/static/usage/v7/loading/inline/vue.md
@@ -4,11 +4,7 @@
<ion-loading trigger="open-loading" :duration="3000" message="Dismissing after 3 seconds..."> </ion-loading>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonLoading } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
- export default defineComponent({
- components: { IonButton, IonLoading },
- });
</script>
```
diff --git a/static/usage/v7/loading/spinners/vue.md b/static/usage/v7/loading/spinners/vue.md
index 5e3b62759ad..1f61e4d23e0 100644
--- a/static/usage/v7/loading/spinners/vue.md
+++ b/static/usage/v7/loading/spinners/vue.md
@@ -4,12 +4,7 @@
<ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonLoading } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonLoading },
- });
</script>
```
diff --git a/static/usage/v7/loading/theming/vue.md b/static/usage/v7/loading/theming/vue.md
index 7f4538b7068..9f6139d0068 100644
--- a/static/usage/v7/loading/theming/vue.md
+++ b/static/usage/v7/loading/theming/vue.md
@@ -4,13 +4,8 @@
<ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonLoading } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonLoading },
- });
</script>
<style>
ion-loading.custom-loading {
diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md
index 531c50678f8..8060e3eda78 100644
--- a/static/usage/v7/menu/basic/vue.md
+++ b/static/usage/v7/menu/basic/vue.md
@@ -21,21 +21,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButtons,
- IonContent,
- IonHeader,
- IonMenu,
- IonMenuButton,
- IonPage,
- IonTitle,
- IonToolbar,
- },
- });
</script>
```
diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md
index 1fb4e986f44..b344ea8e99f 100644
--- a/static/usage/v7/menu/multiple/vue.md
+++ b/static/usage/v7/menu/multiple/vue.md
@@ -43,42 +43,34 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController },
- setup() {
- const openFirstMenu = async () => {
- /**
- * Open the menu by menu-id
- * We refer to the menu using an ID
- * because multiple "start" menus exist.
- */
- await menuController.open('first-menu');
- };
+ const openFirstMenu = async () => {
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
+ await menuController.open('first-menu');
+ };
- const openSecondMenu = async () => {
- /**
- * Open the menu by menu-id
- * We refer to the menu using an ID
- * because multiple "start" menus exist.
- */
- await menuController.open('second-menu');
- };
+ const openSecondMenu = async () => {
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
+ await menuController.open('second-menu');
+ };
- const openEndMenu = async () => {
- /**
- * Open the menu by side
- * We can refer to the menu by side
- * here because only one "end" menu exists
- */
- await menuController.open('end');
- };
-
- return { openFirstMenu, openSecondMenu, openEndMenu };
- },
- });
+ const openEndMenu = async () => {
+ /**
+ * Open the menu by side
+ * We can refer to the menu by side
+ * here because only one "end" menu exists
+ */
+ await menuController.open('end');
+ };
</script>
```
diff --git a/static/usage/v7/menu/sides/vue.md b/static/usage/v7/menu/sides/vue.md
index 66448f05bf6..c4e51a9ce28 100644
--- a/static/usage/v7/menu/sides/vue.md
+++ b/static/usage/v7/menu/sides/vue.md
@@ -21,21 +21,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButtons,
- IonContent,
- IonHeader,
- IonMenu,
- IonMenuButton,
- IonPage,
- IonTitle,
- IonToolbar,
- },
- });
</script>
```
diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md
index 27a96f00e0b..8ca6bf2ca52 100644
--- a/static/usage/v7/menu/theming/vue.md
+++ b/static/usage/v7/menu/theming/vue.md
@@ -21,22 +21,8 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButtons,
- IonContent,
- IonHeader,
- IonMenu,
- IonMenuButton,
- IonPage,
- IonTitle,
- IonToolbar,
- },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md
index 6b723df95ad..d15b294086f 100644
--- a/static/usage/v7/menu/toggle/vue.md
+++ b/static/usage/v7/menu/toggle/vue.md
@@ -26,21 +26,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButton,
- IonContent,
- IonHeader,
- IonMenu,
- IonMenuToggle,
- IonPage,
- IonTitle,
- IonToolbar,
- },
- });
</script>
```
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md
index f10b90a0a9a..0c2ffb23b0c 100644
--- a/static/usage/v7/menu/type/vue.md
+++ b/static/usage/v7/menu/type/vue.md
@@ -46,7 +46,7 @@
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonButton,
IonContent,
@@ -60,27 +60,8 @@
IonTitle,
IonToolbar,
} from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: {
- IonButton,
- IonContent,
- IonHeader,
- IonItem,
- IonMenu,
- IonMenuToggle,
- IonPage,
- IonRadio,
- IonRadioGroup,
- IonTitle,
- IonToolbar,
- },
- setup() {
- const menuType = ref('overlay');
-
- return { menuType };
- },
- });
+ const menuType = ref('overlay');
</script>
```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
index 3504c7230cd..6ce5c230c95 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -9,7 +9,7 @@
<ion-content class="ion-padding">
<ion-button id="open-modal" expand="block">Open</ion-button>
- <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+ <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="page?.$el">
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
@@ -31,7 +31,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
CheckboxCustomEvent,
IonButtons,
@@ -45,38 +45,18 @@
IonCheckbox,
IonPage,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: {
- IonButtons,
- IonButton,
- IonModal,
- IonHeader,
- IonContent,
- IonToolbar,
- IonTitle,
- IonItem,
- IonCheckbox,
- IonPage,
- },
- data() {
- return {
- canDismiss: false,
- presentingElement: undefined,
- };
- },
- methods: {
- dismiss() {
- this.$refs.modal.$el.dismiss();
- },
- onTermsChanged(ev: CheckboxCustomEvent) {
- this.canDismiss = ev.detail.checked;
- },
- },
- mounted() {
- this.presentingElement = this.$refs.page.$el;
- },
- });
+ const modal = ref();
+ const page = ref();
+ const canDismiss = ref(false);
+
+ function dismiss() {
+ modal.value.$el.dismiss();
+ }
+
+ function onTermsChanged(ev: CheckboxCustomEvent) {
+ canDismiss.value = ev.detail.checked;
+ }
</script>
```
diff --git a/static/usage/v7/modal/can-dismiss/function/vue.md b/static/usage/v7/modal/can-dismiss/function/vue.md
index cdf51c892ac..cfbd05fb884 100644
--- a/static/usage/v7/modal/can-dismiss/function/vue.md
+++ b/static/usage/v7/modal/can-dismiss/function/vue.md
@@ -9,7 +9,7 @@
<ion-content class="ion-padding">
<ion-button id="open-modal" expand="block">Open</ion-button>
- <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+ <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="page?.$el">
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
@@ -26,7 +26,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonButtons,
IonButton,
@@ -38,41 +38,32 @@
IonPage,
actionSheetController,
} from '@ionic/vue';
- import { defineComponent } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
- data() {
- return {
- presentingElement: undefined,
- };
- },
- methods: {
- dismiss() {
- this.$refs.modal.$el.dismiss();
- },
- async canDismiss() {
- const actionSheet = await actionSheetController.create({
- header: 'Are you sure?',
- buttons: [
- {
- text: 'Yes',
- role: 'confirm',
- },
- {
- text: 'No',
- role: 'cancel',
- },
- ],
- });
- actionSheet.present();
- const { role } = await actionSheet.onWillDismiss();
- return role === 'confirm';
- },
- },
- mounted() {
- this.presentingElement = this.$refs.page.$el;
- },
- });
+ const modal = ref();
+ const page = ref();
+
+ function dismiss() {
+ modal.value.$el.dismiss();
+ }
+
+ async function canDismiss() {
+ const actionSheet = await actionSheetController.create({
+ header: 'Are you sure?',
+ buttons: [
+ {
+ text: 'Yes',
+ role: 'confirm',
+ },
+ {
+ text: 'No',
+ role: 'cancel',
+ },
+ ],
+ });
+ actionSheet.present();
+ const { role } = await actionSheet.onWillDismiss();
+ return role === 'confirm';
+ }
</script>
```
diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
index 0d1bb74fb60..8b347ffd9a2 100644
--- a/static/usage/v7/nav/nav-link/vue/example_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -3,18 +3,11 @@
<ion-nav :root="component"></ion-nav>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { markRaw } from 'vue';
import { IonNav } from '@ionic/vue';
import PageOne from './PageOne.vue';
- export default {
- components: { IonNav },
- data() {
- return {
- component: markRaw(PageOne),
- };
- },
- };
+ const component = markRaw(PageOne);
</script>
```
diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
index 6597688ea05..b3070c9f9ee 100644
--- a/static/usage/v7/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -13,18 +13,11 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { markRaw } from 'vue';
import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
import PageTwo from './PageTwo.vue';
- export default {
- components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
- data() {
- return {
- component: markRaw(PageTwo),
- };
- },
- };
+ const component = markRaw(PageTwo);
</script>
```
diff --git a/static/usage/v7/nav/nav-link/vue/page_three_vue.md b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
index 54d6acf24c9..a3ebebcafba 100644
--- a/static/usage/v7/nav/nav-link/vue/page_three_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
@@ -13,11 +13,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
-
- export default {
- components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
- };
</script>
```
diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
index ceb17385968..0090c90c82c 100644
--- a/static/usage/v7/nav/nav-link/vue/page_two_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
@@ -16,7 +16,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { markRaw } from 'vue';
import {
IonHeader,
@@ -30,22 +30,6 @@
} from '@ionic/vue';
import PageThree from './PageThree.vue';
- export default {
- components: {
- IonHeader,
- IonTitle,
- IonToolbar,
- IonContent,
- IonNavLink,
- IonButton,
- IonButtons,
- IonBackButton,
- },
- data() {
- return {
- component: markRaw(PageThree),
- };
- },
- };
+ const component = markRaw(PageThree);
</script>
```
diff --git a/static/usage/v7/note/basic/vue.md b/static/usage/v7/note/basic/vue.md
index dffb1348fc9..7f10ecb0b81 100644
--- a/static/usage/v7/note/basic/vue.md
+++ b/static/usage/v7/note/basic/vue.md
@@ -3,12 +3,7 @@
<ion-note>Default Note</ion-note>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonNote } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonNote },
- });
</script>
```
diff --git a/static/usage/v7/note/item/vue.md b/static/usage/v7/note/item/vue.md
index 24b7add1ed1..d0420f38eea 100644
--- a/static/usage/v7/note/item/vue.md
+++ b/static/usage/v7/note/item/vue.md
@@ -11,12 +11,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonNote } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonNote },
- });
</script>
```
diff --git a/static/usage/v7/note/theming/colors/vue.md b/static/usage/v7/note/theming/colors/vue.md
index 77e767a5e5f..a7022d75382 100644
--- a/static/usage/v7/note/theming/colors/vue.md
+++ b/static/usage/v7/note/theming/colors/vue.md
@@ -12,12 +12,7 @@
<ion-note color="dark">Dark Note</ion-note>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonNote } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonNote },
- });
</script>
```
diff --git a/static/usage/v7/note/theming/css-properties/vue.md b/static/usage/v7/note/theming/css-properties/vue.md
index 77e8b361f2c..d152e7532ea 100644
--- a/static/usage/v7/note/theming/css-properties/vue.md
+++ b/static/usage/v7/note/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
<ion-note>Default Note</ion-note>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonNote } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonNote },
- });
</script>
<style>
diff --git a/static/usage/v7/picker/controller/vue.md b/static/usage/v7/picker/controller/vue.md
index 54fedf2cce3..c3475978640 100644
--- a/static/usage/v7/picker/controller/vue.md
+++ b/static/usage/v7/picker/controller/vue.md
@@ -3,59 +3,48 @@
<ion-button @click="openPicker()">Open</ion-button>
</template>
-<script>
+<script lang="ts" setup>
import { IonButton, pickerController } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonButton },
- data() {
- return {
- message: '',
- };
- },
- methods: {
- async openPicker() {
- const picker = await pickerController.create({
- columns: [
+ async function openPicker() {
+ const picker = await pickerController.create({
+ columns: [
+ {
+ name: 'languages',
+ options: [
{
- name: 'languages',
- options: [
- {
- text: 'JavaScript',
- value: 'javascript',
- },
- {
- text: 'TypeScript',
- value: 'typescript',
- },
- {
- text: 'Rust',
- value: 'rust',
- },
- {
- text: 'C#',
- value: 'c#',
- },
- ],
+ text: 'JavaScript',
+ value: 'javascript',
+ },
+ {
+ text: 'TypeScript',
+ value: 'typescript',
},
- ],
- buttons: [
{
- text: 'Cancel',
- role: 'cancel',
+ text: 'Rust',
+ value: 'rust',
},
{
- text: 'Confirm',
- handler: (value) => {
- console.log(`You selected: ${value.languages.value}`);
- },
+ text: 'C#',
+ value: 'c#',
},
],
- });
- await picker.present();
- },
- },
- });
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ console.log(`You selected: ${value.languages.value}`);
+ },
+ },
+ ],
+ });
+ await picker.present();
+ }
</script>
```
diff --git a/static/usage/v7/picker/inline/isOpen/vue.md b/static/usage/v7/picker/inline/isOpen/vue.md
index bd03157e734..37e93ebbbdd 100644
--- a/static/usage/v7/picker/inline/isOpen/vue.md
+++ b/static/usage/v7/picker/inline/isOpen/vue.md
@@ -9,58 +9,51 @@
></ion-picker>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonPicker } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButton, IonPicker },
- setup() {
- const isOpen = ref(false);
+ const isOpen = ref(false);
- const pickerColumns = [
+ const pickerColumns = [
+ {
+ name: 'languages',
+ options: [
{
- name: 'languages',
- options: [
- {
- text: 'JavaScript',
- value: 'javascript',
- },
- {
- text: 'TypeScript',
- value: 'typescript',
- },
- {
- text: 'Rust',
- value: 'rust',
- },
- {
- text: 'C#',
- value: 'c#',
- },
- ],
+ text: 'JavaScript',
+ value: 'javascript',
},
- ];
-
- const pickerButtons = [
{
- text: 'Cancel',
- role: 'cancel',
+ text: 'TypeScript',
+ value: 'typescript',
},
{
- text: 'Confirm',
- handler: (value) => {
- console.log(`You selected: ${value.languages.value}`);
- },
+ text: 'Rust',
+ value: 'rust',
},
- ];
-
- const setOpen = (state: boolean) => {
- isOpen.value = state;
- };
+ {
+ text: 'C#',
+ value: 'c#',
+ },
+ ],
+ },
+ ];
- return { pickerColumns, pickerButtons, isOpen, setOpen };
+ const pickerButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ console.log(`You selected: ${value.languages.value}`);
+ },
},
- });
+ ];
+
+ const setOpen = (state: boolean) => {
+ isOpen.value = state;
+ };
</script>
```
diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md
index 05a4d215b9e..432caab56a2 100644
--- a/static/usage/v7/picker/inline/trigger/vue.md
+++ b/static/usage/v7/picker/inline/trigger/vue.md
@@ -4,52 +4,44 @@
<ion-picker trigger="open-picker" :columns="pickerColumns" :buttons="pickerButtons"></ion-picker>
</template>
-<script>
+<script lang="ts" setup>
import { IonButton, IonPicker } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonButton, IonPicker },
- setup() {
- const pickerColumns = [
+ const pickerColumns = [
+ {
+ name: 'languages',
+ options: [
{
- name: 'languages',
- options: [
- {
- text: 'JavaScript',
- value: 'javascript',
- },
- {
- text: 'TypeScript',
- value: 'typescript',
- },
- {
- text: 'Rust',
- value: 'rust',
- },
- {
- text: 'C#',
- value: 'c#',
- },
- ],
+ text: 'JavaScript',
+ value: 'javascript',
+ },
+ {
+ text: 'TypeScript',
+ value: 'typescript',
},
- ];
-
- const pickerButtons = [
{
- text: 'Cancel',
- role: 'cancel',
+ text: 'Rust',
+ value: 'rust',
},
{
- text: 'Confirm',
- handler: (value) => {
- console.log(`You selected: ${value.languages.value}`);
- },
+ text: 'C#',
+ value: 'c#',
},
- ];
+ ],
+ },
+ ];
- return { pickerColumns, pickerButtons };
+ const pickerButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ console.log(`You selected: ${value.languages.value}`);
+ },
},
- });
+ ];
</script>
```
diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md
index d396dcf9c9b..8a61edc915c 100644
--- a/static/usage/v7/picker/multiple-column/vue.md
+++ b/static/usage/v7/picker/multiple-column/vue.md
@@ -4,82 +4,74 @@
<ion-picker trigger="open-picker" :columns="pickerColumns" :buttons="pickerButtons"></ion-picker>
</template>
-<script>
+<script lang="ts" setup>
import { IonButton, IonPicker } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonButton, IonPicker },
- setup() {
- const pickerColumns = [
+ const pickerColumns = [
+ {
+ name: 'meat',
+ options: [
{
- name: 'meat',
- options: [
- {
- text: 'Pepperoni',
- value: 'pepperoni',
- },
- {
- text: 'Smoked Ham',
- value: 'smoked-ham',
- },
- {
- text: 'Crispy Bacon',
- value: 'bacon',
- },
- ],
+ text: 'Pepperoni',
+ value: 'pepperoni',
},
{
- name: 'veggies',
- options: [
- {
- text: 'Red onion',
- value: 'red-onion',
- },
- {
- text: 'Peppers',
- value: 'peppers',
- },
- {
- text: 'Black olives',
- value: 'black-olives',
- },
- ],
+ text: 'Smoked Ham',
+ value: 'smoked-ham',
},
{
- name: 'crust',
- options: [
- {
- text: 'Pan style',
- value: 'pan',
- },
- {
- text: 'Hand tossed',
- value: 'hand-tossed',
- },
- {
- text: 'Stuffed crust',
- value: 'stuffed-crust',
- },
- ],
+ text: 'Crispy Bacon',
+ value: 'bacon',
+ },
+ ],
+ },
+ {
+ name: 'veggies',
+ options: [
+ {
+ text: 'Red onion',
+ value: 'red-onion',
},
- ];
-
- const pickerButtons = [
{
- text: 'Cancel',
- role: 'cancel',
+ text: 'Peppers',
+ value: 'peppers',
},
{
- text: 'Confirm',
- handler: (value) => {
- console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
- },
+ text: 'Black olives',
+ value: 'black-olives',
+ },
+ ],
+ },
+ {
+ name: 'crust',
+ options: [
+ {
+ text: 'Pan style',
+ value: 'pan',
},
- ];
+ {
+ text: 'Hand tossed',
+ value: 'hand-tossed',
+ },
+ {
+ text: 'Stuffed crust',
+ value: 'stuffed-crust',
+ },
+ ],
+ },
+ ];
- return { pickerColumns, pickerButtons };
+ const pickerButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+ },
},
- });
+ ];
</script>
```
diff --git a/static/usage/v7/popover/customization/positioning/vue.md b/static/usage/v7/popover/customization/positioning/vue.md
index b658de342a4..4172d81a4f1 100644
--- a/static/usage/v7/popover/customization/positioning/vue.md
+++ b/static/usage/v7/popover/customization/positioning/vue.md
@@ -23,13 +23,8 @@
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonContent, IonPopover },
- });
</script>
<style>
diff --git a/static/usage/v7/popover/customization/sizing/vue.md b/static/usage/v7/popover/customization/sizing/vue.md
index 72d20c9fa77..ed79f40e225 100644
--- a/static/usage/v7/popover/customization/sizing/vue.md
+++ b/static/usage/v7/popover/customization/sizing/vue.md
@@ -11,12 +11,7 @@
</ion-popover>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonPopover },
- });
</script>
```
diff --git a/static/usage/v7/popover/customization/styling/vue.md b/static/usage/v7/popover/customization/styling/vue.md
index 964eeb09bfc..31650e9cca3 100644
--- a/static/usage/v7/popover/customization/styling/vue.md
+++ b/static/usage/v7/popover/customization/styling/vue.md
@@ -6,13 +6,8 @@
</ion-popover>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonPopover },
- });
</script>
<style>
diff --git a/static/usage/v7/popover/nested/vue.md b/static/usage/v7/popover/nested/vue.md
index 04a7b6d7e36..8e505d426b9 100644
--- a/static/usage/v7/popover/nested/vue.md
+++ b/static/usage/v7/popover/nested/vue.md
@@ -20,12 +20,7 @@
</ion-popover>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonItem, IonList, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonItem, IonList, IonPopover },
- });
</script>
```
diff --git a/static/usage/v7/popover/performance/mount/vue.md b/static/usage/v7/popover/performance/mount/vue.md
index bc54f345bfe..658a3e0f0b3 100644
--- a/static/usage/v7/popover/performance/mount/vue.md
+++ b/static/usage/v7/popover/performance/mount/vue.md
@@ -8,12 +8,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonContent, IonPopover },
- });
</script>
```
diff --git a/static/usage/v7/popover/presenting/controller/vue/example_vue.md b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
index c477a870895..29e8d6eac14 100644
--- a/static/usage/v7/popover/presenting/controller/vue/example_vue.md
+++ b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
@@ -3,24 +3,19 @@
<ion-button @click="openPopover">Click Me</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, popoverController } from '@ionic/vue';
import Popover from './Popover.vue';
- export default {
- components: { IonButton },
- methods: {
- async openPopover(ev: Event) {
- const popover = await popoverController.create({
- component: Popover,
- event: ev,
- });
- await popover.present();
+ async function openPopover(ev: Event) {
+ const popover = await popoverController.create({
+ component: Popover,
+ event: ev,
+ });
+ await popover.present();
- const { role } = await popover.onDidDismiss();
- console.log(`Popover dismissed with role: ${role}`);
- },
- },
- };
+ const { role } = await popover.onDidDismiss();
+ console.log(`Popover dismissed with role: ${role}`);
+ }
</script>
```
diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
index 85f8bd06cad..f7c82b2059e 100644
--- a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
+++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
@@ -3,13 +3,7 @@
<ion-content class="ion-padding">Hello World!</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- name: 'Popover',
- components: { IonContent },
- });
</script>
```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/vue.md b/static/usage/v7/popover/presenting/inline-isopen/vue.md
index fbbaf065a17..ea1b27e17ce 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/vue.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/vue.md
@@ -6,24 +6,16 @@
</ion-popover>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButton, IonContent, IonPopover },
- data() {
- return {
- popoverOpen: false,
- event: null,
- };
- },
- methods: {
- openPopover(e: Event) {
- this.event = e;
- this.popoverOpen = true;
- },
- },
- });
+ const popoverOpen = ref(false);
+ const event = ref(null);
+
+ function openPopover(e: Event) {
+ this.event = e;
+ this.popoverOpen = true;
+ }
</script>
```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/vue.md b/static/usage/v7/popover/presenting/inline-trigger/vue.md
index 07f1f68a62f..1ec10133f02 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/vue.md
+++ b/static/usage/v7/popover/presenting/inline-trigger/vue.md
@@ -16,12 +16,7 @@
</ion-popover>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonPopover } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonContent, IonPopover },
- });
</script>
```
diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md
index c70c23eb470..1c34ed0b0ab 100644
--- a/static/usage/v7/progress-bar/buffer/vue.md
+++ b/static/usage/v7/progress-bar/buffer/vue.md
@@ -3,36 +3,27 @@
<ion-progress-bar :buffer="buffer" :value="progress"></ion-progress-bar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonProgressBar } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { onMounted, ref } from 'vue';
- export default defineComponent({
- components: { IonProgressBar },
- setup() {
- let buffer = ref(0.06);
- let progress = ref(0);
+ const buffer = ref(0.06);
+ const progress = ref(0);
- return {
- buffer,
- progress,
- };
- },
- mounted() {
- setInterval(() => {
- this.buffer += 0.06;
- this.progress += 0.06;
+ onMounted(() => {
+ setInterval(() => {
+ buffer.value += 0.06;
+ progress.value += 0.06;
- // Reset the progress bar when it reaches 100%
- // to continuously show the demo
- if (this.progress > 1) {
- setTimeout(() => {
- this.buffer = 0.06;
- this.progress = 0;
- }, 1000);
- }
- }, 1000);
- },
+ // Reset the progress bar when it reaches 100%
+ // to continuously show the demo
+ if (progress.value > 1) {
+ setTimeout(() => {
+ buffer.value = 0.06;
+ progress.value = 0;
+ }, 1000);
+ }
+ }, 1000);
});
</script>
```
diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md
index 5eb4cd2b847..6e67a718822 100644
--- a/static/usage/v7/progress-bar/determinate/vue.md
+++ b/static/usage/v7/progress-bar/determinate/vue.md
@@ -3,32 +3,23 @@
<ion-progress-bar :value="progress"></ion-progress-bar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonProgressBar } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { onMounted, ref } from 'vue';
- export default defineComponent({
- components: { IonProgressBar },
- setup() {
- let progress = ref(0);
+ const progress = ref(0);
+ onMounted(() => {
+ setInterval(() => {
+ progress.value += 0.01;
- return {
- progress,
- };
- },
- mounted() {
- setInterval(() => {
- this.progress += 0.01;
-
- // Reset the progress bar when it reaches 100%
- // to continuously show the demo
- if (this.progress > 1) {
- setTimeout(() => {
- this.progress = 0;
- }, 1000);
- }
- }, 50);
- },
+ // Reset the progress bar when it reaches 100%
+ // to continuously show the demo
+ if (progress.value > 1) {
+ setTimeout(() => {
+ progress.value = 0;
+ }, 1000);
+ }
+ }, 50);
});
</script>
```
diff --git a/static/usage/v7/progress-bar/indeterminate/vue.md b/static/usage/v7/progress-bar/indeterminate/vue.md
index b15c060bdcc..f1274d81038 100644
--- a/static/usage/v7/progress-bar/indeterminate/vue.md
+++ b/static/usage/v7/progress-bar/indeterminate/vue.md
@@ -3,12 +3,7 @@
<ion-progress-bar type="indeterminate"></ion-progress-bar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonProgressBar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonProgressBar },
- });
</script>
```
diff --git a/static/usage/v7/progress-bar/theming/colors/vue.md b/static/usage/v7/progress-bar/theming/colors/vue.md
index 6f42832e199..1d495faa6f9 100644
--- a/static/usage/v7/progress-bar/theming/colors/vue.md
+++ b/static/usage/v7/progress-bar/theming/colors/vue.md
@@ -11,12 +11,7 @@
<ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonProgressBar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonProgressBar },
- });
</script>
```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md
index f63aec9e644..4c732932fb3 100644
--- a/static/usage/v7/progress-bar/theming/css-properties/vue.md
+++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md
@@ -4,13 +4,8 @@
<ion-progress-bar type="indeterminate"></ion-progress-bar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonProgressBar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonProgressBar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
index 5750323198e..d75168fa7cf 100644
--- a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
@@ -4,13 +4,8 @@
<ion-progress-bar type="indeterminate"></ion-progress-bar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonProgressBar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonProgressBar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/radio/alignment/vue.md b/static/usage/v7/radio/alignment/vue.md
index 0f208b37a2a..49eccae2aea 100644
--- a/static/usage/v7/radio/alignment/vue.md
+++ b/static/usage/v7/radio/alignment/vue.md
@@ -15,12 +15,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonRadio, IonRadioGroup },
- });
</script>
```
diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md
index 2d552901212..c8bc0ad5f0a 100644
--- a/static/usage/v7/radio/basic/vue.md
+++ b/static/usage/v7/radio/basic/vue.md
@@ -8,12 +8,7 @@
</ion-radio-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRadio, IonRadioGroup },
- });
</script>
```
diff --git a/static/usage/v7/radio/empty-selection/vue.md b/static/usage/v7/radio/empty-selection/vue.md
index b80bac834b6..d73862509c8 100644
--- a/static/usage/v7/radio/empty-selection/vue.md
+++ b/static/usage/v7/radio/empty-selection/vue.md
@@ -8,12 +8,7 @@
</ion-radio-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRadio, IonRadioGroup },
- });
</script>
```
diff --git a/static/usage/v7/radio/justify/vue.md b/static/usage/v7/radio/justify/vue.md
index 89f9f63b72a..2279eb303ed 100644
--- a/static/usage/v7/radio/justify/vue.md
+++ b/static/usage/v7/radio/justify/vue.md
@@ -21,12 +21,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonRadio, IonRadioGroup },
- });
</script>
```
diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md
index d397b8ce31b..7dcc325364c 100644
--- a/static/usage/v7/radio/label-placement/vue.md
+++ b/static/usage/v7/radio/label-placement/vue.md
@@ -23,12 +23,7 @@
</ion-radio-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRadio, IonRadioGroup },
- });
</script>
```
diff --git a/static/usage/v7/radio/theming/colors/vue.md b/static/usage/v7/radio/theming/colors/vue.md
index 74b8aa3a73e..e95736679bf 100644
--- a/static/usage/v7/radio/theming/colors/vue.md
+++ b/static/usage/v7/radio/theming/colors/vue.md
@@ -29,12 +29,7 @@
</ion-radio-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRadio, IonRadioGroup },
- });
</script>
```
diff --git a/static/usage/v7/radio/theming/css-properties/vue.md b/static/usage/v7/radio/theming/css-properties/vue.md
index ddbbd48152a..713e69e4ccd 100644
--- a/static/usage/v7/radio/theming/css-properties/vue.md
+++ b/static/usage/v7/radio/theming/css-properties/vue.md
@@ -6,13 +6,8 @@
</ion-radio-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRadio, IonRadioGroup },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/vue.md b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
index 24326a92a94..208b3b62de8 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
@@ -6,13 +6,8 @@
</ion-radio-group>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRadio, IonRadioGroup },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/radio/using-comparewith/vue.md b/static/usage/v7/radio/using-comparewith/vue.md
index 28518284654..9d69f446ead 100644
--- a/static/usage/v7/radio/using-comparewith/vue.md
+++ b/static/usage/v7/radio/using-comparewith/vue.md
@@ -9,46 +9,33 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: {
- IonItem,
- IonList,
- IonRadio,
- IonRadioGroup,
+ const foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
},
- data() {
- return {
- foods: [
- {
- id: 1,
- name: 'Apples',
- type: 'fruit',
- },
- {
- id: 2,
- name: 'Carrots',
- type: 'vegetable',
- },
- {
- id: 3,
- name: 'Cupcakes',
- type: 'dessert',
- },
- ],
- };
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
},
- methods: {
- compareWith(o1, o2) {
- return o1.id === o2.id;
- },
- handleChange(ev) {
- console.log('Current value:', JSON.stringify(ev.detail.value));
- },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
},
- });
+ ];
+
+ function compareWith(o1, o2) {
+ return o1.id === o2.id;
+ }
+
+ function handleChange(ev) {
+ console.log('Current value:', JSON.stringify(ev.detail.value));
+ }
</script>
```
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
index 421bea060e4..6d47c620db1 100644
--- a/static/usage/v7/range/basic/vue.md
+++ b/static/usage/v7/range/basic/vue.md
@@ -3,12 +3,7 @@
<ion-range aria-label="Volume"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange },
- });
</script>
```
diff --git a/static/usage/v7/range/dual-knobs/vue.md b/static/usage/v7/range/dual-knobs/vue.md
index 5e23079bfa7..41502079934 100644
--- a/static/usage/v7/range/dual-knobs/vue.md
+++ b/static/usage/v7/range/dual-knobs/vue.md
@@ -3,12 +3,7 @@
<ion-range aria-label="Dual Knobs Range" :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonRange },
- });
</script>
```
diff --git a/static/usage/v7/range/ion-change-event/vue.md b/static/usage/v7/range/ion-change-event/vue.md
index 44a3fdcfa1f..3796c636fe8 100644
--- a/static/usage/v7/range/ion-change-event/vue.md
+++ b/static/usage/v7/range/ion-change-event/vue.md
@@ -3,17 +3,11 @@
<ion-range aria-label="Range with ionChange" @ionChange="onIonChange"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonRange },
- methods: {
- onIonChange({ detail }) {
- console.log('ionChange emitted value: ' + detail.value);
- },
- },
- });
+ function onIonChange({ detail }) {
+ console.log('ionChange emitted value: ' + detail.value);
+ }
</script>
```
diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md
index 84531f16f2c..7068861be7b 100644
--- a/static/usage/v7/range/ion-knob-move-event/vue.md
+++ b/static/usage/v7/range/ion-knob-move-event/vue.md
@@ -7,20 +7,15 @@
></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonRange },
- methods: {
- onIonKnobMoveStart({ detail }) {
- console.log('ionKnobMoveStart:', detail.value);
- },
- onIonKnobMoveEnd({ detail }) {
- console.log('ionKnobMoveEnd:', detail.value);
- },
- },
- });
+ function onIonKnobMoveStart({ detail }) {
+ console.log('ionKnobMoveStart:', detail.value);
+ }
+
+ function onIonKnobMoveEnd({ detail }) {
+ console.log('ionKnobMoveEnd:', detail.value);
+ }
</script>
```
diff --git a/static/usage/v7/range/label-slot/vue.md b/static/usage/v7/range/label-slot/vue.md
index b67e731d684..3f8fd42e305 100644
--- a/static/usage/v7/range/label-slot/vue.md
+++ b/static/usage/v7/range/label-slot/vue.md
@@ -5,12 +5,7 @@
</ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange, IonText } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange, IonText },
- });
</script>
```
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
index 1d80cceb292..52a964af799 100644
--- a/static/usage/v7/range/labels/vue.md
+++ b/static/usage/v7/range/labels/vue.md
@@ -15,12 +15,7 @@
<ion-range label-placement="stacked" label="Stacked Label"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange },
- });
</script>
```
diff --git a/static/usage/v7/range/no-visible-label/vue.md b/static/usage/v7/range/no-visible-label/vue.md
index 421bea060e4..6d47c620db1 100644
--- a/static/usage/v7/range/no-visible-label/vue.md
+++ b/static/usage/v7/range/no-visible-label/vue.md
@@ -3,12 +3,7 @@
<ion-range aria-label="Volume"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange },
- });
</script>
```
diff --git a/static/usage/v7/range/pins/vue.md b/static/usage/v7/range/pins/vue.md
index 1fabf896c76..19bff14597a 100644
--- a/static/usage/v7/range/pins/vue.md
+++ b/static/usage/v7/range/pins/vue.md
@@ -3,17 +3,9 @@
<ion-range aria-label="Range with pin" :pin="true" :pin-formatter="pinFormatter"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonRange },
- setup() {
- return {
- pinFormatter: (value: number) => `${value}%`,
- };
- },
- });
+ const pinFormatter = (value: number) => `${value}%`;
</script>
```
diff --git a/static/usage/v7/range/slots/vue.md b/static/usage/v7/range/slots/vue.md
index 57d8edeb2ca..09a46bdec7f 100644
--- a/static/usage/v7/range/slots/vue.md
+++ b/static/usage/v7/range/slots/vue.md
@@ -6,19 +6,8 @@
</ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange, IonIcon } from '@ionic/vue';
import { snowOutline, sunnyOutline } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange, IonIcon },
- setup() {
- return {
- snowOutline,
- sunnyOutline,
- };
- },
- });
</script>
```
diff --git a/static/usage/v7/range/snapping-ticks/vue.md b/static/usage/v7/range/snapping-ticks/vue.md
index 69417e31d81..a7541119951 100644
--- a/static/usage/v7/range/snapping-ticks/vue.md
+++ b/static/usage/v7/range/snapping-ticks/vue.md
@@ -3,12 +3,7 @@
<ion-range aria-label="Range with ticks" :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange },
- });
</script>
```
diff --git a/static/usage/v7/range/theming/css-properties/vue.md b/static/usage/v7/range/theming/css-properties/vue.md
index c6f7b058b7a..20ec33f89ce 100644
--- a/static/usage/v7/range/theming/css-properties/vue.md
+++ b/static/usage/v7/range/theming/css-properties/vue.md
@@ -16,12 +16,7 @@
<ion-range aria-label="Custom range" :value="50" :pin="true"></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange },
- });
</script>
```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/vue.md b/static/usage/v7/range/theming/css-shadow-parts/vue.md
index 91b55c3c3c5..e761f6ae216 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/range/theming/css-shadow-parts/vue.md
@@ -55,12 +55,7 @@
></ion-range>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRange } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRange },
- });
</script>
```
diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
index c5ec3047d44..184b4c04db8 100644
--- a/static/usage/v7/refresher/advanced/vue.md
+++ b/static/usage/v7/refresher/advanced/vue.md
@@ -23,7 +23,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonContent,
IonHeader,
@@ -36,62 +36,44 @@
IonTitle,
IonToolbar,
} from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
import { ellipse } from 'ionicons/icons';
- export default defineComponent({
- components: {
- IonContent,
- IonHeader,
- IonIcon,
- IonItem,
- IonLabel,
- IonList,
- IonRefresher,
- IonRefresherContent,
- IonTitle,
- IonToolbar,
- },
- setup() {
- const names = [
- 'Burt Bear',
- 'Charlie Cheetah',
- 'Donald Duck',
- 'Eva Eagle',
- 'Ellie Elephant',
- 'Gino Giraffe',
- 'Isabella Iguana',
- 'Karl Kitten',
- 'Lionel Lion',
- 'Molly Mouse',
- 'Paul Puppy',
- 'Rachel Rabbit',
- 'Ted Turtle',
- ];
- let items = ref([]);
+ const names = [
+ 'Burt Bear',
+ 'Charlie Cheetah',
+ 'Donald Duck',
+ 'Eva Eagle',
+ 'Ellie Elephant',
+ 'Gino Giraffe',
+ 'Isabella Iguana',
+ 'Karl Kitten',
+ 'Lionel Lion',
+ 'Molly Mouse',
+ 'Paul Puppy',
+ 'Rachel Rabbit',
+ 'Ted Turtle',
+ ];
+ let items = ref([]);
- const chooseRandomName = () => {
- return names[Math.floor(Math.random() * names.length)];
- };
+ const chooseRandomName = () => {
+ return names[Math.floor(Math.random() * names.length)];
+ };
- const addItems = (count, unread = false) => {
- for (let i = 0; i < count; i++) {
- items.value.unshift({ name: chooseRandomName(), unread });
- }
- };
+ const addItems = (count, unread = false) => {
+ for (let i = 0; i < count; i++) {
+ items.value.unshift({ name: chooseRandomName(), unread });
+ }
+ };
- addItems(5);
+ addItems(5);
- const handleRefresh = (event: CustomEvent) => {
- setTimeout(() => {
- addItems(3, true);
- event.target.complete();
- }, 2000);
- };
-
- return { ellipse, handleRefresh, items, names };
- },
- });
+ const handleRefresh = (event: CustomEvent) => {
+ setTimeout(() => {
+ addItems(3, true);
+ event.target.complete();
+ }, 2000);
+ };
</script>
<style scoped>
diff --git a/static/usage/v7/refresher/basic/vue.md b/static/usage/v7/refresher/basic/vue.md
index 870081dcfbf..dd20ef762f3 100644
--- a/static/usage/v7/refresher/basic/vue.md
+++ b/static/usage/v7/refresher/basic/vue.md
@@ -15,22 +15,14 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
- setup() {
- const handleRefresh = (event: CustomEvent) => {
- setTimeout(() => {
- // Any calls to load data go here
- event.target.complete();
- }, 2000);
- };
-
- return { handleRefresh };
- },
- });
+ const handleRefresh = (event: CustomEvent) => {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
</script>
```
diff --git a/static/usage/v7/refresher/custom-content/vue.md b/static/usage/v7/refresher/custom-content/vue.md
index af350137449..af5381eeec9 100644
--- a/static/usage/v7/refresher/custom-content/vue.md
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -21,23 +21,15 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { chevronDownCircleOutline } from 'ionicons/icons';
- export default defineComponent({
- components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
- setup() {
- const handleRefresh = (event: CustomEvent) => {
- setTimeout(() => {
- // Any calls to load data go here
- event.target.complete();
- }, 2000);
- };
-
- return { chevronDownCircleOutline, handleRefresh };
- },
- });
+ const handleRefresh = (event: CustomEvent) => {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
</script>
```
diff --git a/static/usage/v7/refresher/custom-scroll-target/vue.md b/static/usage/v7/refresher/custom-scroll-target/vue.md
index b63d979c827..3527d387bd4 100644
--- a/static/usage/v7/refresher/custom-scroll-target/vue.md
+++ b/static/usage/v7/refresher/custom-scroll-target/vue.md
@@ -17,23 +17,15 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
- setup() {
- const handleRefresh = (event: CustomEvent) => {
- setTimeout(() => {
- // Any calls to load data go here
- event.target.complete();
- }, 2000);
- };
-
- return { handleRefresh };
- },
- });
+ const handleRefresh = (event: CustomEvent) => {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
</script>
<style scoped>
diff --git a/static/usage/v7/refresher/pull-properties/vue.md b/static/usage/v7/refresher/pull-properties/vue.md
index 0d3e1b45e9f..ed2be98d349 100644
--- a/static/usage/v7/refresher/pull-properties/vue.md
+++ b/static/usage/v7/refresher/pull-properties/vue.md
@@ -15,22 +15,14 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
- setup() {
- const handleRefresh = (event: CustomEvent) => {
- setTimeout(() => {
- // Any calls to load data go here
- event.target.complete();
- }, 2000);
- };
-
- return { handleRefresh };
- },
- });
+ const handleRefresh = (event: CustomEvent) => {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
</script>
```
diff --git a/static/usage/v7/reorder/basic/vue.md b/static/usage/v7/reorder/basic/vue.md
index 0ac2374089f..45ef35b13ee 100644
--- a/static/usage/v7/reorder/basic/vue.md
+++ b/static/usage/v7/reorder/basic/vue.md
@@ -31,26 +31,18 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
- setup() {
- const handleReorder = (event: CustomEvent) => {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+ const handleReorder = (event: CustomEvent) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- event.detail.complete();
- };
-
- return { handleReorder };
- },
- });
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ };
</script>
```
diff --git a/static/usage/v7/reorder/custom-icon/vue.md b/static/usage/v7/reorder/custom-icon/vue.md
index 87d77e33048..761022ac673 100644
--- a/static/usage/v7/reorder/custom-icon/vue.md
+++ b/static/usage/v7/reorder/custom-icon/vue.md
@@ -41,26 +41,19 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { pizza } from 'ionicons/icons';
- export default defineComponent({
- components: { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
- setup() {
- const handleReorder = (event: CustomEvent) => {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+ const handleReorder = (event: CustomEvent) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- event.detail.complete();
- };
- return { handleReorder, pizza };
- },
- });
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ };
</script>
```
diff --git a/static/usage/v7/reorder/custom-scroll-target/vue.md b/static/usage/v7/reorder/custom-scroll-target/vue.md
index 43151b12039..d6aa219b264 100644
--- a/static/usage/v7/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v7/reorder/custom-scroll-target/vue.md
@@ -35,27 +35,19 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
- setup() {
- const handleReorder = (event: CustomEvent) => {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+ const handleReorder = (event: CustomEvent) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- event.detail.complete();
- };
-
- return { handleReorder };
- },
- });
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ };
</script>
<style scoped>
diff --git a/static/usage/v7/reorder/toggling-disabled/vue.md b/static/usage/v7/reorder/toggling-disabled/vue.md
index c649c0ebe36..7c68c5439ac 100644
--- a/static/usage/v7/reorder/toggling-disabled/vue.md
+++ b/static/usage/v7/reorder/toggling-disabled/vue.md
@@ -33,32 +33,25 @@
<ion-button @click="toggleReorder()"> Toggle Reorder </ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
- setup() {
- let isDisabled = ref(true);
+ const isDisabled = ref(true);
- const handleReorder = (event: CustomEvent) => {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+ const handleReorder = (event: CustomEvent) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- event.detail.complete();
- };
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ };
- const toggleReorder = () => {
- isDisabled.value = !isDisabled.value;
- };
-
- return { isDisabled, handleReorder, toggleReorder };
- },
- });
+ const toggleReorder = () => {
+ isDisabled.value = !isDisabled.value;
+ };
</script>
```
diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md
index 024caf38347..33b1cea9897 100644
--- a/static/usage/v7/reorder/updating-data/vue.md
+++ b/static/usage/v7/reorder/updating-data/vue.md
@@ -11,30 +11,24 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
- setup() {
- const items = ref([1, 2, 3, 4, 5]);
+ const items = ref([1, 2, 3, 4, 5]);
- const handleReorder = (event: CustomEvent) => {
- // Before complete is called with the items they will remain in the
- // order before the drag
- console.log('Before complete', items.value);
+ const handleReorder = (event: CustomEvent) => {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', items.value);
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. Update the items variable to the
- // new order of items
- items.value = event.detail.complete(items.value);
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ items.value = event.detail.complete(items.value);
- // After complete is called the items will be in the new order
- console.log('After complete', items.value);
- };
- return { handleReorder, items };
- },
- });
+ // After complete is called the items will be in the new order
+ console.log('After complete', items.value);
+ };
</script>
```
diff --git a/static/usage/v7/reorder/wrapper/vue.md b/static/usage/v7/reorder/wrapper/vue.md
index fd157186093..a3a332ad0af 100644
--- a/static/usage/v7/reorder/wrapper/vue.md
+++ b/static/usage/v7/reorder/wrapper/vue.md
@@ -36,26 +36,18 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
- setup() {
- const handleReorder = (event: CustomEvent) => {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+ const handleReorder = (event: CustomEvent) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- event.detail.complete();
- };
-
- return { handleReorder };
- },
- });
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ };
</script>
```
diff --git a/static/usage/v7/ripple-effect/basic/vue.md b/static/usage/v7/ripple-effect/basic/vue.md
index e5270056c0c..a08a3a3445b 100644
--- a/static/usage/v7/ripple-effect/basic/vue.md
+++ b/static/usage/v7/ripple-effect/basic/vue.md
@@ -17,13 +17,8 @@
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRippleEffect } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRippleEffect },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/ripple-effect/customizing/vue.md b/static/usage/v7/ripple-effect/customizing/vue.md
index d3ea639b68a..54b7b76a573 100644
--- a/static/usage/v7/ripple-effect/customizing/vue.md
+++ b/static/usage/v7/ripple-effect/customizing/vue.md
@@ -15,13 +15,8 @@
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRippleEffect } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRippleEffect },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/ripple-effect/type/vue.md b/static/usage/v7/ripple-effect/type/vue.md
index e233fe60d9e..32d69af86e2 100644
--- a/static/usage/v7/ripple-effect/type/vue.md
+++ b/static/usage/v7/ripple-effect/type/vue.md
@@ -15,13 +15,8 @@
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonRippleEffect } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonRippleEffect },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/searchbar/basic/vue.md b/static/usage/v7/searchbar/basic/vue.md
index f50a9cb5a5f..ecf7ef4f252 100644
--- a/static/usage/v7/searchbar/basic/vue.md
+++ b/static/usage/v7/searchbar/basic/vue.md
@@ -7,12 +7,7 @@
<ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSearchbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSearchbar },
- });
</script>
```
diff --git a/static/usage/v7/searchbar/cancel-button/vue.md b/static/usage/v7/searchbar/cancel-button/vue.md
index d3f85859011..437d028e611 100644
--- a/static/usage/v7/searchbar/cancel-button/vue.md
+++ b/static/usage/v7/searchbar/cancel-button/vue.md
@@ -11,16 +11,8 @@
></ion-searchbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSearchbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { trash } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonSearchbar },
- setup() {
- return { trash };
- },
- });
</script>
```
diff --git a/static/usage/v7/searchbar/clear-button/vue.md b/static/usage/v7/searchbar/clear-button/vue.md
index 3b5a9e53c7f..d058912f1e7 100644
--- a/static/usage/v7/searchbar/clear-button/vue.md
+++ b/static/usage/v7/searchbar/clear-button/vue.md
@@ -6,16 +6,8 @@
<ion-searchbar show-clear-button="always" :clear-icon="trashBin" value="Custom Clear Icon"></ion-searchbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSearchbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { trashBin } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonSearchbar },
- setup() {
- return { trashBin };
- },
- });
</script>
```
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
index 836f226ceb7..68f6ba957ce 100644
--- a/static/usage/v7/searchbar/debounce/vue.md
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -9,35 +9,27 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonSearchbar } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonItem, IonList, IonSearchbar },
- setup() {
- const data = [
- 'Amsterdam',
- 'Buenos Aires',
- 'Cairo',
- 'Geneva',
- 'Hong Kong',
- 'Istanbul',
- 'London',
- 'Madrid',
- 'New York',
- 'Panama City',
- ];
- const results = ref(data);
+ const data = [
+ 'Amsterdam',
+ 'Buenos Aires',
+ 'Cairo',
+ 'Geneva',
+ 'Hong Kong',
+ 'Istanbul',
+ 'London',
+ 'Madrid',
+ 'New York',
+ 'Panama City',
+ ];
+ const results = ref(data);
- return { data, results };
- },
- methods: {
- handleInput(event) {
- const query = event.target.value.toLowerCase();
- this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
- },
- },
- });
+ function handleInput(event) {
+ const query = event.target.value.toLowerCase();
+ this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+ }
</script>
```
diff --git a/static/usage/v7/searchbar/search-icon/vue.md b/static/usage/v7/searchbar/search-icon/vue.md
index 38068deedcc..7abc767bcd6 100644
--- a/static/usage/v7/searchbar/search-icon/vue.md
+++ b/static/usage/v7/searchbar/search-icon/vue.md
@@ -4,16 +4,8 @@
<ion-searchbar :search-icon="searchCircle" placeholder="Custom Search Icon"></ion-searchbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSearchbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
import { searchCircle } from 'ionicons/icons';
-
- export default defineComponent({
- components: { IonSearchbar },
- setup() {
- return { searchCircle };
- },
- });
</script>
```
diff --git a/static/usage/v7/searchbar/theming/colors/vue.md b/static/usage/v7/searchbar/theming/colors/vue.md
index ef95e690107..7bb1395690a 100644
--- a/static/usage/v7/searchbar/theming/colors/vue.md
+++ b/static/usage/v7/searchbar/theming/colors/vue.md
@@ -12,12 +12,7 @@
<ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSearchbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSearchbar },
- });
</script>
```
diff --git a/static/usage/v7/searchbar/theming/css-properties/vue.md b/static/usage/v7/searchbar/theming/css-properties/vue.md
index 6e45e744231..a13fe21f00f 100644
--- a/static/usage/v7/searchbar/theming/css-properties/vue.md
+++ b/static/usage/v7/searchbar/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
<ion-searchbar showCancelButton="focus" class="custom"></ion-searchbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSearchbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSearchbar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/segment-button/basic/vue.md b/static/usage/v7/segment-button/basic/vue.md
index 79fd032d7ca..134d8852e41 100644
--- a/static/usage/v7/segment-button/basic/vue.md
+++ b/static/usage/v7/segment-button/basic/vue.md
@@ -25,12 +25,7 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonSegment, IonSegmentButton },
- });
</script>
```
diff --git a/static/usage/v7/segment-button/layout/vue.md b/static/usage/v7/segment-button/layout/vue.md
index 71a039bd211..c0301538ef5 100644
--- a/static/usage/v7/segment-button/layout/vue.md
+++ b/static/usage/v7/segment-button/layout/vue.md
@@ -73,16 +73,8 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
import { call, heart, pin } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonIcon, IonLabel, IonSegment, IonSegmentButton },
- setup() {
- return { call, heart, pin };
- },
- });
</script>
```
diff --git a/static/usage/v7/segment-button/theming/css-properties/vue.md b/static/usage/v7/segment-button/theming/css-properties/vue.md
index 50c99688335..2eae2fc35f9 100644
--- a/static/usage/v7/segment-button/theming/css-properties/vue.md
+++ b/static/usage/v7/segment-button/theming/css-properties/vue.md
@@ -13,13 +13,8 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonSegment, IonSegmentButton },
- });
</script>
<style>
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
index 911d8b7854e..8495ae71b4a 100644
--- a/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
@@ -13,13 +13,8 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonSegment, IonSegmentButton },
- });
</script>
<style>
diff --git a/static/usage/v7/segment/basic/vue.md b/static/usage/v7/segment/basic/vue.md
index 7252ce56f2f..d02ed07f227 100644
--- a/static/usage/v7/segment/basic/vue.md
+++ b/static/usage/v7/segment/basic/vue.md
@@ -19,12 +19,7 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonSegment, IonSegmentButton },
- });
</script>
```
diff --git a/static/usage/v7/segment/scrollable/vue.md b/static/usage/v7/segment/scrollable/vue.md
index 160fab75489..7f5e08e03ff 100644
--- a/static/usage/v7/segment/scrollable/vue.md
+++ b/static/usage/v7/segment/scrollable/vue.md
@@ -34,27 +34,8 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/vue';
import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonIcon, IonSegment, IonSegmentButton },
- setup() {
- return {
- home,
- heart,
- pin,
- star,
- call,
- globe,
- basket,
- barbell,
- trash,
- person,
- };
- },
- });
</script>
```
diff --git a/static/usage/v7/segment/theming/colors/vue.md b/static/usage/v7/segment/theming/colors/vue.md
index fcce8cce913..fd899562b67 100644
--- a/static/usage/v7/segment/theming/colors/vue.md
+++ b/static/usage/v7/segment/theming/colors/vue.md
@@ -82,12 +82,7 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonSegment, IonSegmentButton },
- });
</script>
```
diff --git a/static/usage/v7/segment/theming/css-properties/vue.md b/static/usage/v7/segment/theming/css-properties/vue.md
index 00bf2e42c8f..42ea2dd79e7 100644
--- a/static/usage/v7/segment/theming/css-properties/vue.md
+++ b/static/usage/v7/segment/theming/css-properties/vue.md
@@ -10,13 +10,8 @@
</ion-segment>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonLabel, IonSegment, IonSegmentButton },
- });
</script>
<style>
diff --git a/static/usage/v7/select/basic/multiple-selection/vue.md b/static/usage/v7/select/basic/multiple-selection/vue.md
index 3287578bddc..32d9f08ca10 100644
--- a/static/usage/v7/select/basic/multiple-selection/vue.md
+++ b/static/usage/v7/select/basic/multiple-selection/vue.md
@@ -11,12 +11,7 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md
index a12b3238c60..cb79191698e 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md
@@ -17,23 +17,17 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- methods: {
- handleChange(ev) {
- console.log('ionChange fired with value: ' + ev.detail.value);
- },
- handleCancel() {
- console.log('ionCancel fired');
- },
- handleDismiss() {
- console.log('ionDismiss fired');
- },
- },
- });
+ function handleChange(ev) {
+ console.log('ionChange fired with value: ' + ev.detail.value);
+ }
+ function handleCancel() {
+ console.log('ionCancel fired');
+ }
+ function handleDismiss() {
+ console.log('ionDismiss fired');
+ }
</script>
```
diff --git a/static/usage/v7/select/basic/single-selection/vue.md b/static/usage/v7/select/basic/single-selection/vue.md
index 637b8446a7b..c9bd0b5de88 100644
--- a/static/usage/v7/select/basic/single-selection/vue.md
+++ b/static/usage/v7/select/basic/single-selection/vue.md
@@ -11,12 +11,7 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/customization/button-text/vue.md b/static/usage/v7/select/customization/button-text/vue.md
index f5c69c2d69b..a8c48092b8e 100644
--- a/static/usage/v7/select/customization/button-text/vue.md
+++ b/static/usage/v7/select/customization/button-text/vue.md
@@ -23,12 +23,7 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
index 4d748e1c2d9..f9c1dc786a1 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/vue.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -17,16 +17,8 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
import { add, remove } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- setup() {
- return { add, remove };
- },
- });
</script>
```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
index f7d38a6ae7b..0ca8fba57e8 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/vue.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
@@ -30,17 +30,9 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
import { caretDownSharp } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- setup() {
- return { caretDownSharp };
- },
- });
</script>
<style>
diff --git a/static/usage/v7/select/customization/interface-options/vue.md b/static/usage/v7/select/customization/interface-options/vue.md
index 55dcaac0743..0a05479b7bd 100644
--- a/static/usage/v7/select/customization/interface-options/vue.md
+++ b/static/usage/v7/select/customization/interface-options/vue.md
@@ -37,37 +37,25 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonItem, IonLabel, IonList, IonSelect, IonSelectOption },
- setup() {
- const customAlertOptions = {
- header: 'Pizza Toppings',
- subHeader: 'Select your favorite topping',
- message: 'Choose only one',
- translucent: true,
- };
+ const customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your favorite topping',
+ message: 'Choose only one',
+ translucent: true,
+ };
- const customPopoverOptions = {
- header: 'Hair Color',
- subHeader: 'Select your hair color',
- message: 'Only select your dominant hair color',
- };
+ const customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color',
+ };
- const customActionSheetOptions = {
- header: 'Colors',
- subHeader: 'Select your favorite color',
- };
-
- return {
- customAlertOptions,
- customPopoverOptions,
- customActionSheetOptions,
- };
- },
- });
+ const customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color',
+ };
</script>
```
diff --git a/static/usage/v7/select/customization/styling-select/vue.md b/static/usage/v7/select/customization/styling-select/vue.md
index 749540e895f..71be813349a 100644
--- a/static/usage/v7/select/customization/styling-select/vue.md
+++ b/static/usage/v7/select/customization/styling-select/vue.md
@@ -7,13 +7,8 @@
</ion-select>
</template>
-<script>
+<script lang="ts" setup>
import { IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSelect, IonSelectOption },
- });
</script>
<style>
diff --git a/static/usage/v7/select/fill/vue.md b/static/usage/v7/select/fill/vue.md
index e08d5859308..3d8bf597b40 100644
--- a/static/usage/v7/select/fill/vue.md
+++ b/static/usage/v7/select/fill/vue.md
@@ -15,12 +15,7 @@
</ion-select>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/interfaces/action-sheet/vue.md b/static/usage/v7/select/interfaces/action-sheet/vue.md
index df563aefa47..dc29744ffa6 100644
--- a/static/usage/v7/select/interfaces/action-sheet/vue.md
+++ b/static/usage/v7/select/interfaces/action-sheet/vue.md
@@ -11,12 +11,7 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonList, IonItem, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/interfaces/popover/vue.md b/static/usage/v7/select/interfaces/popover/vue.md
index 24b1f4b66d0..62039b223e7 100644
--- a/static/usage/v7/select/interfaces/popover/vue.md
+++ b/static/usage/v7/select/interfaces/popover/vue.md
@@ -11,12 +11,7 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonList, IonItem, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/justify/vue.md b/static/usage/v7/select/justify/vue.md
index f9814d8b797..54c922b3848 100644
--- a/static/usage/v7/select/justify/vue.md
+++ b/static/usage/v7/select/justify/vue.md
@@ -25,12 +25,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/label-placement/vue.md b/static/usage/v7/select/label-placement/vue.md
index 9efccb8e49d..b86aab8ad4f 100644
--- a/static/usage/v7/select/label-placement/vue.md
+++ b/static/usage/v7/select/label-placement/vue.md
@@ -35,12 +35,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- });
</script>
```
diff --git a/static/usage/v7/select/label-slot/vue.md b/static/usage/v7/select/label-slot/vue.md
index 8c8a8dd8be5..80190640dce 100644
--- a/static/usage/v7/select/label-slot/vue.md
+++ b/static/usage/v7/select/label-slot/vue.md
@@ -12,12 +12,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
- });
</script>
```
diff --git a/static/usage/v7/select/no-visible-label/vue.md b/static/usage/v7/select/no-visible-label/vue.md
index 038d7d32130..38d8a88a6d7 100644
--- a/static/usage/v7/select/no-visible-label/vue.md
+++ b/static/usage/v7/select/no-visible-label/vue.md
@@ -11,12 +11,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
- });
</script>
```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
index cf095fd89c0..caa09f82758 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -15,49 +15,39 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonSelect, IonSelectOption },
- data() {
- return {
- foods: [
- {
- id: 1,
- name: 'Apples',
- type: 'fruit',
- },
- {
- id: 2,
- name: 'Carrots',
- type: 'vegetable',
- },
- {
- id: 3,
- name: 'Cupcakes',
- type: 'dessert',
- },
- ],
- };
+ const foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
},
- methods: {
- compareWith(o1, o2) {
- if (!o1 || !o2) {
- return o1 === o2;
- }
+ ];
- if (Array.isArray(o2)) {
- return o2.some((o) => o.id === o1.id);
- }
+ function compareWith(o1, o2) {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
- return o1.id === o2.id;
- },
- handleChange(ev) {
- console.log('Current value:', JSON.stringify(ev.detail.value));
- },
- },
- });
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+ }
+ function handleChange(ev) {
+ console.log('Current value:', JSON.stringify(ev.detail.value));
+ }
</script>
```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
index e93b223f6a1..3c9816bfa48 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -14,41 +14,33 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonSelect, IonSelectOption } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonSelect, IonSelectOption },
- data() {
- return {
- foods: [
- {
- id: 1,
- name: 'Apples',
- type: 'fruit',
- },
- {
- id: 2,
- name: 'Carrots',
- type: 'vegetable',
- },
- {
- id: 3,
- name: 'Cupcakes',
- type: 'dessert',
- },
- ],
- };
+ const foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
},
- methods: {
- compareWith(o1, o2) {
- return o1 && o2 ? o1.id === o2.id : o1 === o2;
- },
- handleChange(ev) {
- console.log('Current value:', JSON.stringify(ev.detail.value));
- },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
},
- });
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ function compareWith(o1, o2) {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+ }
+
+ function handleChange(ev) {
+ console.log('Current value:', JSON.stringify(ev.detail.value));
+ }
</script>
```
diff --git a/static/usage/v7/select/start-end-slots/vue.md b/static/usage/v7/select/start-end-slots/vue.md
index 37882998e57..a18a967f2a8 100644
--- a/static/usage/v7/select/start-end-slots/vue.md
+++ b/static/usage/v7/select/start-end-slots/vue.md
@@ -15,23 +15,8 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
import { eye, leaf } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButton,
- IonIcon,
- IonItem,
- IonList,
- IonSelect,
- IonSelectOption,
- },
- setup() {
- return { eye, leaf };
- },
- });
</script>
```
diff --git a/static/usage/v7/skeleton-text/basic/vue.md b/static/usage/v7/skeleton-text/basic/vue.md
index f391050a009..48cc906ce9c 100644
--- a/static/usage/v7/skeleton-text/basic/vue.md
+++ b/static/usage/v7/skeleton-text/basic/vue.md
@@ -39,7 +39,7 @@
<ion-button @click="setLoaded(!loaded)">Toggle</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import {
IonButton,
IonIcon,
@@ -51,28 +51,9 @@
IonThumbnail,
} from '@ionic/vue';
import { musicalNotes } from 'ionicons/icons';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: {
- IonButton,
- IonIcon,
- IonItem,
- IonLabel,
- IonList,
- IonListHeader,
- IonSkeletonText,
- IonThumbnail,
- },
- setup() {
- const loaded = ref(false);
- const setLoaded = (state: boolean) => (loaded.value = state);
- return {
- loaded,
- musicalNotes,
- setLoaded,
- };
- },
- });
+ const loaded = ref(false);
+ const setLoaded = (state: boolean) => (loaded.value = state);
</script>
```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
index 2785a0e8b51..3f6218f9863 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/vue.md
+++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
@@ -23,20 +23,8 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonItem,
- IonLabel,
- IonList,
- IonListHeader,
- IonSkeletonText,
- IonThumbnail,
- },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/spinner/basic/vue.md b/static/usage/v7/spinner/basic/vue.md
index 089b9fb6da8..805f461eb53 100644
--- a/static/usage/v7/spinner/basic/vue.md
+++ b/static/usage/v7/spinner/basic/vue.md
@@ -51,12 +51,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonSpinner } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonSpinner },
- });
</script>
```
diff --git a/static/usage/v7/spinner/theming/colors/vue.md b/static/usage/v7/spinner/theming/colors/vue.md
index c45f320c7ed..aef5a84d9f0 100644
--- a/static/usage/v7/spinner/theming/colors/vue.md
+++ b/static/usage/v7/spinner/theming/colors/vue.md
@@ -12,12 +12,7 @@
<ion-spinner color="dark"></ion-spinner>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSpinner } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSpinner },
- });
</script>
```
diff --git a/static/usage/v7/spinner/theming/css-properties/vue.md b/static/usage/v7/spinner/theming/css-properties/vue.md
index c818d2c7488..d8066bfa9b2 100644
--- a/static/usage/v7/spinner/theming/css-properties/vue.md
+++ b/static/usage/v7/spinner/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
<ion-spinner></ion-spinner>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSpinner } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSpinner },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/spinner/theming/resizing/vue.md b/static/usage/v7/spinner/theming/resizing/vue.md
index 52ae17f7694..07605877261 100644
--- a/static/usage/v7/spinner/theming/resizing/vue.md
+++ b/static/usage/v7/spinner/theming/resizing/vue.md
@@ -3,13 +3,8 @@
<ion-spinner></ion-spinner>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonSpinner } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonSpinner },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/split-pane/basic/vue.md b/static/usage/v7/split-pane/basic/vue.md
index 81f9dbd9a6b..f5f7e7df183 100644
--- a/static/usage/v7/split-pane/basic/vue.md
+++ b/static/usage/v7/split-pane/basic/vue.md
@@ -21,12 +21,7 @@
</ion-split-pane>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md
index f0abcf95800..66ed54802c3 100644
--- a/static/usage/v7/split-pane/theming/css-properties/vue.md
+++ b/static/usage/v7/split-pane/theming/css-properties/vue.md
@@ -21,13 +21,8 @@
</ion-split-pane>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/tabs/router/vue/app_vue.md b/static/usage/v7/tabs/router/vue/app_vue.md
index b5f330406db..2180e7e709b 100644
--- a/static/usage/v7/tabs/router/vue/app_vue.md
+++ b/static/usage/v7/tabs/router/vue/app_vue.md
@@ -5,16 +5,9 @@
</ion-app>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
-
- import Example from './components/Example.vue';
-
- export default defineComponent({
- name: 'App',
- components: { IonApp, IonRouterOutlet },
- });
</script>
```
diff --git a/static/usage/v7/tabs/router/vue/example_vue.md b/static/usage/v7/tabs/router/vue/example_vue.md
index 846b8b4d621..7dc147305fa 100644
--- a/static/usage/v7/tabs/router/vue/example_vue.md
+++ b/static/usage/v7/tabs/router/vue/example_vue.md
@@ -28,21 +28,9 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/vue';
import { playCircle, radio, library, search } from 'ionicons/icons';
-
- export default {
- components: { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon },
- data() {
- return {
- playCircle,
- radio,
- library,
- search,
- };
- },
- };
</script>
```
diff --git a/static/usage/v7/tabs/router/vue/home_page_vue.md b/static/usage/v7/tabs/router/vue/home_page_vue.md
index 9d809b9a70d..64ec093af18 100644
--- a/static/usage/v7/tabs/router/vue/home_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/home_page_vue.md
@@ -21,11 +21,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
- export default {
- components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
- };
</script>
```
diff --git a/static/usage/v7/tabs/router/vue/library_page_vue.md b/static/usage/v7/tabs/router/vue/library_page_vue.md
index b46e1dec9d7..805f4d4c539 100644
--- a/static/usage/v7/tabs/router/vue/library_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/library_page_vue.md
@@ -21,11 +21,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
- export default {
- components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
- };
</script>
```
diff --git a/static/usage/v7/tabs/router/vue/radio_page_vue.md b/static/usage/v7/tabs/router/vue/radio_page_vue.md
index 5f65a8963cf..3da40c02abf 100644
--- a/static/usage/v7/tabs/router/vue/radio_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/radio_page_vue.md
@@ -21,11 +21,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
- export default {
- components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
- };
</script>
```
diff --git a/static/usage/v7/tabs/router/vue/search_page_vue.md b/static/usage/v7/tabs/router/vue/search_page_vue.md
index f85eeb9c649..fd4a6892ea2 100644
--- a/static/usage/v7/tabs/router/vue/search_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/search_page_vue.md
@@ -21,11 +21,7 @@
</ion-page>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
- export default {
- components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
- };
</script>
```
diff --git a/static/usage/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md
index b34cd3d437a..709a858ac9b 100644
--- a/static/usage/v7/text/basic/vue.md
+++ b/static/usage/v7/text/basic/vue.md
@@ -21,18 +21,8 @@
</p>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonIcon, IonText } from '@ionic/vue';
import { warning } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonIcon, IonText },
- setup() {
- return {
- warning,
- };
- },
- });
</script>
```
diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md
index 693814464e8..f960773ed92 100644
--- a/static/usage/v7/textarea/autogrow/vue.md
+++ b/static/usage/v7/textarea/autogrow/vue.md
@@ -10,12 +10,7 @@
</ion-item>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonTextarea },
- });
</script>
```
diff --git a/static/usage/v7/textarea/basic/vue.md b/static/usage/v7/textarea/basic/vue.md
index 8b5c3a00746..7cef259e0ef 100644
--- a/static/usage/v7/textarea/basic/vue.md
+++ b/static/usage/v7/textarea/basic/vue.md
@@ -13,12 +13,7 @@
</ion-list>
</template>
-<script>
+<script lang="ts" setup>
import { IonItem, IonList, IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonTextarea },
- });
</script>
```
diff --git a/static/usage/v7/textarea/clear-on-edit/vue.md b/static/usage/v7/textarea/clear-on-edit/vue.md
index 04deb37bf1e..9328ca1960b 100644
--- a/static/usage/v7/textarea/clear-on-edit/vue.md
+++ b/static/usage/v7/textarea/clear-on-edit/vue.md
@@ -6,12 +6,7 @@
></ion-textarea>
</template>
-<script>
+<script lang="ts" setup>
import { IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea },
- });
</script>
```
diff --git a/static/usage/v7/textarea/counter/vue.md b/static/usage/v7/textarea/counter/vue.md
index aa45a84b5f6..5a97b3ee034 100644
--- a/static/usage/v7/textarea/counter/vue.md
+++ b/static/usage/v7/textarea/counter/vue.md
@@ -11,17 +11,11 @@
></ion-textarea>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonTextarea },
- methods: {
- customFormatter(inputLength, maxLength) {
- return `${maxLength - inputLength} characters remaining`;
- },
- },
- });
+ function customFormatter(inputLength, maxLength) {
+ return `${maxLength - inputLength} characters remaining`;
+ }
</script>
```
diff --git a/static/usage/v7/textarea/fill/vue.md b/static/usage/v7/textarea/fill/vue.md
index 24c0f1b1d54..426a7efee31 100644
--- a/static/usage/v7/textarea/fill/vue.md
+++ b/static/usage/v7/textarea/fill/vue.md
@@ -12,12 +12,7 @@
></ion-textarea>
</template>
-<script>
+<script lang="ts" setup>
import { IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea },
- });
</script>
```
diff --git a/static/usage/v7/textarea/helper-error/vue.md b/static/usage/v7/textarea/helper-error/vue.md
index f0fe51ebee8..bf007dc53df 100644
--- a/static/usage/v7/textarea/helper-error/vue.md
+++ b/static/usage/v7/textarea/helper-error/vue.md
@@ -12,36 +12,31 @@
></ion-textarea>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea },
- methods: {
- validateEmail(email) {
- return email.match(
- /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
- );
- },
-
- validate(ev) {
- const value = ev.target.value;
-
- this.$refs.input.$el.classList.remove('ion-valid');
- this.$refs.input.$el.classList.remove('ion-invalid');
-
- if (value === '') return;
-
- this.validateEmail(value)
- ? this.$refs.input.$el.classList.add('ion-valid')
- : this.$refs.input.$el.classList.add('ion-invalid');
- },
-
- markTouched() {
- this.$refs.input.$el.classList.add('ion-touched');
- },
- },
- });
+ import { ref } from 'vue';
+
+ const input = ref();
+
+ function validateEmail(email) {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ }
+
+ function validate(ev) {
+ const value = ev.target.value;
+
+ input.value.$el.classList.remove('ion-valid');
+ input.value.$el.classList.remove('ion-invalid');
+
+ if (value === '') return;
+
+ validateEmail(value) ? input.value.$el.classList.add('ion-valid') : input.value.$el.classList.add('ion-invalid');
+ }
+
+ function markTouched() {
+ input.value.$el.classList.add('ion-touched');
+ }
</script>
```
diff --git a/static/usage/v7/textarea/label-placement/vue.md b/static/usage/v7/textarea/label-placement/vue.md
index fa6bf5ec893..001a8aa8575 100644
--- a/static/usage/v7/textarea/label-placement/vue.md
+++ b/static/usage/v7/textarea/label-placement/vue.md
@@ -16,12 +16,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTextarea, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/textarea/label-slot/vue.md b/static/usage/v7/textarea/label-slot/vue.md
index 0c5d90db33c..3f0bc23e523 100644
--- a/static/usage/v7/textarea/label-slot/vue.md
+++ b/static/usage/v7/textarea/label-slot/vue.md
@@ -9,12 +9,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTextarea, IonItem, IonList, IonText } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea, IonItem, IonList, IonText },
- });
</script>
```
diff --git a/static/usage/v7/textarea/no-visible-label/vue.md b/static/usage/v7/textarea/no-visible-label/vue.md
index fc77027d770..9ab4696c17e 100644
--- a/static/usage/v7/textarea/no-visible-label/vue.md
+++ b/static/usage/v7/textarea/no-visible-label/vue.md
@@ -7,12 +7,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTextarea, IonItem, IonList } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea, IonItem, IonList },
- });
</script>
```
diff --git a/static/usage/v7/textarea/start-end-slots/vue.md b/static/usage/v7/textarea/start-end-slots/vue.md
index 629240c1456..378e2da6a14 100644
--- a/static/usage/v7/textarea/start-end-slots/vue.md
+++ b/static/usage/v7/textarea/start-end-slots/vue.md
@@ -12,22 +12,12 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/vue';
import { eye, lockClosed } from 'ionicons/icons';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: {
- IonButton,
- IonIcon,
- IonItem,
- IonList,
- IonTextarea,
- },
- setup() {
- return { eye, lockClosed };
- },
- });
+ function setup() {
+ return { eye, lockClosed };
+ }
</script>
```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
index 8af2efe5c45..3335f00516a 100644
--- a/static/usage/v7/textarea/theming/vue.md
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -28,12 +28,7 @@
></ion-textarea>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTextarea } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTextarea },
- });
</script>
```
diff --git a/static/usage/v7/thumbnail/basic/vue.md b/static/usage/v7/thumbnail/basic/vue.md
index 74afde558d4..9a6161cca22 100644
--- a/static/usage/v7/thumbnail/basic/vue.md
+++ b/static/usage/v7/thumbnail/basic/vue.md
@@ -5,12 +5,7 @@
</ion-thumbnail>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonThumbnail } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonThumbnail },
- });
</script>
```
diff --git a/static/usage/v7/thumbnail/item/vue.md b/static/usage/v7/thumbnail/item/vue.md
index 4e688f05030..386570004ee 100644
--- a/static/usage/v7/thumbnail/item/vue.md
+++ b/static/usage/v7/thumbnail/item/vue.md
@@ -8,12 +8,7 @@
</ion-item>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonLabel, IonThumbnail },
- });
</script>
```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/vue.md b/static/usage/v7/thumbnail/theming/css-properties/vue.md
index bd772024b00..3c10cbfacea 100644
--- a/static/usage/v7/thumbnail/theming/css-properties/vue.md
+++ b/static/usage/v7/thumbnail/theming/css-properties/vue.md
@@ -12,12 +12,7 @@
</ion-thumbnail>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonThumbnail } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonThumbnail },
- });
</script>
```
diff --git a/static/usage/v7/title/basic/vue.md b/static/usage/v7/title/basic/vue.md
index 99a7ee20224..fe7a30a3cec 100644
--- a/static/usage/v7/title/basic/vue.md
+++ b/static/usage/v7/title/basic/vue.md
@@ -7,12 +7,7 @@
</ion-header>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonToolbar, IonTitle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonHeader, IonToolbar, IonTitle },
- });
</script>
```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/vue.md b/static/usage/v7/title/collapsible-large-title/basic/vue.md
index de922b98bca..7a3b87c36d3 100644
--- a/static/usage/v7/title/collapsible-large-title/basic/vue.md
+++ b/static/usage/v7/title/collapsible-large-title/basic/vue.md
@@ -39,12 +39,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem },
- });
</script>
```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/vue.md b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
index 2c23d8982ad..a0d0962e885 100644
--- a/static/usage/v7/title/collapsible-large-title/buttons/vue.md
+++ b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
@@ -45,12 +45,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton },
- });
</script>
```
diff --git a/static/usage/v7/title/theming/css-properties/vue.md b/static/usage/v7/title/theming/css-properties/vue.md
index dc85c93d3ab..8fc9ad166e6 100644
--- a/static/usage/v7/title/theming/css-properties/vue.md
+++ b/static/usage/v7/title/theming/css-properties/vue.md
@@ -51,12 +51,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem },
- });
</script>
```
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
index fc05a785e17..943fb7ad5a4 100644
--- a/static/usage/v7/toast/buttons/vue.md
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -10,41 +10,32 @@
></ion-toast>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonToast } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButton, IonToast },
- setup() {
- const handlerMessage = ref('');
- const roleMessage = ref('');
- const toastButtons = [
- {
- text: 'More Info',
- role: 'info',
- handler: () => {
- console.log('More Info clicked');
- },
- },
- {
- text: 'Dismiss',
- role: 'cancel',
- handler: () => {
- console.log('Dismiss clicked');
- },
- },
- ];
- const handleDismiss = (ev: CustomEvent) => {
- const { role } = ev.detail;
- console.log(`Dismissed with role: ${role}`);
- };
-
- return {
- toastButtons,
- handleDismiss,
- };
+ const handlerMessage = ref('');
+ const roleMessage = ref('');
+ const toastButtons = [
+ {
+ text: 'More Info',
+ role: 'info',
+ handler: () => {
+ console.log('More Info clicked');
+ },
+ },
+ {
+ text: 'Dismiss',
+ role: 'cancel',
+ handler: () => {
+ console.log('Dismiss clicked');
+ },
},
- });
+ ];
+
+ const handleDismiss = (ev: CustomEvent) => {
+ const { role } = ev.detail;
+ console.log(`Dismissed with role: ${role}`);
+ };
</script>
```
diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md
index 223e37b3222..b7b4fd9a89e 100644
--- a/static/usage/v7/toast/icon/vue.md
+++ b/static/usage/v7/toast/icon/vue.md
@@ -4,17 +4,8 @@
<ion-toast trigger="open-toast" message="Hello World!" :duration="3000" :icon="globe"></ion-toast>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonToast } from '@ionic/vue';
import { globe } from 'ionicons/icons';
-
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonButton, IonToast },
- setup() {
- return { globe };
- },
- });
</script>
```
diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md
index 1b81018bcdb..01c817df1d3 100644
--- a/static/usage/v7/toast/inline/basic/vue.md
+++ b/static/usage/v7/toast/inline/basic/vue.md
@@ -12,19 +12,7 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonToast } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButton,
- IonHeader,
- IonContent,
- IonToolbar,
- IonTitle,
- IonToast,
- },
- });
</script>
```
diff --git a/static/usage/v7/toast/inline/is-open/vue.md b/static/usage/v7/toast/inline/is-open/vue.md
index b1c9c88ffb1..b396ad9289b 100644
--- a/static/usage/v7/toast/inline/is-open/vue.md
+++ b/static/usage/v7/toast/inline/is-open/vue.md
@@ -16,20 +16,13 @@
</ion-content>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast } from '@ionic/vue';
- import { defineComponent, ref } from 'vue';
+ import { ref } from 'vue';
- export default defineComponent({
- components: { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast },
- setup() {
- const isOpen = ref(false);
- const setOpen = (state: boolean) => {
- isOpen.value = state;
- };
-
- return { isOpen, setOpen };
- },
- });
+ const isOpen = ref(false);
+ const setOpen = (state: boolean) => {
+ isOpen.value = state;
+ };
</script>
```
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
index 18f11de56c3..5046d9d7cc7 100644
--- a/static/usage/v7/toast/layout/vue.md
+++ b/static/usage/v7/toast/layout/vue.md
@@ -17,21 +17,13 @@
></ion-toast>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonToast } from '@ionic/vue';
- import { defineComponent } from 'vue';
- export default defineComponent({
- components: { IonButton, IonToast },
- setup() {
- const toastButtons = [
- {
- text: 'Action With Long Text'
- }
- ]
-
- return toastButtons }
- }
- });
+ const toastButtons = [
+ {
+ text: 'Action With Long Text',
+ },
+ ];
</script>
```
diff --git a/static/usage/v7/toast/position-anchor/vue.md b/static/usage/v7/toast/position-anchor/vue.md
index b06b61b44da..2ecd9f3f38e 100644
--- a/static/usage/v7/toast/position-anchor/vue.md
+++ b/static/usage/v7/toast/position-anchor/vue.md
@@ -33,20 +33,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonButton,
- IonContent,
- IonFooter,
- IonHeader,
- IonTitle,
- IonToast,
- IonToolbar,
- },
- });
</script>
```
diff --git a/static/usage/v7/toast/presenting/controller/vue.md b/static/usage/v7/toast/presenting/controller/vue.md
index 7f2ade91031..0cecb7af1e2 100644
--- a/static/usage/v7/toast/presenting/controller/vue.md
+++ b/static/usage/v7/toast/presenting/controller/vue.md
@@ -5,22 +5,17 @@
<ion-button expand="block" @click="presentToast('bottom')">Present Toast At the Bottom</ion-button>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, toastController } from '@ionic/vue';
- export default {
- components: { IonButton },
- methods: {
- async presentToast(position: 'top' | 'middle' | 'bottom') {
- const toast = await toastController.create({
- message: 'Hello World!',
- duration: 1500,
- position: position,
- });
+ async function presentToast(position: 'top' | 'middle' | 'bottom') {
+ const toast = await toastController.create({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position,
+ });
- await toast.present();
- },
- },
- };
+ await toast.present();
+ }
</script>
```
diff --git a/static/usage/v7/toast/theming/vue.md b/static/usage/v7/toast/theming/vue.md
index 264e4b1ee57..06565c8cf2e 100644
--- a/static/usage/v7/toast/theming/vue.md
+++ b/static/usage/v7/toast/theming/vue.md
@@ -10,22 +10,15 @@
></ion-toast>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonButton, IonToast } from '@ionic/vue';
- export default {
- components: { IonButton, IonToast },
- setup() {
- const toastButtons = [
- {
- text: 'Dismiss',
- role: 'cancel',
- },
- ];
-
- return { toastButtons };
+ const toastButtons = [
+ {
+ text: 'Dismiss',
+ role: 'cancel',
},
- };
+ ];
</script>
<style>
diff --git a/static/usage/v7/toggle/alignment/vue.md b/static/usage/v7/toggle/alignment/vue.md
index b3bce543aa6..d86db26dbb9 100644
--- a/static/usage/v7/toggle/alignment/vue.md
+++ b/static/usage/v7/toggle/alignment/vue.md
@@ -4,14 +4,7 @@
<ion-toggle label-placement="stacked" alignment="center">Aligned to the Center</ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: {
- IonToggle,
- },
- });
</script>
```
diff --git a/static/usage/v7/toggle/basic/vue.md b/static/usage/v7/toggle/basic/vue.md
index cb5396e7abf..b2c5ae6941e 100644
--- a/static/usage/v7/toggle/basic/vue.md
+++ b/static/usage/v7/toggle/basic/vue.md
@@ -6,12 +6,7 @@
<ion-toggle :checked="true" :disabled="true">Disabled Checked Toggle</ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/toggle/justify/vue.md b/static/usage/v7/toggle/justify/vue.md
index ca48ab5d311..03df02e9802 100644
--- a/static/usage/v7/toggle/justify/vue.md
+++ b/static/usage/v7/toggle/justify/vue.md
@@ -13,12 +13,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/toggle/label-placement/vue.md b/static/usage/v7/toggle/label-placement/vue.md
index c9cfea701e1..2bcd1bc23c5 100644
--- a/static/usage/v7/toggle/label-placement/vue.md
+++ b/static/usage/v7/toggle/label-placement/vue.md
@@ -6,12 +6,7 @@
<ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/toggle/list/vue.md b/static/usage/v7/toggle/list/vue.md
index 98e183a7f4b..f845a405220 100644
--- a/static/usage/v7/toggle/list/vue.md
+++ b/static/usage/v7/toggle/list/vue.md
@@ -13,12 +13,7 @@
</ion-list>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonItem, IonList, IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonItem, IonList, IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/toggle/on-off/vue.md b/static/usage/v7/toggle/on-off/vue.md
index 040df1266da..052ef5c3edc 100644
--- a/static/usage/v7/toggle/on-off/vue.md
+++ b/static/usage/v7/toggle/on-off/vue.md
@@ -3,12 +3,7 @@
<ion-toggle :enable-on-off-labels="true">Enable Notifications</ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/toggle/theming/colors/vue.md b/static/usage/v7/toggle/theming/colors/vue.md
index 453255eba8f..8dbc052ccef 100644
--- a/static/usage/v7/toggle/theming/colors/vue.md
+++ b/static/usage/v7/toggle/theming/colors/vue.md
@@ -11,12 +11,7 @@
<ion-toggle aria-label="Dark toggle" color="dark" :checked="true"></ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonToggle },
- });
</script>
```
diff --git a/static/usage/v7/toggle/theming/css-properties/vue.md b/static/usage/v7/toggle/theming/css-properties/vue.md
index ce78a13989a..89eef0f7448 100644
--- a/static/usage/v7/toggle/theming/css-properties/vue.md
+++ b/static/usage/v7/toggle/theming/css-properties/vue.md
@@ -4,13 +4,8 @@
<ion-toggle :checked="true" aria-label="Enable Notifications"></ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonToggle },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
index cdced277639..495394942dc 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
@@ -4,13 +4,8 @@
<ion-toggle :checked="true" aria-label="Enable Notifications"></ion-toggle>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonToggle } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonToggle },
- });
</script>
<style scoped>
diff --git a/static/usage/v7/toolbar/basic/vue.md b/static/usage/v7/toolbar/basic/vue.md
index ec71b1a340b..c9df6be3e47 100644
--- a/static/usage/v7/toolbar/basic/vue.md
+++ b/static/usage/v7/toolbar/basic/vue.md
@@ -13,12 +13,7 @@
</ion-footer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonFooter, IonHeader, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/toolbar/buttons/vue.md b/static/usage/v7/toolbar/buttons/vue.md
index 68091a20771..3a23ab97570 100644
--- a/static/usage/v7/toolbar/buttons/vue.md
+++ b/static/usage/v7/toolbar/buttons/vue.md
@@ -84,16 +84,8 @@
</ion-toolbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
- setup() {
- return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star };
- },
- });
</script>
```
diff --git a/static/usage/v7/toolbar/progress-bars/vue.md b/static/usage/v7/toolbar/progress-bars/vue.md
index 2b3a3b85d0c..777f71a8f68 100644
--- a/static/usage/v7/toolbar/progress-bars/vue.md
+++ b/static/usage/v7/toolbar/progress-bars/vue.md
@@ -8,12 +8,7 @@
</ion-header>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonHeader, IonProgressBar, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/toolbar/searchbars/vue.md b/static/usage/v7/toolbar/searchbars/vue.md
index 8543a2ef976..2fa15858664 100644
--- a/static/usage/v7/toolbar/searchbars/vue.md
+++ b/static/usage/v7/toolbar/searchbars/vue.md
@@ -10,12 +10,7 @@
</ion-header>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonHeader, IonSearchbar, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/toolbar/segments/vue.md b/static/usage/v7/toolbar/segments/vue.md
index b31855bf734..9f60c121868 100644
--- a/static/usage/v7/toolbar/segments/vue.md
+++ b/static/usage/v7/toolbar/segments/vue.md
@@ -14,12 +14,7 @@
</ion-header>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/toolbar/theming/colors/vue.md b/static/usage/v7/toolbar/theming/colors/vue.md
index d71cb7a3c05..9df7ee02120 100644
--- a/static/usage/v7/toolbar/theming/colors/vue.md
+++ b/static/usage/v7/toolbar/theming/colors/vue.md
@@ -32,12 +32,7 @@
</ion-toolbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTitle, IonToolbar },
- });
</script>
```
diff --git a/static/usage/v7/toolbar/theming/css-properties/vue.md b/static/usage/v7/toolbar/theming/css-properties/vue.md
index 17d8653117c..71a2ac18bf0 100644
--- a/static/usage/v7/toolbar/theming/css-properties/vue.md
+++ b/static/usage/v7/toolbar/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
</ion-toolbar>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { IonTitle, IonToolbar } from '@ionic/vue';
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- components: { IonTitle, IonToolbar },
- });
</script>
<style scoped>