Using Ionic with Vue?

Ionic Framework
1

I’m trying to figure out how to use Ionic with Vue but I’m not really sure where or how to start.

2

I don’t have experience with Vue but I kind of tried to answer the same question on Stackoverflow (https://stackoverflow.com/a/54720516/5404186).

Right now, as far as I know, Vue is not yet implemented in the CLI but I guess that will come. So to get started I guess you could do as described in the README (https://github.com/ionic-team/ionic/tree/master/vue)

My understanding is that you first need to create a Vue project, again in the current state, and then drop Ionic in it

So in your Vue project firstly

 npm install @ionic/vue @ionic/core --save

and then

import Vue from 'vue';
import Ionic from '@ionic/vue';
Vue.use(Ionic);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

But again I don’t have experience in Vue and that’s only my understanding

3

That’s what I’ve done. I’m just stuck at figuring out how to use it with all the Ionic CLI stuff.

1 Like
4

I guess you could probably just use the component

For the controllers (alert, modal, etc) you could have a look to the example in that blog post I guess: https://blog.ionicframework.com/a-vue-from-ionic/

Does that help?

5

Were you able to get your project up and running?

6

@Dog2puppy, were you able to get your project off the ground?

7

No. I’m just gonna wait until there’s better documentation for Vue.

1 Like
8

Yeah. I’m doing the same with an issue I have with tabs.

9

I think you should use Capacitor instead of ionic CLI

10

I’ve done that and Ionic itself + Vue (2) using the code from https://github.com/ionic-team/ionic-framework/tree/master/vue leads to a broken app.

11

I have a bunch of samples in my github repo - github.com/aaronksaunders

Here are some videos

12

Are any of those using Vue 2 and Ionic 4/5?