The Ionic design doesn't look the same on devices and the web

Ionic Framework Ionic Vue
1

Hello everyone. The <ionic-button>,<ionic-img> element in the mobile application I created using Ionic+Vue is displayed correctly in the web preview and when “Live Reload” is selected via the vscode ionic extension (as it should be). However, after building the application, the <ionic-button>,<ionic-img> style does not appear correctly on both Android and iOS devices. What could be the reason for this? Thank you in advance for your help.

Live Reload
Live Reload920×1950 167 KB

ios build
ios build920×1950 186 KB

android build
android build1088×2044 246 KB

package.json

{
“name”: “myapp”,
“private”: true,
“version”: “0.0.0”,
“type”: “module”,
“scripts”: {
“dev”: “vite”,
“build”: “vue-tsc && vite build”,
“preview”: “vite preview”,
“test:e2e”: “cypress run”,
“test:unit”: “vitest”,
“lint”: “eslint .”,
“ionic:build”: “npm run build”,
“ionic:serve”: “npm run dev – --open”
},
“dependencies”: {
“@capacitor/android”: “6.1.2”,
“@capacitor/app”: “6.0.1”,
“@capacitor/core”: “6.1.2”,
“@capacitor/haptics”: “6.0.1”,
“@capacitor/ios”: “6.1.2”,
“@capacitor/keyboard”: “6.0.2”,
“@capacitor/status-bar”: “6.0.1”,
“@ionic/vue”: “^8.0.0”,
“@ionic/vue-router”: “^8.0.0”,
“ionicons”: “^7.0.0”,
“vue”: “^3.3.0”,
“vue-router”: “^4.2.0”
},
“devDependencies”: {
“@capacitor/cli”: “6.1.2”,
“@vitejs/plugin-legacy”: “^5.0.0”,
“@vitejs/plugin-vue”: “^4.0.0”,
“@vue/eslint-config-typescript”: “^12.0.0”,
“@vue/test-utils”: “^2.3.0”,
“cypress”: “^13.5.0”,
“eslint”: “^8.35.0”,
“eslint-plugin-vue”: “^9.9.0”,
“jsdom”: “^22.1.0”,
“terser”: “^5.4.0”,
“typescript”: “^5.1.6”,
“vite”: “~5.2.0”,
“vitest”: “^0.34.6”,
“vue-tsc”: “^2.0.22”
}
}

2

Sounds like you have not imported IonButton and IonImg into the component. Add them to your import

import { IonCard, IonCardContent, IonIcon, IonButton, IonCardHeader, IonCardTitle, IonImg } from '@ionic/vue';
2 Likes
3

Thank you very much. I must have overlooked it because I used it without importing. It would have been better if it didn’t allow the use of that element without importing, but I appreciate your attention.

4

FYI, Vue usually throws a warning in the console when components are not imported.