Skip to content

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

Open
@icarusgk

Description

@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 😄

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentIssues related to the contents of the documentation websitepackage: vueIssues related to the Ionic Vue documentation

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions