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
merged 28 commits into from Oct 10, 2018
Merged

RFC: Vue.JS support #15801

merged 28 commits into from Oct 10, 2018

Conversation

@moduscreate
Copy link
Contributor

@moduscreate moduscreate commented Sep 28, 2018

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

Installing

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

npm install @ionic/vue

Dependencies

  • @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'

Vue.use(IonicVueRouter)
Vue.use(IonicAPI)

new Vue({
  router: new IonicVueRouter({
    routes: [{ path: '/', component: Home }, { path: '/page', component: Page }],
  }),
}).$mount('ion-app')

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">
  <head>...</head>

  <body>
    <ion-app>
      <ion-vue-router/>
    </ion-app>
  </body>
</html>

IonicAPI

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

Alert Controller usage

this.$ionic.alertController
  .create({
    header: 'Notification',
    subHeader: null,
    message: 'Hello World',
    buttons: ['Bye'],
  })
  .then(a => a.present())

Loading Controller usage

this.$ionic.loadingController.create()
  .then(l => {
    l.present()
    setTimeout(function() {
      l.dismiss()
    }, 1000)
  })

Menu Controller usage

this.$ionic.menuController.toggle()

Modal Controller usage

Also supports lazy loading components

this.$ionic.modalController.create({
  component: {
    template: `
      <div>
        <ion-content padding>
        <h1>Howdy!</h1>
        </ion-content>
      </div>`,
  }
})
.then(m => m.present())

Popover Controller usage

Also supports lazy loading components

this.$ionic.popoverController.create({
  component: {
    template: `
      <ion-list>
        <ion-list-header>
          <ion-label>Ionic</ion-label>
        </ion-list-header>
        <ion-item>Learn Ionic</ion-item>
        <ion-item>Documentation</ion-item>
        <ion-item>Showcase</ion-item>
        <ion-item>GitHub Repo</ion-item>
    </ion-list>`,
  },
  translucent: true,
  event
})
.then(p => p.present())

Toast Controller usage

this.$ionic.toastController.create({
  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

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.

BEEP

michaeltintiuc and others added 28 commits Sep 11, 2018
Migrate ionic-vue
Further cleanup, get build closer to Ionic's
Ionic vue
Add ionic vue to root readme
Sync with ionic-vue changes
Upstream sync
@jthoms1
Copy link
Member

@jthoms1 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.

@grgur
Copy link

@grgur 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
@cy920820
Copy link

@cy920820 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.

@michaeltintiuc
Copy link
Contributor

@michaeltintiuc michaeltintiuc commented Nov 28, 2018

@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
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants