[SOLVED] [Vue warn]: Failed to resolve component: ion-card-header

Ionic Framework Ionic Vue
1

I’m getting these vue warnings for ion-components (title,subtitle,header,content) in a vue component. It renders correctly though. I don’t get the errror for ion-card. Any idea what happening?

the component:

<template>
	<ion-card class="card">
		<img :src="imgLink" />
		<ion-card-header>
			<ion-card-subtitle>{{ news.kategorie.name }}</ion-card-subtitle>
			<ion-card-title class="slabs">{{ news.title }}</ion-card-title>
		</ion-card-header>
		<ion-card-content>
			{{ news.short }}
		</ion-card-content>
	</ion-card>
</template>

<script>
import {
	IonCard,
	ionCardHeader,
	ionCardSubtitle,
	ionCardTitle,
	ionCardContent,
} from '@ionic/vue';

export default {
	name: 'NewsCard',
	props: {
		news: Object,
	},
	components: {
		IonCard,
		ionCardHeader,
		ionCardSubtitle,
		ionCardTitle,
		ionCardContent,
	},
	computed: {
		imgLink() {
			return `${this.$store.state.imageBase}${this.news.featured_image.id}?key=newscard`;
		},
	},
};
</script>

<style lang="scss" scoped>
.card {
	ion-card-subtitle {
		font-weight: 100;
	}

	ion-card-title {
		font-weight: bold;
	}

	ion-card-content {
		color: var(--ion-color-dark);
	}
}
</style>

is used like this:

<template>
	<ion-page>
		<ion-header :translucent="true">
			<ion-toolbar>
				<ion-buttons slot="start">
					<ion-menu-button></ion-menu-button>
				</ion-buttons>
				<ion-title class="slabs">BioNews</ion-title>
			</ion-toolbar>
		</ion-header>

		<ion-content>
			<news-card
				:news="news"
				v-for="news in allNews"
				:key="news.id"
			></news-card>
		</ion-content>
	</ion-page>
</template>

<script>
import {
	IonButtons,
	IonContent,
	IonHeader,
	IonMenuButton,
	IonPage,
	IonTitle,
	IonToolbar,
} from '@ionic/vue';

import NewsCard from '@/components/NewsCard.vue';

export default {
	name: 'News',
	components: {
		IonButtons,
		IonContent,
		IonHeader,
		IonMenuButton,
		IonPage,
		IonTitle,
		IonToolbar,
		NewsCard,
	},
	data() {
		return {
			allNews: [],
		};
	},
	async created() {
		let news = await this.$http.get(
			'/items/news?filter[status]=published&fields=*,featured_image.*,kategorie.*'
		);
		this.allNews = news.data.data;
	},
};
</script>
2

Ahhhh! Imported vue components need to start with capital letters:

changing:

	IonCard,
	ionCardHeader,
	ionCardSubtitle,
	ionCardTitle,
	ionCardContent,

to

IonCard,
	IonCardHeader,
	IonCardSubtitle,
	IonCardTitle,
	IonCardContent,

#damnit :wink: