Ionic 4: Angular, Vue.js and React
Tags: ionic, vue, angular, react
Published: 2019-03-27 15:19:17

---
title: "Ionic 4: Angular, Vue.js and React"
published: true
description: "If you're looking to make cross platform web applications, you've undoubtedly heard of Ionic Framework. In this article, we'll look at creating a basic Ionic application with Angular, Vue and React."
tags: 
  - "Ionic"
  - "Vue"
  - "Angular"
  - "React"
---

[This is also published on Ionic Workshop.](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/)

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](https://nodejs.org) 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:

```shell
$ 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:

```shell
# 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:

```html
<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`:

```html
<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:


![Check out this vue](https://ionicworkshop.com/media/01-intro-ionic/02-ionic-vue.png)


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:

```shell
# 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:

![](https://ionicworkshop.com/media/01-intro-ionic/01-ionic-vue.png)


## Installing Ionic Vue

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

```shell
$ 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:


```javascript
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)`.

<br/>

## 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:

```html
<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](https://ionicworkshop.com/media/01-intro-ionic/02-ionic-vue.png)

> 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:

```shell
# 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:

```shell
$ 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:

```javascript
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:

```javascript
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: 

```javascript
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:

![Check out this vue](https://ionicworkshop.com/media/01-intro-ionic/02-ionic-vue.png)

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](https://twitter.com/IonicWorkshop) or at [Ionic Workshop!](https://ionicworkshop.com)