Adding @ionic/vue as "devDependencies"?

[cramrov]

Hi,

For the ones that use meteor+ionic+vue stack, just wondering if it make sense to integrate the new "@ionic/vue" library as "devDependencies" of this package.

What do you think?

Thank you! /marc

[ghybs]

Hi,

Thank you a lot for the info!

I must admit I have not followed up on Ionic development lately. Please is there some blog post / article / example of it and how to use it?

[cramrov]

Hi @ghybs , yes, please check this post: https://blog.ionicframework.com/a-vue-from-ionic/

Regards, /marc

[ghybs]

Hi,

Thank you for the link.

Please have you already tried it in a Vue app, or even better a Meteor + Vue + Ionic project?

I just had a quick look at it, and it seems to me that the @ionic/vue integration lib assumes you are using Vue CLI 3 with webpack build and style-loader + css-loader, since it tries requiring the Ionic CSS from JS?

Furthermore, it seems using the ionic esm build which relies on Stencil+webpack's lazy loading mechanism for every single Ionic component (instead of grouping them as done in the normal dist build) (which in itself is a strange drawback for which I would expect the ionic-team to come up with a new plan later on).

But in the case of Meteor, it also seems to mean that we should never import the esm version of @ionic/core (or whatever integration which depends on it), since this will conflict with the Meteor build and its own lazy loading mechanism.

Please correct me if I am wrong.

But if you did use it already successfully, please could you kindly share your experience and how it integrates with Meteor? Also feel free to submit a PR! :smiley:

[cramrov]

Hi @ghybs ,

Thank you for the research. I've tryied to install the @ionic/vue library directly from the npm package in a Meteor + Vue + Ionic project, and it didn't work. You are right, it seems that right now it's conflicting with the Meteor build and its lazy loading mechanism. Hopefully this will change in the future.

BTW, I'm new to Vue and I'm stucked trying to render a ionic modal that the "innerHTML" is the rendered output of a Vue component. Here is the source code of what I'm trying to do:

async function showModal() {
  const modalController = document.querySelector('ion-modal-controller');
  await modalController.componentOnReady();

  const element = document.createElement('div');
  element.innerHTML = "`<my-vue_component></my-vue_component>`"; // NOT WORKING

  const modalElement = await modalController.create({
    component: element
  });
};

In Blaze I used to write "Blaze.render(template, element)" to render the template inside the DOM element.

Do you know how can I achieve the same thing using Vue?

Thank you!

Regards, /marc

PD: While I'm writting the comment, I've found this: https://github.com/alexjoverm/v-runtime-template It looks good. I'm going to try it and tell you if it works.

[cramrov]

Hi,

I've got it using the trick explained here: https://css-tricks.com/creating-vue-js-component-instances-programmatically/

Thank you!