Why do I need to locally import Ionic components into Vue if they work without import?

Asked

Viewed 9 times

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?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.