Using Mobiscroll with Vue.js 2.0

The Mobiscroll plain js api can be used the easiest way with Vue.js 2.0. 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.

$ 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 * as 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";

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 * as 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.datepicker('#md-birthday', {
            max: new Date(),
            onChange: (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.datepicker('#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 onChange Mobiscroll event. The onChange event is triggered every time when a value is cahnged in a Mobiscroll component.

data () {
    return {
        birthday: ''
    }
},
mounted() {
    // init mobiscroll date component
    mobiscroll.datepicker('#md-birthday', {
        max: new Date(),
        onChange: (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.)

<template>
<div class="hello">
    <label>
    <input mbsc-input data-label="Input label" />
    </label>
    <label>
    <input
        type="checkbox"
        mbsc-checkbox
        data-label="The label of the checkbox"
    />
    </label>
    <label>
    <select data-label="Choose one" mbsc-dropdown id="choose">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    </label>
    <label>
    <input
        mbsc-switch
        type="checkbox"
        data-label="Front door"
        data-description="Get notifications when someone sends you a message"
        @change="updateMessageCheckbox"
    />
    </label>
</div>
</template>
<script>
    import * as mobiscroll from "@mobiscroll/javascript";
    import "@mobiscroll/javascript/dist/css/mobiscroll.min.css";

    export default {
    name: "HelloWorld",
    data() {
        return {
        showMessageNotification: true,
        updateMessageCheckbox: () => {
            this.showMessageNotification = !this.showMessageNotification;
        },
        };
    },
    mounted() {},
};
</script>