Using ionic-vue with ionic v1. Help needed

Hi, I’m trying to add ionic-vue components to an ionic v1 application so we can do it page by page.

I’m importing everything just fine, I had to do some tuning like add a “hydrated” class to html so it displayed the html, and tweaked structure.scss so that [hidden] is not display:none; because I am getting some hidden=“false” that weren’t displaying.

I don’t get any other errors, but the ionic components are not getting the shadow dom and therefore no styling.

And here’s the vue component:

Am I forgetting something? Is what I’m trying to achieve possible? should I just use plain html and use ionic v1 css classes?

Regards!

This is not something we really recommend as you are installing two conflicting versions of Ionic. We recommend following the strategy outlined here: Migration Guide - Ionic Documentation

In particular, Ionic v1 components expect AngularJS 1.x whereas you are building with Vue, an entirely different framework. I would not expect this path to be particularly straightforward.

I know it won’t be straightforward, but I prefer doing the migration step by step (page by page) and then, when most of it is in ionic-vue, moving the project to full ionic-vue + moving from cordova to capacitor.

It’s a large application, there would be so many bugs if we do a big bang!

Anyway, I was missing import { IonicVue} from '@ionic/vue' and then on createApp({...}).use(IonicVue)

Now it works just fine, but I will need some postcss so that classes from v1 and ionic-vue don’t conflict.

1 Like

The problem with .use(IonicVue) is that it’s modifying the whole application, not the vue application, so if I have a from ionic-v1, it modifies it like it was part of the vue app.
I am doing something like the following:

  let vueInstance = createApp({
    render() {
      return _h(Component, { ...rProps.value, ...on })
    },
  })
  vueInstance.use(IonicVue)
  vueInstance.mount(jqElement[0])

Could you please give me a hint on where is this happening in the code?

Hey @pcaselas, this is not something officially supported by Ionic, and we do not recommend you take this approach in your migration.

By the looks of it, mixing these two frameworks is going to cause a lot of issues and take more time than just doing a migration completely. I would strongly encourage you do not try this.

What you are experiencing sounds correct as you have a Vue app, which knows nothing about the AngularJS app. So I would expect this kind of behaviour to happen. Your best bet is to simply avoid doing this approach and go for a full migration.

1 Like

Ok, thanks for your recommendation @mhartington, but that cannot be our approach. We cannot do a “big bang” migration. In that case we will use just pure html, js and css with vue3.

However… out of sheer curiosity… where in the code is it done?

That is outside of Ionic. It’s done in vue proper.

Out of curiosity on my end…why can’t you do a migration like that?

That’s just too risky for us… there’s too much logic to migrate for too many users that requires too much testing.

Thanks for your help though! :smiley: