Skip to main content

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
The CLI handles everything — don't do these manually
  • Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
  • Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
  • Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.
info

Installing the trial requires Mobiscroll CLI 1.14.0 or newer. To update it, run npm install -g @mobiscroll/cli.

If a trial install fails with an integrity or checksum error, see Integrity errors with trial packages.

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
The CLI handles everything — don't do these manually
  • Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
  • Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
  • Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.
info

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

Setting up for CI/CD​

When the config command logs you in, it saves your access token for the Mobiscroll NPM registry in the .npmrc file in the project root (and in .yarnrc.yml with Yarn 2 and newer). The token works like a password, so don't commit it to your repository. Keep it in an environment variable instead, and commit a file that only references the variable:

.npmrc
@mobiscroll:registry=https://npm.mobiscroll.com
//npm.mobiscroll.com/:_authToken=${MOBISCROLL_NPM_TOKEN}

Then set the MOBISCROLL_NPM_TOKEN environment variable on your machine and in your CI/CD service. For pnpm, Yarn and Bun setups, Docker builds, and step-by-step instructions for GitHub Actions, GitLab CI/CD, Azure Pipelines, Vercel and Netlify, see Using the npm auth token securely.

info

It is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Installing manually​

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.

1. 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.

2. 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​

For the components to work, 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.

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