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

Conversation

Projects
None yet
6 participants
@moduscreate
Copy link
Contributor

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 some commits Sep 11, 2018

Merge pull request #2 from ModusCreateOrg/ionic-vue
Further cleanup, get build closer to Ionic's
Merge pull request #6 from ModusCreateOrg/update-readme
Add ionic vue to root readme
Merge pull request #7 from ModusCreateOrg/sync
Sync with ionic-vue changes
@jthoms1

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

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 👍

@grgur grgur referenced this pull request Oct 4, 2018

Closed

Compatibility with ionic 4 cli #37

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

@cy920820

This comment has been minimized.

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.

@michaeltintiuc

This comment has been minimized.

Copy link
Contributor

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