Repository navigation
feat: refactor Vue code snippets to use <script setup>聽#3070
Description
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 馃槃
Activity
mapsandapps commentedon Aug 7, 2023
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
setupfunction. 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 viaionic start) which are already using<script setup>.icarusgk commentedon Aug 7, 2023
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 commentedon Aug 16, 2023
Here is a list of all the docs sections that we would like to rewrite to use
script setupsyntax:Components:
accordionI have this done in a branchaction-sheetI have this done in a branchOther:
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:
methodsobject, like this one) should not be refactored for now.templatetag above thescripttag.