General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

Using Mobiscroll with Vue.js

The Mobiscroll plain js api can be used the easiest way with Vue.js. Installing Mobiscroll in your Vue.js app takes a couple of minutes. Let's see how you can start with a simple app.

Start a trial

First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.

This is how the free trial works:

  1. You can try Mobiscroll for free.
  2. The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
    Read about the differences between trial and licensed products.
  3. You can upgrade to the licensed product at any time during or after your trial.

Enter your first name, set a password and you're ready to go!

Using the Mobiscroll CLI and NPM to install it in your Vue.js app (PREFERRED WAY)

Step 1: Create an app

Assuming you have node and vue-cli already installed (if not, you can read more about vue-cli here), use the CLI to create a new app.
If you already have an app at hand, you can skip this step.

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

Step 2: Install the Mobiscroll CLI and configure the app

Install Mobiscroll CLI from NPM (you'll only have to do it once).

$ npm install -g @mobiscroll/cli

Run mobiscroll config javascript in your terminal window.

$ mobiscroll config javascript

Step 3: Import mobiscroll resources to your vue component

import mobiscroll from '@mobiscroll/javascript';
import '@mobiscroll/javascript/dist/css/mobiscroll.min.css';

If the application is configured with the cli's --no-npm mode, the js import will remain the same, only the css import location needs to be modified to the following:

import "@mobiscroll/javascript/dist/css/mobiscroll.javascript.min.css";
Importing css in the vue component may depend on your project's configuration. You can also load the mobiscroll css into the index.html and it will be available in the whole application.

Step 4: Let's see if Mobiscroll was installed correctly

To test it let's add the following example to the src/components/HelloWorld.vue

<template>
  <div class="hello">
    <input id="-md-birthday" type="text"  >
  </div>
</template>
<script>
    /* import mobiscroll css & js*/
    import mobiscroll from '@mobiscroll/javascript';
    import '@mobiscroll/javascript/dist/css/mobiscroll.min.css';

    export default {
      name: 'HelloWorld',
      data () {
        return {
            birthday: ''
        }
      },
      mounted() {
        // init mobiscroll date picker
        mobiscroll.date('#md-birthday', {
            max: new Date(),
            onSet: (ev, inst) => {
                // set the birthday field manually to update the view
                this.birthday = inst.getVal();
            }
        })
      }
    }
</script>

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

$ npm run serve

Using the Mobiscroll components in Vue.js

Initializing components

The Mobiscroll components should be initialized in the mounted Vue.js life cycle event to make sure that the element where the Mobiscroll component will be initialized is present in the DOM.

mounted() {
    // init Mobiscroll calendar component
    mobiscroll.calendar('#md-birthday');
}

Update selected values manually

Using Vue.js value bindings along with a Mobiscroll component on the same element would mix up the selected value of the mobiscroll component. The recommended way is to manually update the selected value on the onSet Mobiscroll event. The onSet event is triggered every time when a value is set in a Mobiscroll component.


data () {
    return {
        birthday: ''
    }
},
mounted() {
    // init mobiscroll date component
    mobiscroll.date('#md-birthday', {
        max: new Date(),
        onSet: (ev, inst) => {
            // set the birthday field manually
            this.birthday = inst.getVal();
        }
    })
}

Using form components

The Mobiscroll form component adds styling to standard html element and it's usage is similar to the native form elements. The Vue.js v-model directive need to be used with the .lazy modifier in order to ensure that the form elements are updated correctly.(Some of the Mobiscroll form elements(Slider, Switch, Progress, Stepper) will only update if the native change event is triggered.)

Handle form elements change
<template>
    <div id="settings-form">
        <div class="app-header">
            <h1>Settings</h1>
        </div>
        
        <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Sound</div>
            <label>
                Ring
                <input type="range" data-icon="phone" v-model.lazy="ringVolume">
            </label>
            <label>
                Media
                <input type="range" data-icon="music" v-model.lazy="mediaVolume">
            </label>
        </div>
         <div class="mbsc-form-group md-swith-cont">
            <div class="mbsc-form-group-title">Notifications</div>
            <label >
                Message
                <span class="mbsc-desc">Get notifications when someone sends you a message</span>
                <input type="checkbox" data-role="switch" @change="updateMessageCheckbox" checked>
            </label>
            <label>
                Birthdays
                <span class="mbsc-desc">Get notifications about your friends birthdays</span>
                <input type="checkbox"  data-role="switch" @change="updateBdCheckbox" checked>
            </label>
        </div> 
    </div>
</template>

<script>
    import mobiscroll from '@mobiscroll/javascript';

    export default {
      name: 'settings',
      data () {
        return {
            ringVolume: 85,
            mediaVolume: 62,
            showMessageNotification: true,
            showBDNotificatation: true,
            updateMessageCheckbox: () => {
                this.showMessageNotification = !this.showMessageNotification;
            },
            updateBdCheckbox: () => {
                this.showBDNotificatation = !this.showBDNotificatation;
            }
        }
      },
      mounted() {
        // init form
        mobiscroll.form('#settings-form', { theme: 'ios' }); 
      }
    }
</script>

Using Vue.js directives

Vue.js directives can be used to help generating markup for mobiscroll components.

Navigation markup generated with v-for
<template>
  <div id="app" class="app-page">
      <router-view class="app-tab"></router-view>
      
      <! -- generate navigation markup --> 
      <ul id="tabs">
          <li v-for="item in tabsData" 
              v-bind:data-icon="item.icon"
              v-bind:data-tab="item.url"
              v-bind:data-selected="$route.path == item.url"
          >
              {{ item.text}}
          </li>
      </ul>
  </div>
</template>
<script>
  import mobiscroll from '@mobiscroll/javascript';

  export default {
    name: 'app',
    data () {
      return {
        tabsData: [
          {
            text: 'Home',
            url: '/',
            icon: 'home'
          },
          {
            text: 'Settings',
            url: '/settings',
            icon: 'cogs'
          },
          {
            text: 'Profile',
            url: '/profile',
            icon: 'user4'
          }
        ]
      }
    },
    mounted () {
        // init navigation component
        mobiscroll.nav('#tabs', {
            onItemTap: (event, inst) => {
                this.$router.push(event.target.getAttribute('data-tab'));
            }
        });
    }
  }
</script>

Other ways to get started

To see how mobiscroll is installed in a Vue.js project you can download the Starter for Vue.js app.