Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: Vue.JS support #15801

merged 28 commits into from Oct 10, 2018

RFC: Vue.JS support #15801

merged 28 commits into from Oct 10, 2018


Copy link

Short description of what this resolves:

Use Ionic in Vue applications. This package integrates the work done in the ionic-vue library into the Ionic core.

Changes proposed in this pull request:

  • Add @ionic/vue package
  • vue-router integration
  • Ionic API connector
  • Register Ionic web components with Vue

Ionic Version: 4.x


Assuming that the app already bundles vue and vue-router via Vue CLI or manually, install Ionic with npm

npm install @ionic/vue


  • @ionic/core
  • vue
  • vue-router

Using in a Vue application

@ionic/vue uses @ionic/core internally so a developer would only have register the Ionic plugins for Vue.

import Vue from 'vue'
import { IonicVueRouter, IonicAPI } from '@ionic/vue'
import Home from './Home.vue'
import Page from './Page.vue'


new Vue({
  router: new IonicVueRouter({
    routes: [{ path: '/', component: Home }, { path: '/page', component: Page }],

Ionic requires a root element of ion-app in HTML.

IonicVueRouter requires ion-vue-router element in order to render the components.

<!DOCTYPE html>
<html lang="en">



IonicAPI abstracts DOM interaction of Ionic UI components inside a Vue application and can be used via this.$ionic.

Alert Controller usage

    header: 'Notification',
    subHeader: null,
    message: 'Hello World',
    buttons: ['Bye'],
  .then(a => a.present())

Loading Controller usage

  .then(l => {
    setTimeout(function() {
    }, 1000)

Menu Controller usage


Modal Controller usage

Also supports lazy loading components

  component: {
    template: `
        <ion-content padding>
.then(m => m.present())

Popover Controller usage

Also supports lazy loading components

  component: {
    template: `
        <ion-item>Learn Ionic</ion-item>
        <ion-item>GitHub Repo</ion-item>
  translucent: true,
.then(p => p.present())

Toast Controller usage

  message: 'Here\'s to IonicVue!',
  showCloseButton: true,
  position: 'top',
  closeButtonText: 'Done'
.then(t => t.present())

IonicVueAPI supports the following Ionic controllers and a demo is available here:


IonicVueRouter binds Ionic transitions and routing functionalities with Vue Router.

It is an extension of the Vue Router thus it can be used as a drop-in replacement with all of the methods, hooks, etc.

Reference App

BEEP is a fully-featured sample application that demonstrates Ionic 4 inside a Vue.js app. Source code is available on the GitHub repo.


Copy link

jthoms1 commented Oct 1, 2018

We discussed this in the standup this morning. I think we are going to go ahead and merge and work on types. This PR has no impact on the rest of ionic so I am fine with merging.

I have been assigned as a resource to get this integrated and tested. Does that sound ok with Modus? I will probably have some changes as we continue to work through integration.

Copy link

grgur commented Oct 3, 2018

That sounds perfect, thank you @jthoms1. Typescript support similar to what exists for @ionic/angular is in the works 👍

@mhartington mhartington merged commit 73cff0c into ionic-team:master Oct 10, 2018
Copy link

cy920820 commented Nov 28, 2018

Hello, @michaeltintiuc !
Now that the Vue framework has been gradually supported, how can I build an app development project based on Vue ionic from scratch?

No relevant descriptions have been found in the document at present.
Thank you all first.

Copy link

@Cui-y I'd say your best bet would be to have a look at Beep and the Cookbook examples from IonicVue. I'm pointing you to @modus/ionic-vue due to the fact that @ionic/vue does not yet export the router. Other than that the above description should be enough to get anyone started. There also are slides from one of the meetups, perhaps those would be of some help too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

6 participants