Skip to main content
Version: 5.28.0

Getting started with Mobiscroll for Vue

Install the CLI​

The first step you need to install the Mobiscroll library into your app is to install the Mobiscroll CLI.

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

npm install -g @mobiscroll/cli
info

On Windows client computers, the execution of PowerShell scripts is disabled by default. When using Powershell, to be able to install the Mobiscroll CLI you will need to set the following execution policy:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Make sure to read the message displayed after executing the command and follow the instructions.

Starting with the trial​

Start a free trial by entering your email address on the Mobiscroll homepage and create your account. When asked, enter your first name, set a password and you're ready to go!

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.

Installing a trial package​

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

mobiscroll config vue --trial

Installing from NPM​

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 vue
info

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

info

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Installing a downloaded package​

On the download page a custom package can be built by picking only the components, themes, languages and additional modules you need.

When building your package, select the required components and other resources, then hit the download button.

Copy Mobiscroll into your app.​

Extract the zip file you just downloaded, then grab the js, src and css folders and copy it into src/lib/mobiscroll folder of your JavaScript app. If there is no such folder available, you can create it.

Run the config command​

Run the config command in the root folder of your app in a terminal window.

mobiscroll config vue --no-npm

Use the components​

To test the installation, create a single file component (SFC), import the Eventcalendar component in it. You can also pass it a view option and/or set a specific theme if you want.

You will also need to import the css file of the installed library under the node_modules folder (at @mobiscroll/vue/dist/css/mobiscroll.min.css). If you are using SCSS, you will also find a full and a modular .scss file in the same directory.

In case you installed the library from a downloaded package and did not include the Eventcalendar in the package, you can choose a different component as well.

<script setup>
  import { ref } from 'vue';
  import { MbscEventcalendar, setOptions, localeEnGB } from '@mobiscroll/vue';
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

  setOptions({
    locale: localeEnGB,
    theme: 'ios',
    themeVariant: 'light',
  });

  const myView = ref({
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  });
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>