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.

Transcript

2. Ionic And Vue
 For Fast Mobile Apps Mike Hartington Ionic, GDE @mhartington
4. 5 Million Apps Created 250,000
 Monthly Active Devs 100’s
 World-wide Meetups Top 40
 OSS GitHub Project
6. A long time ago…
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
12. Navigation hooks Tabbed-based interface CLI integration Filling the gaps in @ionic/vue
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. capacitor.ionicframework.com 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> github.com/ionic-team/ionic/tree/master/vue