Skip to main content

Using Mobiscroll with the source code

Overview​

The following guide will help in using the development packages (a.k.a. source code) of Mobiscroll.

info

To have access to the source code you will need a Complete License or a License with the Source Code Addon. You can find more details on licenses on the pricing page.

The source code can be downloaded from the download page. If you have access to the development packages, a dropdown will be there with the compression level label. Select the development level if it's not selected already from the dropdown. After selecting the components, themes, languages and icon packs you want to include hit the download button. You will get a zip file with the source code in it.

The source code of Mobiscroll is written in TypeScript and SASS, but a compiled JavaScript and CSS version is also supplied with the packages built on our download page.

Package contents​

The package comes with two folders: src and dist. The full source code of the selected components can be found under the src folder. The component logic is in TypeScript (.ts) files, while the component templates are supplied as compiled render functions (.jsx files) with their type definitions (.d.ts files) next to them. The contents of the dist folder is a ready to use bundle, with all the components from the package, that is compiled but still unminified.

For projects that don't use TypeScript, the compiled bundle is recommended: import the components from dist/esm5/mobiscroll.vue.js and load the styles from dist/css/mobiscroll.vue.css. Since it is not minified, the source can be modified in the bundle file directly.

Using the source​

When you want to use the actual source code in your project, you will need to copy over the contents of the src folder to your project.

The component templates are JSX render functions, so the source needs to be compiled with Vue's JSX transform (@vue/babel-plugin-jsx). The source files also import SASS files and use the tslib helpers. In case of a Vite project, the required packages can be installed with the following command:

npm install sass tslib @vitejs/plugin-vue-jsx --save-dev

Then add the JSX plugin to the Vite config, next to the Vue plugin:

vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [vue(), vueJsx()],
});
info

In a Vite project, the build still succeeds without the JSX plugin, but the components fail at runtime with a React is not defined error.

tip

In a TypeScript project, the verbatimModuleSyntax and noImplicitThis options need to be turned off for the source code to compile. Be aware that some projects have these options turned on by default (for example projects using the @vue/tsconfig base configuration). You can turn them off in the tsconfig.json file in the root of your project.

tsconfig.json
{
  "compilerOptions": {
    "verbatimModuleSyntax": false,
    "noImplicitThis": false,
    ...
  }
}

Each component can be imported from its respective file under src/vue/components/{component}. The types of the component can be imported from the same file.

When importing the components from their own files, the base theme files need to be loaded as well. The base themes and custom themes need to be loaded only once in the project.

Using the Datepicker from the source
<script setup lang="ts">
import { ref } from 'vue';
import './my-mobiscroll-dir/core/custom-themes';
import './my-mobiscroll-dir/core/icons.scss';
import './my-mobiscroll-dir/core/themes';
import { MbscDatepicker } from './my-mobiscroll-dir/vue/components/datepicker';

const myDate = ref<Date | null>(null);
</script>

<template>
  <MbscDatepicker v-model="myDate" select="date" display="inline" />
</template>