├── .babelrc ├── .eslintrc ├── .gitignore ├── .postcssrc ├── LICENSE ├── README.md ├── docs ├── .nojekyll ├── README.md ├── _coverpage.md ├── _media │ └── logo.png ├── _sidebar.md ├── configuration.md ├── demo.md ├── development.md ├── index.html ├── quickstart.md └── vuecomponent.md ├── jest.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── components │ └── VueQrReader.vue └── main.js ├── test └── unit │ ├── .eslintrc │ └── HelloWorld.spec.js ├── vue.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@vue/app" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "plugin:vue/essential", 5 | "@vue/prettier" 6 | ], 7 | "rules": { 8 | "semi": ["warn", "always"] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /build 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "autoprefixer": {} 4 | } 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Pulilab 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-qr-reader 2 | > A vue web component to scan QR 3 | 4 | See the [docs](https://pulilab.github.io/vue-qr-reader/) for a demo and further information. 5 | 6 | ## Features 7 | - Highly customizable 8 | - Support continuos scanning 9 | - All modern browser support 10 | - iOS 11 and above support 11 | 12 | 13 | ## Dependencies 14 | - [Vue.js 2x](https://vuejs.org/) 15 | - [jsQR](https://github.com/cozmo/jsQR) 16 | 17 | 18 | ## Credits 19 | > Built by [Pulilab](http://www.pulilab.com/) 20 | 21 | 22 | ## Notes 23 | iOS support is still a bit unstable, it will be fixed in the next minor version without API changes. 24 | 25 | 26 | > Huge thanks to the author of [jsQR](https://github.com/cozmo/jsQR) for his awesome work! 27 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pulilab/vue-qr-reader/1d2a3fa2a92351bdf3abe1ec2c1e53ef6f3f7fa7/docs/.nojekyll -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # vue-qr-reader 2 | > A vue web component to scan QR codes 3 | 4 | ## Features 5 | - Highly customizable 6 | - Support continuos scanning 7 | - All modern browser support 8 | - iOS 11 and above support 9 | 10 | 11 | ## Dependencies 12 | - [Vue.js 2x](https://vuejs.org/) 13 | - [jsQR](https://github.com/cozmo/jsQR) 14 | 15 | 16 | ## Credits 17 | > Built by [Pulilab](http://www.pulilab.com/) 18 | -------------------------------------------------------------------------------- /docs/_coverpage.md: -------------------------------------------------------------------------------- 1 | ![logo](_media/logo.png) 2 | 3 | # vue-qr-reader 1.4.0 4 | 5 | [GitHub](https://github.com/pulilab/vue-qr-reader) 6 | [Get Started](#vue-qr-reader) 7 | -------------------------------------------------------------------------------- /docs/_media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pulilab/vue-qr-reader/1d2a3fa2a92351bdf3abe1ec2c1e53ef6f3f7fa7/docs/_media/logo.png -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | - Getting Started 2 | - [Quick Start](quickstart) 3 | - [Configuration](configuration) 4 | - [VueComponent](vuecomponent) 5 | - [Demo](demo) 6 | 7 | - Contribute 8 | - [Development](development) 9 | -------------------------------------------------------------------------------- /docs/configuration.md: -------------------------------------------------------------------------------- 1 | # Configuration 2 | 3 | ## Props 4 | 5 | !> At the time this doc was written, default values for `Boolean` props were ignored, so they all need to be specified in the instance. 6 | 7 | ### useBackCamera 8 | - Type: `Boolean` 9 | - Default: `true` 10 | 11 | Defines if the component should try to use the back camera or not, note that in most of the cases the back camera is not present on computers and on some tablets. 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | ### stopOnScanned 18 | - Type: `Boolean` 19 | - Default: `true` 20 | 21 | Defines if the component should stop scanning for codes after the first match, this will stop the video grabbing and the qr scanning process. If it is set to `false` the component will continuously scan. 22 | 23 | ```html 24 | 25 | ``` 26 | 27 | ### drawOnFound 28 | - Type: `Boolean` 29 | - Default: `true` 30 | 31 | Defines if the component should draw a 'box' around the found QR, which uses the edges returned by `jsQR` to draw the shape, color and thickness of the lines to be configurable with the props: `lineColor` and `lineWidth` 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ### lineColor 38 | - Type: `String` 39 | - Default: `#FF3B58` 40 | 41 | Defines the color drawn around the QR code by selecting the HEX string representing the color. 42 | 43 | ```html 44 | 45 | ``` 46 | 47 | ### lineWidth 48 | - Type: `Number` 49 | - Default: `2` 50 | 51 | Defines the thickness of the lines drawn around the code. 52 | 53 | ```html 54 | 55 | ``` 56 | 57 | ### videoWidth 58 | - Type: `Number` 59 | - Default: `320` 60 | 61 | Defines the width of the canvas where the user can see the output of the video. 62 | 63 | ```html 64 | 65 | ``` 66 | 67 | !> Note this prop is ignored if the prop `responsive` is set to true. 68 | 69 | ### videoHeight 70 | - Type: `Number` 71 | - Default: `240` 72 | 73 | Defines the height of the canvas where the user can see the output of the video. 74 | 75 | ```html 76 | 77 | ``` 78 | 79 | !> Note this prop is ignored if the prop `responsive` is set to true. 80 | 81 | 82 | ### responsive 83 | - Type: `Boolean` 84 | - Default: `false` 85 | 86 | Defines if the component should set the video width to fit its container and the height to 0.75 factor of it. This can result in a laggy or bad quality video depending on the camera resolution. 87 | 88 | ```html 89 | 90 | ``` 91 | -------------------------------------------------------------------------------- /docs/demo.md: -------------------------------------------------------------------------------- 1 | # Demo 2 | 3 | 4 | >This is an interactive demo, please accept the Webcam permission pop-up in the browser. 5 | 6 | 7 | 8 | 9 | 41 | 42 | -------------------------------------------------------------------------------- /docs/development.md: -------------------------------------------------------------------------------- 1 | # Development 2 | 3 | !> This project uses vue-cli 3.0, which is still in beta. Please refer to [this article](https://github.com/vuejs/vue-cli) to install it. 4 | 5 | ### Contribute 6 | 7 | Fork the repository on GitHub: 8 | 9 | > https://github.com/pulilab/vue-qr-reader 10 | 11 | Clone the repo: 12 | 13 | ```shell 14 | git clone git@github.com:YOURNICKNAME/vue-qr-reader.git 15 | ``` 16 | 17 | Cd in the newly created folder and install the dependencies 18 | 19 | ```shell 20 | cd vue-qr-reader 21 | yarn 22 | # OR 23 | npm install 24 | ``` 25 | 26 | ### Dev 27 | > Substitute npm run to yarn if you are using npm 28 | 29 | ```shell 30 | yarn serve 31 | ``` 32 | 33 | > The dev enviroment is served on http://localhost:8080 34 | 35 | ## Build 36 | > Substitute npm run to yarn if you are using npm 37 | 38 | ```shell 39 | yarn wc 40 | ``` 41 | 42 | > Dist code is now present in the dist folder 43 | 44 | 45 | ## Test 46 | > Substitute npm run to yarn if you are using npm 47 | The unit test for this plugin are run with jest. 48 | 49 | ```shell 50 | yarn test 51 | ``` 52 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-qr-reader 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/quickstart.md: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | ### Installation 4 | Install the component through npm or yarn 5 | 6 | 7 | ```shell 8 | npm install -s vue-qr-reader 9 | 10 | yarn add vue-qr-reader 11 | ``` 12 | 13 | ### Usage 14 | > As this is a web component, it is only necessary to include the js and then place the component in the markup in order to be utilized. 15 | 16 | ```js 17 | import 'vue-qr-reader'; 18 | ``` 19 | 20 | or 21 | 22 | ```html 23 | 24 | ``` 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | 31 | Once a QR code is scanned the `CustomEvent`: `code-scanned` is emitted. One can listen to this event as he normally would, for example in vue: 32 | 33 | !> The event emitted is a `CustomEvent` and the payload is contained as the first element of the array referenced by the key `detail` 34 | 35 | ```html 36 | 39 | 40 | 49 | ``` 50 | 51 | !> The event is emitted once if the prop `stop-on-scanned` is set to `true` (default), if the prop is set to `false` the event is emitted continuously while the QR is being detected. 52 | 53 | ### Exceptions 54 | 55 | !> Once an error is occured the `CustomEvent`: `error-captured` is emitted, you can implement your error handler to listen to this event, for example in vue: 56 | 57 | ```html 58 | 61 | 62 | 93 | ``` 94 | 95 | !> For more detail of possible errors returned, you may refer to https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Exceptions 96 | -------------------------------------------------------------------------------- /docs/vuecomponent.md: -------------------------------------------------------------------------------- 1 | # Vue component 2 | 3 | > For VueJs project is possible to import the component as a library. 4 | 5 | ## Usage 6 | 7 | 8 | ```html 9 | 14 | 15 | 28 | ``` 29 | 30 | !> The biggest difference between the Webcomponent and the library version is that the event `code-scanned` return the code directly and not in the form of `event.detail[0]` 31 | 32 | 33 | 34 | ## Nuxt 35 | 36 | Since the component use the camera API it is not compatible with `SSR` to avoid `vue-qr-reader` to be processed during the server rendering the suggestion is to use the `vue-no-ssr` component. 37 | 38 | #### no-ssr installation 39 | 40 | ```bash 41 | yarn add vue-no-ssr 42 | ir 43 | npm install vue-no-ssr 44 | ``` 45 | 46 | #### Usage 47 | 48 | ```html 49 | 54 | 55 | 66 | ``` -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ["js", "jsx", "json", "vue"], 3 | transform: { 4 | "^.+\\.vue$": "vue-jest", 5 | "^.+\\.jsx?$": "babel-jest" 6 | }, 7 | moduleNameMapper: { 8 | "^@/(.*)$": "/src/$1" 9 | }, 10 | snapshotSerializers: ["jest-serializer-vue"], 11 | mapCoverage: true 12 | }; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-qr-reader", 3 | "version": "1.6.1", 4 | "license": "MIT", 5 | "author": { 6 | "name": "Pulilab", 7 | "email": "hosting@pulilab.com", 8 | "website": "http://www.pulilab.com" 9 | }, 10 | "description": "A web component written in vue to scan QR", 11 | "keywords": [ 12 | "vuejs", 13 | "qr", 14 | "scan", 15 | "web-component" 16 | ], 17 | "main": "dist/vue-qr-reader.min.js", 18 | "scripts": { 19 | "serve": "vue-cli-service serve --open", 20 | "build": "vue-cli-service build", 21 | "dist": "rm -rf dist && yarn wc && yarn lib", 22 | "lib": "vue-cli-service build --target lib 'src/components/VueQrReader.vue' && cp -r build dist/lib", 23 | "wc": "vue-cli-service build --target wc 'src/components/VueQrReader.vue' && cp -r build dist", 24 | "test": "vue-cli-service test", 25 | "lint": "vue-cli-service lint" 26 | }, 27 | "dependencies": { 28 | "jsqr": "^1.0.2", 29 | "vue": "^2.5.13" 30 | }, 31 | "devDependencies": { 32 | "@vue/cli-plugin-babel": "^3.0.0-beta.1", 33 | "@vue/cli-plugin-eslint": "^3.0.0-beta.1", 34 | "@vue/cli-plugin-unit-jest": "^3.0.0-beta.1", 35 | "@vue/cli-service": "^4.0.5", 36 | "@vue/eslint-config-prettier": "^3.0.0-beta.1", 37 | "@vue/test-utils": "^1.0.0-beta.10", 38 | "babel-core": "^6.26.0", 39 | "babel-jest": "^22.0.4", 40 | "less": "^3.8.1", 41 | "less-loader": "^4.0.5", 42 | "vue-template-compiler": "^2.5.13" 43 | }, 44 | "browserslist": [ 45 | "> 1%", 46 | "last 2 versions", 47 | "not ie <= 8" 48 | ], 49 | "files": [ 50 | "dist" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pulilab/vue-qr-reader/1d2a3fa2a92351bdf3abe1ec2c1e53ef6f3f7fa7/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-qr-reader 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/VueQrReader.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 209 | 210 | 216 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount("#app"); 9 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "rules": { 6 | "import/no-extraneous-dependencies": "off" 7 | } 8 | } -------------------------------------------------------------------------------- /test/unit/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import { shallow } from "@vue/test-utils"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | 4 | describe("HelloWorld.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const msg = "new message"; 7 | const wrapper = shallow(HelloWorld, { 8 | propsData: { msg } 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | outputDir: 'build', 4 | css: { 5 | extract: false 6 | } 7 | }; 8 | --------------------------------------------------------------------------------