Skip to main content

Using Mobiscroll with Ionic

Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with the tabs starter app.

Using the Mobiscroll CLI and NPM​

Step 1: Create an app​

Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app. If you already have an app at hand, you can skip this step.

info

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).

ionic start myStarterApp tabs --type=vue
cd myStarterApp

Step 2: Install the Mobiscroll CLI​

Install Mobiscroll CLI from NPM. You'll only have to do this step once on a single development machine. You won't need to repeat this on other machines or production servers.

$ npm install -g @mobiscroll/cli

Step 3: Configure the project using the CLI​

To install the Mobiscroll library from NPM, you will need to open a terminal window in the root folder of you project and run the following command:

mobiscroll config ionic
The CLI handles everything — don't do these manually
  • Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
  • Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
  • Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.
info

If you're working behind a proxy, additional configuration might be needed. Please check the proxy configuration options of the CLI.

The command will ask for your credentials (email and password). If you already have a mobiscroll account but you are unsure about the details, you find them on your account page. If you don't have an account yet, you can start a trial in no time following these steps.

info

If you already have a license, it is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Step 4: Importing Mobiscroll to your page​

You will need to import the component you want to use and the css from the mobiscroll package. For example, let's import the Datepicker to the src/views/Tab1Page.vue page.

src/views/Tab1Page.vue
<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
} from "@ionic/vue";

import { MbscDatepicker } from "@mobiscroll/vue"; /* or import any other component */
import "@mobiscroll/vue/dist/css/mobiscroll.min.css";
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
      <MbscDatepicker theme="ios" />
    </ion-content>
  </ion-page>
</template>

Step 5: Let's see if Mobiscroll was installed correctly​

To build the app just run the serve command in the CLI:

ionic serve

At this point you have completed the setup. Go build great things!

One more thing

Setting up for CI/CD

The config command in step 3 saves your access token for the Mobiscroll NPM registry in the .npmrc file in the project root. Don't commit the token — keep it in an environment variable and commit a file that only references the variable. For the setup, see Using the npm auth token securely.