diff --git a/getstarted/vue.md b/getstarted/vue.md index 499bf06d..5dfe3140 100644 --- a/getstarted/vue.md +++ b/getstarted/vue.md @@ -12,6 +12,13 @@ permalink: /indepth/development/vue.html [Vue](https://vuejs.org/) is a progressive framework for building user interfaces. Check out the following guide on how to integrate `DWT` into a Vue application. +
+ +- [Vue](#vue) +- [Vue 3](#vue3) + +
+ ## Preparation Make sure you have [node](https://nodejs.org/), [yarn](https://yarnpkg.com/cli/install), and [Vue CLI](https://cli.vuejs.org/) installed. `node 14.4.0` , `yarn 1.22.4`, and `@vue/cli 4.46` are used in the example below. @@ -203,4 +210,200 @@ If you have installed `DWT` and have configured a valid `ProductKey` . You will You should be able to open a file or capture an image. +
+ +
+ +## Preparation + +The recommended version for Vue and Node is `v3.2.22` and `v16+` respectively. + +## Create the sample project + +### Create a bootstrapped raw Vue 3 application + +Assume the project name is "dwt-vue3" + +``` cmd +npm init vue@latest +``` + +### Navigate to the root directory of the application and install the `dwt` and `ncp` package + +``` cmd +cd dwt-vue3 +``` + +``` cmd +npm install +``` + +``` cmd +npm install dwt +``` + +``` cmd +npm install ncp +``` + +## Configure the project + +Open `package.json` and change `scripts` as seen below: + +``` json +"scripts": { + "dev": "ncp node_modules/dwt/dist public/dwt-resources && vite", + "build": "ncp node_modules/dwt/dist public/dwt-resources && vite build", + "preview": "vite preview" +}, +``` + +> The change ensures the static files required to run `DWT` are copied over to the resulting built project. + +## Start to implement + +### Edit the default component + +Create `localScan.vue` in the folder /src/components + +```html + + + + + +``` + +> Note: +> * `containerId` specifies the DIV to create `DWT` viewer, which is defined in the `template`. +> * `OnWebTwainReady` is the callback triggered when `DWT` initialization succeeds. +> * `ProductKey` must be set to a valid trial or full key. +> * `ResourcesPath` is set to the location of the static files mentioned in [Configure the project](#configure-the-project). + +Change the file /src/App.vue + +```html + + + + + +``` + +### Try running the project + +``` cmd +npm run dev +``` + +#### On desktop + +If you have installed `DWT` and have configured a valid `ProductKey` . You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on [this page]({{site.indepth}}features/initialize.html#installation-of-the-dynamsoft-service) that guides you on installing the library. + +#### On mobile + +For Android, the scanners that support ESCL can be used. + +## Official Samples + +Check out the following sample project: + +* [dwt-vue](https://github.com/Dynamsoft/web-twain-vue-advanced) + +
+
\ No newline at end of file diff --git a/info/api/WebTwain_Acquire.md b/info/api/WebTwain_Acquire.md index ad9e0748..2743da09 100644 --- a/info/api/WebTwain_Acquire.md +++ b/info/api/WebTwain_Acquire.md @@ -4623,7 +4623,7 @@ GetDevicesAsync(deviceType?: Dynamsoft.DWT.EnumDWT_DeviceType | number, refresh? **Parameters** -`deviceType`: The device type. Please refere to [EnumDWT_DeviceType]({{site.info}}api/Dynamsoft_Enum.html#dynamsoftdwtenumdwt_borderstyle) +`deviceType`: The device type. Please refere to [EnumDWT_DeviceType]({{site.info}}api/Dynamsoft_Enum.html#dynamsoftdwtenumdwt_devicetype) `refresh`: Default value is **false** @@ -4778,4 +4778,4 @@ DWObject.GetDevicesAsync().then((deviceList)=>{ ``` -
\ No newline at end of file +