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:
- You can try Mobiscroll for free.
-
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. - 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 --version=4
in your terminal window.
$ mobiscroll config javascript --version=4
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";
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 cahnged 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.)
<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.
<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>