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!
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')
})
Excellent! Just what I needed! Thanks!
Wanted to add the Ionic Docs link regarding this topic for those seeking additional context: Ionic Vue Quickstart - Ionic Documentation
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!
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]);
}
});