feat: refactor Vue code snippets to use <script setup>

[icarusgk]

Describe Problem

Hello Ionic team! 😄
Most, if not all, of the current Vue code snippets are written in a verbose way.

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Details</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content> Detail ID: {{ id }} </ion-content>
  </ion-page>
</template>

<script lang="ts">
  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
  import { defineComponent } from 'vue';
  import { useRoute } from 'vue-router';

  export default defineComponent({
    name: 'Detail',
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
    setup() {
      const route = useRoute();
      const { id } = route.params;
      return { id };
    },
  });
</script>

Describe Preferred Solution

Vue 3 offers <script setup> a compile-time syntactic sugar which allows for more succinct code with less boilerplate. The above piece of code could be simplified as follows.

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Details</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content> Detail ID: {{ id }} </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
  import { defineComponent } from 'vue';
  import { useRoute } from 'vue-router';
  
  const route = useRoute();
  const { id } = route.params;
</script>

Describe Alternatives

It is also possible to re-arrange the order of the tags to make the code snippet more readable.

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';
  
const route = useRoute();
const { id } = route.params;
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Details</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content> Detail ID: {{ id }} </ion-content>
  </ion-page>
</template>

Additional Information

I would like to offer my help to refactor said code snippets in case this feature request is approved 😄

[mapsandapps]

Hi, thank you for submitting this issue! I've just merged a PR that refactors the snippets for some of the components to use <script setup>. We would like to get more refactored, so the examples will be more consistent throughout the docs.

I spoke with the team about this, and please note that for now, we are only interested in refactoring snippets that only have a setup function. For example, more complex snippets like this one should not be refactored at this time.

Also, at this time, we would like to keep the <template> tag above the <script> tag in the code, to keep it aligned with our vanilla JavaScript code samples and to keep it aligned with the Vue Ionic starter apps (that you create via ionic start) which are already using <script setup>.

[icarusgk]

that PR looks awesome! 👀 You're absolutely right, refactoring to target setup() function components makes perfect sense since the logic can easily be transferred to the <script setup> tag. And I agree with you, having the <template> tag first, just like in Vue Ionic starter apps, will definitely help keep things more consistent.

if you need any help or additional contributions for this PR, count me in! I'd be more than happy to lend a hand and collaborate with you on making this even better. Just let me know how I can assist.

[mapsandapps]

Here is a list of all the docs sections that we would like to rewrite to use script setup syntax:

Components:

• accordion I have this done in a branch
• action-sheet I have this done in a branch
• avatar
• back-button
• backdrop
• badge
• breadcrumbs
• button
• card
• checkbox
• chip
• content
• datetime
• fab
• footer
• grid
• header
• icon
• img
• infinite-scroll
• input
• item
• item-divider
• item-group
• item-sliding
• label
• list
• list-header
• loading
• menu
• nav (nav-link only, not modal-navigation)
• note
• picker
• popover
• progress-bar
• radio
• range
• refresher
• reorder
• ripple-effect
• searchbar
• segment
• segment-button
• select
• skeleton-text
• spinner
• split-pane
• tabs
• text
• textarea
• thumbnail
• title
• toast
• toggle
• toolbar

Other:

• animations
• gestures
• keyboard
• theming

Feel free to pick up one of these components to refactor to script setup, just leave a note here with the one you're working on.

Notes:

• Changes should apply only to the current docs, not docs for Ionic Framework versions 5 or 6.
• Complicated snippets (e.g. those with a methods object, like this one) should not be refactored for now.
• For now, we are leaving the template tag above the script tag.