Console warnings for grid components

Ionic Framework Ionic Vue
1

I have a lot of warnings about loading ion grid components:

Imgur

Everything seems to work… just annoying errors…

2

You need to import the Ionic component and provide it to your Vue component before using it. The following is pseudo-code for how to do this:

<template>
  <ion-grid>
    ...
  </ion-grid>
</template>

<script>
import { IonGrid } from '@ionic/vue';
Import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonGrid }
});
</script>

What you are seeing in your app is the raw web component without any Vue bindings. Vue is warning you that it cannot find the Vue bindings for those components.

This was done for performance reasons, but if importing Ionic components every time you want to use them is not your preference, you can also register these components globally by importing them once: https://ionicframework.com/docs/vue/quickstart#global-component-registration