Global loading components

What is the quickest way to globally load all the ionic components? I am trying to develop an app and as I go from screen-to-screen it’s so annoying to have to comment out imports and stuff. I just want to develop the screens and then go back and figure out which to import or not. This is slowing me down greatly!

1 Like

In your main.ts file you can register all the components globally.

const app = createApp(App)
    .use(IonicVue)
    .use(router)
    .use(store)

// Globally register components
app.component('ion-page', IonPage)
app.component('ion-content', IonContent)

router.isReady().then(() => {
    app.mount('#app')
})
4 Likes

Excellent! Just what I needed! Thanks!

1 Like

Wanted to add the Ionic Docs link regarding this topic for those seeking additional context: Ionic Vue Quickstart - Ionic Documentation

2 Likes

Ahhh good to see that there @ldebeasi! Isn’t ion-page on pretty much every screen or 95% of them? Shouldn’t that be globally registered? What would be really rad is if someone wrote a VS code plugin that would automatically import a tag and list on imports and components and remove from same list when you comment out a tag or remove. I feel it would help ionic/vue adoption. Anyway, thanks again for the help!

1 Like

Are you using Vetur in VSCode? Vetur has this functionality built in for Vue apps.

I globally register ion-page and ion-content because as you said, they are used on 95% of pages.

I use Vetur, but it does some wonky things sometimes with the components section.

The new <script setup> syntax coming in I think v3.2 simplifies this removing the requirement of components. See here and here.

How does this work? I have Vetur installed and it’s not doing anything for me automatically on either of my computers. Is there a setting I need to turn on or something I need to configure on my project? That would be a huge help!

Well, it looks like Vue 3.2 was released yesterday. Here is the official documentation on <script setup>. And here are the release notes for 3.2.

Here’s a code snippet you can put in your main.js that should load all Ionic components globally. (I think I found it on Stack Overflow.) As you mentioned you’ll want to remove this and import only the specific components you’re using after you’re done prototyping.

import * as IonicComponents from '@ionic/vue';
Object.keys(IonicComponents).forEach(key => {
	if (/^Ion[A-Z]\w+$/.test(key)) {
		app.component(key, IonicComponents[key]);
	}
});
2 Likes