Skip to main content
Version: 5.25.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.

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.

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';

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

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

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