• Stars
    star
    272
  • Rank 151,235 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vuejs integration for Ionic versions 4 and 5

Ionic-Vue

CircleCI codecov SonarQube PRs Welcome MIT Licensed

Ionic integration adapters for Vue.

@modus/ionic-vue

Ionic-Vue vs @ionic/vue

Ionic-Vue codebase has been contributed to the Ionic core and as @ionic/vue. However, @ionic/vue provides limited support to Ionic v4.

The amazing Ionic team is always looking to bring the most modern of browser capabilities to their framework. The official Vue support will land after Vue 3 has stabilized.

Modus Create engineers continue to maintain this library to support the community that wants to create beautiful mobile apps with Vue and Ionic.

Our goal is to allow developers to be up to date with the latest advances of Ionic and Vue. Thus we are delivering features and bug fixes as fast as possible.

Roadmap

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
Restore scroll on navigation ✔️ - When going back through history restore the scroll position
Unit tests Outdated as were originally written in plain JS, need to be updated for TS

Ionic versions 4 and 5

⚠️ Moving forward all versions of ionic-vue will be supporting Ionic 5 only, if you'd like to continue using Ionic 4 please use ionic-vue version 1.3.4

Vue 3

🚧 We are actively developing the next major version of this library. It supports Vue 3 and all of the new APIs like Composition, new transition features, etc. You can track the progress in the dev branch.

Installing / Getting started

A quick introduction of the minimal setup you need to get a hello world up and running.

npm install @ionic/core @modus/ionic-vue

Now 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

IonicVue abstracts DOM interaction of Ionic UI components inside a Vue application.

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

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.

Developing

Setting up Dev

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 install

Testing will require peer dependencies to be installed. Peer dependencies are:

  • vue
  • vue-template-compiler
  • vue-router
  • @ionic/core

You can install peer dependencies without modifying package.json.

npm run install.peer

We 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-vue

Beep is a fantastic sample application you can use to test ionic-vue.

Building

Rollup automatically creates distribution packages.

For development build run:

npm run dev

For automatic rebuild on changes run:

npm run watch

For production build run:

npm run prod

Tests

Make sure you have installed peer dependencies (explained above) before running tests.

npm test

Static Analysis

The 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

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.

Modus Create

This project is part of Modus Labs.

Modus Labs

Licensing

This project is MIT licensed.

More Repositories

1

budgeting

Budgeting - React + Redux + Webpack (tree shaking) Sample App
JavaScript
982
star
2

react-dynamic-route-loading-es6

Auto chunking and dynamic loading of routes with React Router and Webpack 2
JavaScript
296
star
3

beep

BEEP Account Security Scanner - Detect if your credentials have been compromised (Vue + Ionic)
Objective-C
157
star
4

gimbal

Web Performance Auditing tooling
TypeScript
115
star
5

react-navigation-redux-sample

Sample application that uses React Navigation and Redux
JavaScript
92
star
6

slow

slow down a Linux network device to lower speeds (T1, 3G, 28.8k modem, etc)
Shell
69
star
7

webpack-react-es6-production-optimization

Optimize Webpack + React + ES6 + Babel app production build file size
JavaScript
57
star
8

extjs-reactjs-examples

Code examples for ExtJS to React transition
JavaScript
50
star
9

ionic-vue-examples

Examples for @ionic/vue
Vue
48
star
10

rn-listview-sections-blog

React Native ListView with Section Headers blog code
JavaScript
48
star
11

budgeting-sample-app

Budgeting - React + Redux + Webpack Sample App
JavaScript
46
star
12

alexa-skill-demo

Alexa Skill Demonstration using Python
Python
44
star
13

DiscoverMusic

Sencha Discover Music Repository
JavaScript
44
star
14

swift-modules-for-react-native

Supporting code for Swift Modules for React Native Blog Post by Mike Schwartz
Objective-C
43
star
15

TouchDJ

Example repository for a technical talk given at SenchaCon 2013
JavaScript
42
star
16

devops-infra-demo

Growing repository of Infrastructure as Code demos (initially created for DevOps Wall Street)
Shell
34
star
17

sencha-touch-in-action-examples

Sencha Touch in Action Examples
JavaScript
31
star
18

evade-arduboy-game

An Arduboy game, written as a gift for Modus Create clients for the 2016 holiday season.
C
27
star
19

python-automation-boilerplate

Python automation boilerplate
Python
26
star
20

cordova-swift3-plugin-example

Swift 3 Cordova plugin example to support blog post.
Swift
23
star
21

lambda-redirector

Redirect an entire website using AWS Lambda
JavaScript
22
star
22

modus-create-sencha-plugin-pack

Sencha Touch 2 and Ext JS 4 Plugins
JavaScript
21
star
23

extjs-in-action-examples

Ext JS in Action SE Examples
JavaScript
20
star
24

evade2

EVADE2 Source code for the Arduboy platform
C
18
star
25

creative-engine

Modus Create's portable Game Engine. Runs on the LDK Game console, desktop macOS and Linux
C
18
star
26

cucumber-watir

Test harness for automated functional testing of web applications
Ruby
18
star
27

ionic-seed

Boilerplate Ionic V1 seed project using ES6, Babel, Webpack, and Karma/Mocha/Chai/Sinon for testing.
JavaScript
18
star
28

cordova-swift-plugin-example

Cordova Swift Plugin Example for Blog Post
Swift
16
star
29

cordova-plugin-example

Example Cordova plugin for iOS and Android to support blog post.
JavaScript
15
star
30

d3-mobile-companion

Diablo 3 Mobile Companion
JavaScript
12
star
31

capsule

Automated CLI for static web application hosting on AWS using S3 buckets
JavaScript
12
star
32

network-rgb-matrix-display

A library for helping drive large arrays of RGB Matrices with Raspberry Pis
CMake
12
star
33

touch-node

Sencha Touch NPM module
JavaScript
11
star
34

google-maps-polygon-center-approximation-blog

Google Maps Polygon Center Approximation Demo for Blog Post
JavaScript
9
star
35

ngbp-gulp

A modified version of the ngBoilerplate that replaces Grunt with gulp, and uses the Angular Material library instead of Boostrap.
JavaScript
9
star
36

react-london-2022

React Advanced London 2022 Workshop
TypeScript
8
star
37

ciscospark-jira

JIRA bot for Cisco Spark
JavaScript
8
star
38

modite-adventure

Modus Create's 2020 Holiday Game for the LDK Game console.
C++
7
star
39

genus

Modus Create's 2018 Holiday Game for the ODROID GO
C++
7
star
40

ardugo

ArduGo is a Go game for the Arduboy game console.
C++
7
star
41

custom-components-nativescipt

Exploring how to write custom components in NativeScript
JavaScript
7
star
42

vue-lambda

VueConf lightning talk
JavaScript
6
star
43

custom-cordova-plugin-blog

Example repository for this article: https://moduscreate.com/blog/building-a-custom-phonegap-plugin-for-ios/
Objective-C
6
star
44

form-preso

Sample code for ExtJS Forms Presentation
CSS
6
star
45

systat

System Status for Mac/Windows/Linux
C++
5
star
46

newblogbot

Simple AWS Lambda Bot that posts new blog entries to Slack.
JavaScript
5
star
47

labs

Modus Create Labs web site
JavaScript
5
star
48

protractorStarterApp

Demonstrating how to setup functional testing with Protractor
JavaScript
5
star
49

engineering-experiments

TypeScript
5
star
50

hog-store

Web app example used to demonstrate performance improvements
JavaScript
5
star
51

ciscospark-survey-bot

Cisco Spark bot for for conducting surveys
JavaScript
4
star
52

phonegap-ios8-memory

A simple app to test memory accretion with iOS8
C++
4
star
53

ion-meetups

Ionic Meetups - Showcase of Ionic v3 to v4 migration process
TypeScript
4
star
54

web-audio-api

Examples of the early WebAudio API
JavaScript
4
star
55

Ext5Tablet

Example of sharing code in Ext JS 5 and Sencha Touch 2 apps with Sencha Space integration.
JavaScript
4
star
56

stop-watch-box

A simple Stop-Watch-Box Web Component created with Stencil
TypeScript
3
star
57

constellation

A Digital Transformation framework for containerizing microservices
CSS
3
star
58

nightwatch-cucumber-demo

Demo for the Nightwatch-Cucumber blog post
JavaScript
2
star
59

react-exercise

React exercise for potential Modus Create team members
JavaScript
2
star
60

quarkus-demos

An example repository to support this youtube video: https://www.youtube.com/watch?v=S_DV2boUMPA
Java
2
star
61

accordian-panels

Java
2
star
62

notes-app-ionic-pro

This is sample application built with Ionic to demonstrate the tools & services provided by Ionic Pro.
Shell
2
star
63

App-AddressBook

DreamFactory
JavaScript
2
star
64

cordova6templates

Cordova 6 template demo
2
star
65

modus-react

Modus React App Scaffolding
JavaScript
2
star
66

CordovaXcodeSchemeFix

Demonstration of how to programmatically add schemes to a Cordova iOS project to improve CI workflow
CSS
2
star
67

react-redux-esnext-webpack

React JS boilerplate with Redux, Babel, Webpack, ESNext support
JavaScript
2
star
68

CordovaCSPBlogApp

Supporting App Code for Cordova Content Security Policy / iOS 9 App Transport Security Blog Entry
JavaScript
1
star
69

cordova-merge-example

Example App to support Cordova merge feature blog post.
CSS
1
star
70

youtube-slack-bot

R&D For a youtube-slack bot
JavaScript
1
star
71

react-native-device

React Native Device Module
Objective-C
1
star
72

azure-devops-boards-scripts

Repository to store Azure DevOps Boards scripts.
Shell
1
star
73

codeceptjs-nightmare-harness

A simple test harness for CodeceptJS + Nightmare
JavaScript
1
star
74

react-chat

React Chat demo with React Create App and Firebase
HTML
1
star
75

battleship-meteor

Crysfel, Dave, and Chris Meteor JS skillshare
JavaScript
1
star
76

Arduboy_Wall

Experimental repo to make a "life size" Arduboy.
C++
1
star
77

brickout

Game example using Creative Engine
C++
1
star
78

internship-job-portal

Open Source example for interns to work with.
JavaScript
1
star
79

protrangular2-demo

Demo for NoVAJS talk on getting started with Protractor in Angular 2
JavaScript
1
star
80

ruby4windows

RETIRED - Portable Ruby for Windows v2.1.3 x64 with a bunch of utilities
1
star
81

cucumber-training

Cucumber Training
JavaScript
1
star
82

qa-dept

A place to host QA Dept experiments
JavaScript
1
star
83

ext-react

Helping Ext JS developers get up to speed with React
JavaScript
1
star
84

touch-2.2.0-sandbox

Sandbox environment for blog posts, etc.
JavaScript
1
star
85

framework-shootout-ionic2

Hybrid Mobile Framework Shootout - Ionic 2
TypeScript
1
star
86

guidelines

ModusCreateOrg repository hosting guidelines
1
star
87

javascript-challenge

A simple JavaScript challenge to help people see if they are a fit for an engineering role at Modus Create.
1
star