Ionic-Vue Workflow for a single app

Today i'm gonna work with Ionic with Vue (opens new window).

So first i'll follow the Ionic Guide (opens new window) and make a briefly summarize of core concepts.

UI Components

Ionic Framework is a library of UI Components, that a reusable and follow web standards (opens new window) using HTML, CSS, Javascript. Also it's highly customizable.

Platform Continuity

Is a built-in feature that allow app developers use component and run such applications with look & feel to which platform is running. For iOS it use iOS design language (opens new window) and for Android & PWA (By default) it use Material Design (opens new window).

Navigation

Ionic v.4.0.0 also know as Neutronium, define so far two kind of navigation.

• Browser navigation

  It's a linear history navigation stack, you go forward or back

• App navigation

  Often use parallel, non-linear navigation, example: you can have a tabs with three items (Home, Like, Contacts) where one of them leads to another pages.

Native Access

By using web view to run ionic apps, it can be run virtually in anyplatform: Desktop, mobile, refrigerators, cars...

Thanks to Cordova (opens new window) & Capacitor (opens new window), developers are able to access to native directive easily.

Theming

At the core Ionic Framework is using Css and with Css Variable now is more easy to customize your applications. Ionic theme also encourage to modify the colors to match a identity branch.

OK ENOUGH with the core concepts. Let's get's our hands dirty.

Requirements

• Git (opens new window)

• Node (opens new window)

  For linux a node manager version (opens new window)

Create a repo on github and later.

git init
npm install -g ionic

here i'm gonna clone a Ionic vue starter (opens new window) from Walter van der Giessen (opens new window) (All thanks goes to him).

git clone https://github.com/W4G1/ionic-vue-starter

This repo actually comes with 3 powerfull, widely use and a huge community support tools such as Vue-router (opens new window), Vuex (opens new window) and Vue-cli (opens new window)

npm install -g @vue/cli
git clone https://github.com/W4G1/ionic-vue-starter
npm install

after that, for local browser development

npm run serve

Let's see if this really working. In the HelloWorld.vue component i set a basic toolbar from Ionic.

<ion-toolbar>
  <ion-segment>
    <ion-segment-button value="all" checked>All<ion-segment-button>
    <ion-segment-button value="favorites">Favorites<ion-segment-button>
  </ion-segment>
</ion-toolbar>

And it worked

WARNING

Due the recently adopt of vue from Ionic team, you should go with carefull to avoid cancer colon from frustation.

This is under heavy development right now, @ionic/vue still in alpha stage to this date (14/3/19).

Ionic Team Vue (opens new window)