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
Ionic integration adapters for Vue.
A quick introduction of the minimal setup you need to get a hello world up & running.
npm install @modus/ionic-vueNow you can use it during the initialization step of your Vue app.
import Vue from 'vue'
import { Ionic, IonicVueRouter, IonicAPI } from '@modus/ionic-vue'
import Home from './Home.vue'
import Page from './Page.vue'
Ionic.init();
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 your 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 abstracts DOM interaction of Ionic UI components inside a Vue application and can be used via this.$ionic.
Vue.component('Foo', {
methods: {
notify() {
this.$ionic.alertController
.create({
header: 'Notification',
subHeader: null,
message: 'Hello World',
buttons: ['Bye'],
})
.then(a => a.present())
.catch(console.error)
},
},
})IonicVueAPI supports the following Ionic controllers:
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. working as expected.
- Basic routing
- Named views
- Named views with transitions
- Custom transitions
- Mix Ionic and custom transitions
- Ionic tabs
- Ionic controllers
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
You can install peer dependencies without modifying package.json.
npm install vue vue-template-compiler vue-router --no-saveWe 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.