@modus/ionic-vue

Ionic-Vue

Ionic 5 integration adapters for Vue 3.

Status: Alpha

This is a prerelease, most of the functionality is in there such as the router, animations, input and overlay components. Since we are building on top of prereleases of Vue and VueRouter there may be breaking changes and bugs. The prerelease is created for early adopters to test the library and provide feedback, bug reports and feature requests.

Roadmap

Please consult the projects page for more details.

Installing / Getting started

A quick introduction of the minimal setup you need to get a hello world up and running.

npm install @ionic/core @modus/ionic-vue

Now you can use it during the initialization step of your Vue app. Note that createRouter is imported from @modus/ionic-vue and not vue-router this will allow you to get Ionic transitions between your routes out of the box.

import { createApp } from "vue";
import { createWebHistory } from "vue-router";
import { IonicVue, createRouter } from "@modus/ionic-vue";

// Ionic core styles
import "@ionic/core/css/ionic.bundle.css";

import App from "./App.vue";
import Home from "./components/Home.vue";
import Page from "./components/Page.vue";

const history = createWebHistory();
const router = createRouter({
  history,
  routes: [
    { path: "/", component: Home },
    { path: "/page", component: Page },
  ],
});

createApp(App)
  .use(IonicVue)
  .use(router)
  .mount("#app");

All components should be explicitly imported now, this allows for smaller build sizes and improved tree-shaking. Import IonApp and IonRouterView from @modus/ionic-vue, this will be your app's entry point.

<template>
  <IonApp>
    <IonRouterView />
  </IonApp>
</template>

<script>
import { IonApp, IonRouterView } from "@modus/ionic-vue";

export default {
  name: "App",
  components: {
    IonApp,
    IonRouterView
  },
};
</script>

Everything is a component now, here's an example of how you could trigger a modal

<template>
  <div class="ion-page">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Home</IonTitle>
        <IonButtons slot="start">
          <IonBackButton />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    <IonContent>
      <p>{{ msg }}</p>
      <IonButton @click="openModal">Open modal</IonButton>
    </IonContent>

    <IonModal :isOpen="isOpen" @willDismiss="closeModal">
      <h1>My modal content</h1>
      <IonItem>
        <IonLabel>My input</IonLabel>
        <IonInput v-model="msg" :cleaInput="true" />
      </IonItem>
    </IonModal>
  </div>
</template>

<script>
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonBackButton,
  IonContent,
  IonButton,
  IonModal,
  IonItem,
  IonLabel,
  IonInput
} from '@modus/ionic-vue';

export default {
  name: 'Home',
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonButtons,
    IonBackButton,
    IonContent,
    IonButton,
    IonModal,
    IonItem,
    IonLabel,
    IonInput,
  },
  data() {
    return {
      isOpen: false,
      msg: "",
    }
  },
  methods: {
    openModal() {
      this.isOpen = true;
    },
    closeModal(e) {
      console.log(e);
      this.isOpen = false;
    },
  }
}
</script>

IonicVue Router

IonicVue Router binds Ionic transitions and routing functionalities to Vue Router. It is an extension of the official Vue Router thus it can be used as a drop-in replacement with all of the methods, hooks, etc. working as expected.

Developing

Clone the repo's dev branch and install dependencies to get started with development.

git clone https://github.com/moduscreateorg/ionic-vue.git -b dev
cd ionic-vue/
npm install

We recommend trying out your ionic-vue changes in an actual app. You can do that with npm link:

cd ionic-vue/
npm link
cd ../sample-app/
npm link @modus/ionic-vue

Building

Rollup automatically creates distribution packages.

For development build run:

npm run dev

For automatic rebuild on changes run:

npm run watch

For production build run:

npm run prod

Static Analysis

The ionic-vue project uses SonarQube's SonarCloud product for static analysis scans.

Our publicly available dashboard for the project can be found here

Modus Create

Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

This project is part of Modus Labs.

Licensing

This project is MIT licensed.