CSS with Ionic vue

Ionic Framework Ionic Vue
1

I’ve developed a simple APP in Ionic+Vue
(I’ve basically extended the scaffolded APP which comes with appflow).

It works fine when I run
ionic serve

APP Working OK

Broken on ionic build

As soon as I run ionic build I get the UI completely scrambled.

APP Scrambled

I’ve tried to deploy on appflow, and firebase and android and I always get the same problem.

I don’t get what I’m doing wrong.
Any idea?
Thanks
Massimo

2

This issue in Vue is usually caused by adding ionic UI components to your page without importing them. Try adding IonList, IonItem to your list of Ionic imports on this page component:

<script lang="ts" setup>
  import { IonContent, IonPage, IonList, IonItem, IonLabel, IonCard, IonCardContent, IonIcon, IonCardHeader, 
    IonCardSubtitle, IonButton, IonHeader, IonToolbar, IonTitle } from '@ionic/vue';
  import { logoIonic, logoVue, logoAngular, logoReact, logoGithub, chevronForward, copyOutline } from 'ionicons/icons';
</script>
2 Likes
3

Thanks it works!
Not clear to me: Why I had to import all components in all pages? Is this a problem of the optimizer?

Regards
Massimo

4

You import the components you use to keep your app lightweight. They used to import everything everywhere, but that lead to bloated apps. Unimported components are not bundled when you do a production build, but they do show up in dev mode.

1 Like
5

Thanks everything clear!
Massimo