Important: This project has been contributed to the Ionic core and can be used as @ionic/vue.
Modus Create engineers will continue to support the community at the Ionic's official Issue board
However, this repository is still being actively maintained and kept in-sync with the official @ionic/vue. The main difference being the availability of pending upstream pull requests and flexibility of choosing dependency versions.
Our goal is to allow developers to be on the bleeding-edge and freely experiment, thus we are delivering features and bug fixes as fast as possible.
Bug fixes, features, documentation and any other changes are always contributed back to upstream @ionic/vue.
Ionic integration adapters for Vue.
Overview: all of the controllers and major features such as transitions and router have been implemented and tested for several months now. Apart from minor improvements and further testing of various mixes of Ionic components and implementations this library is considered feature complete.
| Feature | Status | @ionic/vue | Notes |
|---|---|---|---|
| Router | ✔️ | ✔️ | Fully implemented |
| Router View | ✔️ | ✔️ | Fully implemented |
| Tabs | ✔️ | ✔️ | Fully implemented |
| Controllers | ✔️ | ✔️ | Fully implemented |
| TypeScript | ✔️ | ✔️ | Fully implemented |
| MS Edge Fix | ✔️ | ✔️ | Fully implemented |
| Router keep-alive | ✔️ | Pending | - |
| Functional Inputs | ✔️ | Pending | - |
| Import controllers directly | ✔️ | Pending | Improve treeshaking and sync with react and angular implementations |
| Unit tests | ❌ | ❌ | Outdated as were originally written in plain JS, need to be updated for TS |
A quick introduction of the minimal setup you need to get a hello world up and running.
npm install @ionic/core @modus/ionic-vueNow you can use it during the initialization step of your Vue app.
import Vue from 'vue'
import '@ionic/core/css/ionic.bundle.css'
import Ionic, { IonicVueRouter } from '@modus/ionic-vue'
import Home from './Home.vue'
Vue.use(Ionic)
Vue.use(IonicVueRouter)
new Vue({
router: new IonicVueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/page', component: () => import('./Page.vue') }
],
}),
}).$mount('ion-app')Ionic requires a root element of ion-app in your HTML.
IonicVueRouter requires ion-vue-router element in order to render Ionic transitions. Otherwise you can use the official VueRouter
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<ion-app>
<ion-vue-router />
</ion-app>
</body>
</html>IonicVue abstracts DOM interaction of Ionic UI components inside a Vue application.
:warning: Use of this.$ionic or Vue.$ionic is deprecated and will be removed in the near future. Please use the example below instead:
import { alertController } from '@ionic/vue';
Vue.component('Foo', {
methods: {
notify() {
alertController
.create({
header: 'Notification',
subHeader: null,
message: 'Hello World',
buttons: ['Bye'],
})
.then(a => a.present())
.catch(console.error)
},
},
})IonicVue supports all of the Ionic controllers:
IonicVueRouter binds Ionic transitions and routing functionalities with Vue Router.
It is an extension of the official Vue Router thus it can be used as a drop-in replacement with all of the methods, hooks, etc. working as expected.
Simply clone the repo and install dependencies to get started with development.
git clone https://github.com/moduscreateorg/ionic-vue.git
cd ionic-vue/
npm installTesting will require peer dependencies to be installed. Peer dependencies are:
vuevue-template-compilervue-router@ionic/core
You can install peer dependencies without modifying package.json.
npm run install.peerWe recommend trying out your ionic-vue changes in an actual app. You can do that with npm link:
cd ionic-vue/
npm link
cd ../sample-app/
npm link @modus/ionic-vueBeep is a fantastic sample application you can use to test ionic-vue.
Rollup automatically creates distribution packages.
For development build run:
npm run devFor automatic rebuild on changes run:
npm run watchFor production build run:
npm run prodMake sure you have installed peer dependencies (explained above) before running tests.
npm testThe ionic-vue project uses SonarQube's SonarCloud product for static analysis scans.
Our publicly available dashboard for the project can be found here
Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.
This project is part of Modus Labs.
This project is MIT licensed.