Mobile Document Scanner - Vue

This article builds on the prerequisite MDS developer guide for plain JavaScript; please read it before proceeding.

Mobile Document Scanner integrates easily with Vue applications. Just as in plain JavaScript, you can add document scanning in your Vue application in just a few lines of code, and achieve most customizations through the same accessible configuration object.

Features

Easy integration with pre-built UI
Render MDS inside a Vue component
Capture and process documents from video stream
Automatic document detection and cropping
Mobile-optimized scanning interface
TypeScript support with type definitions

Requirements

Node.js 20.19.0 or later
Base requirements

License

Get a Trial License

Try MDS by requesting a trial license through our customer portal. You can renew the license twice for up to a total of two months of free access.

Get a Full License

Quick Start

We publish MDS library files on npm to make them simple to reference from a CDN. We reference the library files in our ready-made Hello World sample for Vue included in our GitHub source repository:

Download MDS from GitHub as a compressed folder.
Extract the contents of the archive, and open the extracted directory in a code editor.
Set your license key in the Vue framework sample:
1. Open the sample at /samples/frameworks/vue/src/App.vue.
2. Search for "YOUR_LICENSE_KEY_HERE", then replace it with your actual license key.

Install Dependencies

npm install

Start the App

npm run serve

Then open http://localhost:8080/ to view the sample app.

Self-Host Resources

You can self host the resources for the Hello World by following a few simple steps. Refer to the plain JavaScript self-hosting guide for details.

Set File Paths

First we set MDS to look resource paths where we will place the resources later:

const documentScanner = new Dynamsoft.DocumentScanner({
  license: "YOUR_LICENSE_KEY_HERE",
  scannerViewConfig: {
    cameraEnhancerUIPath: "dist/libs/dynamsoft-document-scanner/dist/document-scanner.ui.html",
  },
  engineResourcePaths: {
    rootDirectory: "dist/libs/"
  },
});

Move Resources

Now, add a script (get-libs) to automatically move the resources to their destination when building the project (build) in samples/framework/vue/package.json:

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build && npm run get-libs",
  "get-libs": "npm install --no-save dynamsoft-capture-vision-data dynamsoft-capture-vision-bundle && npx mkdirp /dist/libs && npx cpx 'node_modules/dynamsoft-*/**/*' dist/libs/ --dereference",
  "preview": "vite preview"
},

Customization

Please check the official documentation.

Support

If you have any questions, feel free to contact Dynamsoft Support.