0
Today I started a project in Ionic and Vue 3. I have no previous experience, so I followed the documentation and some tutorials. Overall, even the project launcher does this local import, so I followed the pattern. After a few hours on this, I realized it wasn’t necessary, and it all works in a seemingly common way.
Here are some codes from the file I’m currently working on, as well as my main.js. The only change I made was to convert to Javascript.
<template>
<ion-page>
<ion-content>
<ion-row class="ion-no-padding" v-for="(entry, index) of songs" :key="entry.title">
<ion-col size="9">
<h4 class="section-header">
{{ entry.title }}
</h4>
</ion-col>
<ion-col size="3" class="ion-text-end ">
<ion-button v-if="index === 0" fill="clear" color="dark">
<ion-icon :icon="settingsOutline"/>
</ion-button>
</ion-col>
</ion-row>
</ion-content>
</ion-page>
</template>
<script>
import { IonPage, IonContent } from "@ionic/vue";
import { settingsOutline } from "ionicons/icons";
import recentlyPlayed from "@/assets/mockdata/recentlyPlayed.json";
import heavyRotation from "@/assets/mockdata/heavyRotation.json";
import jumpBackIn from "@/assets/mockdata/jumpBackIn.json";
export default {
name: "Home",
components: { IonContent, IonPage },
data() {
return {
settingsOutline,
songs: [
{
title: "Recently Played",
albums: recentlyPlayed,
},
{
title: "Heavy Rotation",
albums: heavyRotation,
},
{
title: "Jump back in",
albums: jumpBackIn,
},
],
};
},
};
</script>
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import { IonicVue } from '@ionic/vue';
const app = createApp(App)
.use(IonicVue)
.use(router);
router.isReady().then(() => {
app.mount('#app');
});
*i omitted the css parts
As you can see, the only imported components were page and content. All others (Row, col, button, icon) worked normally. Therefore, what is the real need of local import?