Ionic And Vue
 For Fast Mobile Apps

Ionic And Vue
 For Fast Mobile Apps

Vue as a framework prides itself for providing an excellent developer experience out of the box so devs can build awesome apps with it. Ionic as a component library shares these same values while providing a great UI for any kind of app. In this talk, we'll look at how we can use Ionic and Vue together to quickly create a compelling mobile application that can be deployed to the iOS, Android, and the Web.


Mike Hartington

March 27, 2019


  1. None
  2. Ionic And Vue
 For Fast Mobile Apps Mike Hartington Ionic,

    GDE @mhartington
  3. None
  4. 5 Million Apps Created 250,000
 Monthly Active Devs 100’s

    Meetups Top 40
 OSS GitHub Project
  5. None
  6. A long time ago…

  7. None
  8. Custom Elements Core Polyfills that load on demand Support for

    all the frameworks Web Components Stability through Web Standards
  9. + @ionic/vue [ALPHA]\

  10. But something 
 was missing

  11. None
  12. Navigation hooks Tabbed-based interface CLI integration Filling the gaps in

  13. Routing. It's like a series of tubes. Provide Animations and

    gestures Handle View Caching Support vue-router
  14. export default new IonicRouter({ mode: 'history', base: process.env.BASE_URL, routes: [

    { path: '/', name: 'home', component: () => import('./views/Home.vue') }, { path: '/about/:id', name: 'about', component: () => import('./views/About.vue') } ] }); <template> <!-- App.vue - <ion-app> <ion-vue-router /> </ion-app> </template>
  15. Best of Ionic and Vue Router Animations are handled in

    Ionic Reads vue-router config data Uses existing vue-router API
  16. Tabs based navigation for native Each tab has it's own

    stack Maintaining parallel histories Tabbed UI If you thought navigation 
 was confusing...
  17. { path: '/tabs', component: ()  import('@/views/Tabs.vue'), children: [ {

    path: 'tab1', components: { tab1: ()  import('@/views/Tab1.vue') } }, ] } <ion-tabs> <ion-tab tab="tab1"> <ion-vue-router name="tab1"></ion-vue-router> </ion-tab> <ion-tab-bar slot="bottom"> <ion-tab-button tab="tab1"> <ion-label>Tab One</ion-label> <ion-icon name="Flash"/> </ion-tab-button> </ion-tab-bar> </ion-tabs>
  18. Multiple outlets match to routes Each tab has it's own

    stack Maintaining parallel histories FEEDBACK IS WANTED Navigation is complex
  19. Vue CLI The best part of any Vue project Easy

    to bootstrap a project Configurable CLI GUI
  20. Add Ionic to an existing project Simplified starting process Use

    and much or as little vue-cli-plugin-ionic Add Ionic to an existing project
  21. But wait There’s more!

  22. Theming with CSS Variables. Dynamic values: NO JS Same CSS

    you already know Dark Mode, anyone?
  23. Ionic CLI integration. Coming Soon Start up a new Ionic

    project Vue specific starter templates Proper Vue project set
  24. Deploy to Native, web, and beyond. iOS, Android, PWA, Web,

    Desktop 100% open web, future-proofed 100% code reuse, runs anywhere
  25. A new native bridge for cross-platform web apps.

  26. There’s one more thing...

  27. @ionic/vue [BETA]\

  28. TL;DR Ionic and Vue are a perfect match. Vue is

    a great framework for great apps Simple concepts, ease of development Ionic provides great UI for great apps Ionic + Vue =
  29. Thank you. </presentation>