This is also published on Ionic Workshop.

If you're looking to make cross platform web applications, you've undoubtedly heard of Ionic Framework. With the latest iteration of Ionic (version 4) we're no longer limited to just using Angular!

Personally, I've been a fan of the Angular ecosystem since the early days of Angular.js, but Ionic have (correctly) recognised that the modern web developer uses a variety of different frontend frameworks.

We'll be creating a basic Ionic application three times, allowing us to investigate the creation of an Ionic project in Angular, Vue and React. After following this article you'll be able to take advantage of Ionic in any framework that you want!

Prior to following this tutorial, ensure you have Node.js installed on your machine.

Installing the Ionic CLI

We can install the Ionic CLI to assist us in making Ionic applications. The Ionic CLI allows us to interact with the various services that Ionic offers, as well as initialise new projects.

Run the following inside of your terminal:

$ npm install -g ionic

With that in mind, let's create our first Ionic application using Angular!

Angular

Project creation with the Ionic CLI is currently just limited to Angular, but in the future I can imagine other templates will be created for Vue, React and others.

Run the following in your terminal to create a new project:

# Start a new Ionic and Angular project based on the blank template
$ ionic start ionic-angular blank

> don't install AppFlow at this stage

# Change directory
$ cd ionic-angular

# Run the project
$ ionic serve

The Ionic CLI already scaffolds out a basic home page for us. If we look inside of src/app/home.page.html, we'll see the following markup:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>

We can then use any Ionic component that we want. Let's make some slight changes to this by adding an ion-card, and adding a color attribute to the ion-toolbar:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Hello, Ionic!</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <img
      src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
    <ion-card-header>
      <ion-card-subtitle>Isn't it great?</ion-card-subtitle>
      <ion-card-title>Look at this view!</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Although, it does look fairly cold.
    </ion-card-content>
  </ion-card>
</ion-content>

Here's the results of doing this:

Pretty sweet! Let's move on to looking at how to do the same with Vue.js.

Vue.js

Adding Ionic to a Vue.js project is simple. We firstly generate a new Vue project with the Vue CLI:

# Ensure you have the Vue.js CLI installed
$ npm install @vue/cli

# Create a new Vue project
$ vue create ionic-vue 

> select default options

# Change directory into ionic-vue
$ cd ionic-vue

# Run the project
$ npm run serve

This creates us a new Vue.js application and opens it inside of our browser. We'll use this application as the basis for our Ionic app:

Installing Ionic Vue

Next up, we need to install Ionic into our project. Back to the command line (in a new terminal window):

$ npm install @ionic/core @ionic/vue vue-router

We've now got Ionic installed into our project. As @ionic/vue is exposed as a Vue.js plugin, we'll need to import this and tell Vue that we'd like to use it with Vue.use. Head over to main.js and do exactly that:

import Vue from 'vue';
import App from './App.vue';

import IonicVue from '@ionic/vue';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';


Vue.config.productionTip = false;

Vue.use(IonicVue);

new Vue({
  render: h => h(App)
}).$mount('#app');

What's happening here?

1. We're firstly importing IonicVue from @ionic/vue.
2. Next, we're importing the core Ionic styles from @ionic/core.
3. Finally, we're registering the IonicVue plugin using Vue.use(IonicVue).

Using Ionic

Now that we've installed and initialised Ionic inside of our Vue.js application, we're able to use Ionic components. Let's head over to App.vue and create the following:

<template>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Hello, Ionic!</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <img src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"/>
        <ion-card-header>
          <ion-card-subtitle>Isn't it great?</ion-card-subtitle>
          <ion-card-title>Look at this view!</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Although, it does look fairly cold.
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</template>

<script>


export default {
  name: 'app',
}
</script>

<style>
</style>

This gives us the following Ionic application:

Check out this vue!

Notice how we were able to take the same Ionic content from our Angular application with zero changes. This is the power of Ionic in action!

React

React offers us the same ability to create awesome Ionic projects, but with some minor differences regarding how the components are used.

Similar to Vue, we'll start off with a blank React application and add Ionic onto this with @ionic/core and @ionic/react. We'll be using create-react-app to start our React project. Run the following in your terminal:

# Install create-react-app globally
$ npm install create-react-app -g

# Create a new React project
$ create-react-app ionic-react --typescript

# Change directory
$ cd ionic-react

# Run the project
$ npm start

Installing Ionic

We'll now need to install @ionic/react, @ionic/core and react-router into our React project. Ionic currently depends on react-router, so we'll need to add it even though we're not using the router at this stage.

Run the following in your terminal:

$ npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom

Using Ionic

In a similar fashion to our previous examples, we'll start off by importing the relevant CSS files.

Head over to index.tsx and import the following:

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

We can then import individual components such as IonApp, IonHeader, IonContent and so on like so:

import {
  IonApp,
  IonHeader,
  IonContent
} from '@ionic/react';

We can now recreate the previous example of our toolbar and card. Head over to App.tsx and add the following:

import React, { Component } from 'react';

import {
  IonApp,
  IonHeader,
  IonToolbar,
  IonContent,
  IonTitle,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle,
  IonCardContent
} from '@ionic/react';

class App extends Component {
  render() {
    return (
      <IonApp>
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Hello, Ionic!</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonCard>
            <img src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
            <IonCardHeader>
              <IonCardSubtitle>Isn't it great?</IonCardSubtitle>
              <IonCardTitle>Look at this view!</IonCardTitle>
            </IonCardHeader>
            <IonCardContent>Although, it does look fairly cold.</IonCardContent>
          </IonCard>
        </IonContent>
      </IonApp>
    );
  }
}

export default App;

Tada! This gives us the following:

The major difference in the React implementation is the need to import each component individually. Aside from that, the application looks and feels identical to our other implementations!

Conclusion

This article investigated the implementation of an Ionic 4 application by using Angular, Vue and React. You should now feel comfortable using Ionic in a variety of different environments! 🙌

Did you enjoy this article? Let me know on Twitter or at Ionic Workshop!