{"id":16816141,"url":"https://github.com/alertis/vue-barcodes-generator","last_synced_at":"2025-08-23T15:20:29.797Z","repository":{"id":66731838,"uuid":"586346017","full_name":"Alertis/vue-barcodes-generator","owner":"Alertis","description":"multiple barcode generator component for vue.js","archived":false,"fork":false,"pushed_at":"2023-02-21T12:15:11.000Z","size":353,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-30T18:37:34.909Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alertis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-07T20:02:24.000Z","updated_at":"2024-01-14T14:32:17.000Z","dependencies_parsed_at":"2023-04-21T07:56:21.811Z","dependency_job_id":null,"html_url":"https://github.com/Alertis/vue-barcodes-generator","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"a6262b9635e7447f8026ec253054c0537d7d5efa"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Alertis/vue-barcodes-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alertis%2Fvue-barcodes-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alertis%2Fvue-barcodes-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alertis%2Fvue-barcodes-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alertis%2Fvue-barcodes-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alertis","download_url":"https://codeload.github.com/Alertis/vue-barcodes-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alertis%2Fvue-barcodes-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271754354,"owners_count":24815185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T10:37:27.644Z","updated_at":"2025-08-23T15:20:29.762Z","avatar_url":"https://github.com/Alertis.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-barcodes-generator\n\n[![npm](https://img.shields.io/npm/v/vue-barcodes-generator.svg?style=flat-square)](https://www.npmjs.com/package/vue-barcodes-generator)\n[![npm](https://img.shields.io/npm/dt/vue-barcodes-generator.svg?style=flat-square)](https://www.npmjs.com/package/vue-barcodes-generator)\n[![npm](https://img.shields.io/npm/dm/vue-barcodes-generator.svg?style=flat-square)](https://www.npmjs.com/package/vue-barcodes-generator)\n\nThis component creates a form to generate barcodes. The form includes three required inputs (start number, barcode count, and barcode number length). Also, you can add some additional inputs to take into account while generating the barcode. After you have specified the related options, you can submit the form to generate barcodes.\n\n![](https://raw.githubusercontent.com/Alertis/vue-barcodes-generator/main/screenshots/app.png)\n\n## Install\n\n```bash\nnpm install vue-barcodes-generator\n```\n\n## Usage\n\nYou can use the `vue-barcode-generator` package easily by following the three steps below:\n\n#### 1. Add the `VueBarcodes` as a component\n\n```javascript\nimport VueBarcodes from 'vue-barcodes-generator'\nnew Vue({\n  components: {\n    'VueBarcodes': VueBarcodes\n  }\n})\n```\n\n#### 2. Specify the barcode options\n\n```javascript\ndata: function(){\n    return{\n      inputs: [\n        {\n            name: 'start',\n            title: 'First Barcode No',\n            val: 1\n        },\n        {\n            name: 'count',\n            title: 'Barcode Count',\n            val: 10\n        },\n        {\n            name: 'length',\n            title: 'Number Length',\n            val: 2\n        },\n      ],\n      buttonText: 'Create',\n    }\n  }\n```\n\n#### 3. Use the `VueBarcodes` component\n\n```html\n  \u003cVueBarcodes \n    :inputs=\"inputs\"\n    :buttonText=\"buttonText\"\n  /\u003e\n\n```\n\n## Props\n\n|Props|Description|Required|Type|Default|\n|-----|-----------|--------|----|-------|\n|inputs|Components use this props for generate form|true|Array|`[{name: 'start', title: 'Start Number', val:1},{name: 'count', title: 'Barcode Count', val: 10}, {name: 'length', title: 'Number Length', val: 4}]`|\n|buttonText|Title for button|true|String|`'Generate'`|\n|buttonClass|Class name for button|false|String|-|\n|barcodeConfig|Settings for barcode|false|Object|-|\n\n### Inputs\n\nThis props type is `Array` and includes an element per form input. It has three required property and if you dont pass these elements, the component generates the default value. You can generate unlimited inputs.\n\n```javascript \n[\n    {\n        name: 'start',\n        title: 'Start Number',\n        val:1\n    },\n    {\n        name: 'count',\n        title: 'Barcode Count',\n        val: 10\n    },\n    {\n        name: 'length', \n        title: 'Number Length',\n        val: 4\n    }\n]\n```\n\nIf you want to edit three required elements, you should add the element with the same name (start, count, length) as below:\n\n\u003cstrong\u003e name: \u003c/strong\u003e unique name for input \u003cbr\u003e\n\u003cstrong\u003e title: \u003c/strong\u003e caption for input \u003cbr\u003e\n\u003cstrong\u003e val: \u003c/strong\u003e value for input\n\n\n### barcodeConfig\n\nThis props type is `Object` and includes settings for generating barcodes. This package uses the [JsBarcode](https://github.com/lindell/JsBarcode) library to generate barcodes and you can inspect to [JsBarcode Documentation](https://github.com/lindell/JsBarcode/wiki/Options) for barcodeConfig props.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falertis%2Fvue-barcodes-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falertis%2Fvue-barcodes-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falertis%2Fvue-barcodes-generator/lists"}