toggle

Author: mapsandapps

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>
 ```

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>
 ```

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>
 ```

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>
 ```

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>
 ```

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>
 ```

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>
 ```

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>

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>