{"_id":"@altipla/vue-webcomponent","_rev":"3-85e9c337d20dce43bd9489f55e830551","name":"@altipla/vue-webcomponent","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.1":{"name":"@altipla/vue-webcomponent","version":"0.1.1","description":"Deploy a web component from a Vue component with minimal modifications.","main":"src/index.js","scripts":{"lint":"eslint src/**/*.js","test":"npm run lint"},"repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-webcomponent.git"},"keywords":["vue","web-components"],"author":{"name":"Altipla Consulting"},"license":"MIT","bugs":{"url":"https://github.com/altipla-consulting/vue-webcomponent/issues"},"homepage":"https://github.com/altipla-consulting/vue-webcomponent#readme","devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-proposal-object-rest-spread":"^7.4.4","@babel/preset-env":"^7.4.5","babel-eslint":"^10.0.2","eslint":"^6.0.1"},"dependencies":{"lodash":"^4.17.11"},"gitHead":"43ec81e1bdbd8a2812e3d99e08d7dc1cb962f028","_id":"@altipla/vue-webcomponent@0.1.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.2","dist":{"integrity":"sha512-+Zg7MUqjZ1X2Z2u1aHk0/tWGfJkE6DB89DZk4BY5kuwVg8GspLfAxVcpi+jonVgpJTxDO/j/yOKCWHvhFwhTKA==","shasum":"ba8dc211ed49edabb4dee29647655fc4760dd724","tarball":"https://registry.npmjs.org/@altipla/vue-webcomponent/-/vue-webcomponent-0.1.1.tgz","fileCount":6,"unpackedSize":10319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFppGCRA9TVsSAnZWagAAg74P/RCIbxw5C/W8K4ykkldY\ngDPRb4n5pwEjA8kPRP2ct7gaOi0hyD/3xIPvas9ariht+C8C9j7gL/oMihQt\nhULvl88/T+jGBH0jAnnd6ohJ34OOsx+cP5Ocy472sN/cRu2+UiRWVHw3m4v/\n8IsTtyFUWj4vdo8FPSN5IOHLHMfTZFbHZDiHzBZgMfGWahwqWHux284vt1xZ\nZcv8uCJsjSJVtSCcV7Lv8IaAmBLsy2nafMRi8SiKJdHYr8uDsRicoBlqqgux\noEouAXZbPUL4IJ/WneXTIZL51rU3uZUx63mIEiJy94uKUcQi3ft69mvY9OEL\nRFNElQScOKCbo1z+QpVOn+EaLFTAItQzBnRBUBU14Jd+u7s/YHpc4xpA/5Wk\nuXGFZElwmFIAqpP49lKZFceKtrAvP/1xkdptR3iBoUWfndppgWADskjpFgcv\n00wf1fvfCgXK/PByNZGiAkqlg2u1Svq0jYBKwDhkGjgKLvgvXd9HqUAiERuO\n+CQKDHRW09yift078n0A+tGkopIXLVdsgd7KrAGVzOXSyLlk7LOHh3sNDajp\nsMMiTgVGFzib4BKNonemeuq6+AnY8vS9WWaLCK6qX6PB8WvGq/Cqj8RwX5jb\nJLov79AVFjWCKnhFS4fevNmi3KF2CUpdgO0Kz+4+Dw11RzfYC81+2V2hYVZw\niSHL\r\n=x39j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNH4ouMrwg6Usa4oWFw21eiZR8kkCffn47Izj6nh2gQQIgRlLjzaJf+nMYJUba5gUZCNDmVES5Ys5JKHHcDXZYUj8="}]},"maintainers":[{"name":"ernestoalejo","email":"contact@ernestoalejo.me"}],"_npmUser":{"name":"ernestoalejo","email":"contact@ernestoalejo.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-webcomponent_0.1.1_1561762373848_0.030340435668895882"},"_hasShrinkwrap":false},"0.1.2":{"name":"@altipla/vue-webcomponent","version":"0.1.2","description":"Deploy a web component from a Vue component with minimal modifications.","main":"src/index.js","scripts":{"lint":"eslint src/**/*.js","test":"npm run lint"},"repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-webcomponent.git"},"keywords":["vue","web-components"],"author":{"name":"Altipla Consulting"},"license":"MIT","bugs":{"url":"https://github.com/altipla-consulting/vue-webcomponent/issues"},"homepage":"https://github.com/altipla-consulting/vue-webcomponent#readme","devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-proposal-object-rest-spread":"^7.4.4","@babel/preset-env":"^7.4.5","babel-eslint":"^10.0.2","eslint":"^6.0.1"},"dependencies":{"lodash":"^4.17.11"},"gitHead":"f8e8df9a842fc0e93e3111b54486c1151732d73b","_id":"@altipla/vue-webcomponent@0.1.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.2","dist":{"integrity":"sha512-7prLDGdhVtDJ9bsnZ2ic8qSnxpgAJ5Ozs/A1hP2DKEXxsIclDgDRFP2eHM/Yh6uOQbQBLwBZtC7Q0LFamALFXQ==","shasum":"3e7239aacd8c00b0180bee62526e1499aec3e55c","tarball":"https://registry.npmjs.org/@altipla/vue-webcomponent/-/vue-webcomponent-0.1.2.tgz","fileCount":6,"unpackedSize":10319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFpq1CRA9TVsSAnZWagAAJUIP/R4hiGTpm33ToT/AjsGs\n2fQVsMR2O7CtRokdrteeaDnjqvXrXpH3RtUsS15DdSjAzKgt4rO1AI23SpMn\nDLSx+nsqHAvmUhvitbxf0v94OXtX0CuBRUnDm7CyySCiYVFQ4hwVeLk7hVsU\nA4IryW1XRG3DrPFGe6n2aEqH1tGoWK3TIZj0qmkuhXolErG2TDAzXZ/EYBxc\nVAJK3TtlXfl6IxyHNC8PWYPD23lOhPQh0YbrcXAkz1sw8mqCpjdZer39Uex3\nI0J9ax792eApvwKR0HAvXkCSJryuLUnN2gaTd7p6IqXdmrjxNPxMQ3FXtvSI\nwPnmEuHyodaAXijJ49bYnhOQObzlw/92+jSMM7UMAM1Uq+GTSr6JbgtkdbJo\nxxwv2lYNKvFKGf5mp+P51H9/igUE36aPa21bG5gJBV4MYse1hZUWhPlOo3F1\nJ8TOUnTEFGr9BYxVs1R7sP5AiClhtV2yjC94600rNJn+9xXmxXnj0XKpxXq6\n0alL3z1XM7PhBn4YD+gUX2h6lUbvJVvb58f0GrnDvwWjsRSPpH3uav/NxNSX\nXEMG5nebs/g2AlYV327fEBQ8Pn3aGa2UHxVUUyhvb6w+0OmfVhmYdS8+EHCN\njDMnm1tjkfP3iBGjBzLJYek8qs3Sio/RXM2GtKJfhUmLgwDJh3azWLB8/Whl\nRB7t\r\n=pa+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCly8/0vV6+2TmMJNxl07QkYe1O8SwKhNmgs5e58vHf7gIgEW7aFLYgbJf3nj+dU/DT5tuJFVKbe0Nu5ybOP3rFNTI="}]},"maintainers":[{"name":"ernestoalejo","email":"contact@ernestoalejo.me"}],"_npmUser":{"name":"ernestoalejo","email":"contact@ernestoalejo.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-webcomponent_0.1.2_1561762485081_0.9192161891602286"},"_hasShrinkwrap":false},"0.1.3":{"name":"@altipla/vue-webcomponent","version":"0.1.3","description":"Deploy a web component from a Vue component with minimal modifications.","main":"src/index.js","scripts":{"lint":"eslint src/**/*.js","test":"npm run lint"},"repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-webcomponent.git"},"keywords":["vue","web-components"],"author":{"name":"Altipla Consulting"},"license":"MIT","bugs":{"url":"https://github.com/altipla-consulting/vue-webcomponent/issues"},"homepage":"https://github.com/altipla-consulting/vue-webcomponent#readme","devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-proposal-object-rest-spread":"^7.4.4","@babel/preset-env":"^7.4.5","babel-eslint":"^10.0.2","eslint":"^6.0.1"},"dependencies":{"lodash":"^4.17.11"},"gitHead":"9002dd963fae1eb593810fe3b132dec9e71f9534","_id":"@altipla/vue-webcomponent@0.1.3","_nodeVersion":"10.16.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-BM0lFF2Lhq2tM6hFDeF7L4RVl8efZTWiIKuxHe2m0R0PzBzFAqMX3SkmAtKlDpMpCQ2lkXrdPXUbETns1xHKTw==","shasum":"257ebb90990107a2f4e5dc977e124fb2face0458","tarball":"https://registry.npmjs.org/@altipla/vue-webcomponent/-/vue-webcomponent-0.1.3.tgz","fileCount":6,"unpackedSize":10341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTtoyCRA9TVsSAnZWagAANiwQAJFEXm3cH8/sEIDB1Tgx\n3UgQyu2nv2/RW2ksXcifRseht19yTS67MniWuNoMimEAArKcal09Urw0J704\nYu9tr97H/U5cQlTPT7/njZ+9ygTe1i6wPe2IKN15eNGbAlabVavA2Qmou6Qv\n/yVb+S7GNhqwIHv7aZzBMh0EEpqXO1Zq9L8hhxuT9RGGuwIjNC6nz78yMBD4\nGUFG8PFqay/bUhAlpwST1CFsQuG6t7XH6RtUGJhx3s8eRqu0EYw+DB7uWabI\ncWXk5CogE95/9nZxjewZmmUbRRn9rTy3ciWnLhDnhn3Plo1DRqaemEwzUQUB\nJICSv881NLnsoeVmFqyzQuQ5Q12HxwBsv5fuPExaQuMGyXvlb25/gY3tBM/0\nf65rFEZdWhN7yW9BOl17qV4EnthgYDaqZ12tfVHDCNHZE/tFukyVC40n16sh\nMpB3bD2pM7HF+FiiiXrbHchHbvig2baWBrq1Ee1WJKwpKWFbCAUclVdNwe1d\ncLlWicDfMOKWVJeuxQFZVZcYVbzVnf1Zy024bll8O8t9PncEDAeYxfPNZ1OG\nzsrz4t2i6SUgPHG/dvtEF7/lcpTO6KFLnXU0gYvs3DM8GHcFkbTMZADKITuR\nd8g72OslkDCW8f2EAjOsRYTXSrzhtl8Jj9r8hMjEO2IcWfJ3iSoC4mXaIUz6\nJK+t\r\n=H7CH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAoM5gC9LueZHSl7lZe4Y7hHBHy+2Qj9e8U8YY+lXNFQIhAOorS6LSWvyXc6UCa7ch5EgY1KwwKEEn8A8Mwr7p892l"}]},"maintainers":[{"name":"ernestoalejo","email":"contact@ernestoalejo.me"}],"_npmUser":{"name":"ernestoalejo","email":"contact@ernestoalejo.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-webcomponent_0.1.3_1565448754212_0.28552232144804246"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-28T22:52:53.776Z","0.1.1":"2019-06-28T22:52:53.963Z","modified":"2022-04-04T13:40:17.282Z","0.1.2":"2019-06-28T22:54:45.257Z","0.1.3":"2019-08-10T14:52:34.335Z"},"maintainers":[{"name":"ernestoalejo","email":"contact@ernestoalejo.me"}],"description":"Deploy a web component from a Vue component with minimal modifications.","homepage":"https://github.com/altipla-consulting/vue-webcomponent#readme","keywords":["vue","web-components"],"repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-webcomponent.git"},"author":{"name":"Altipla Consulting"},"bugs":{"url":"https://github.com/altipla-consulting/vue-webcomponent/issues"},"license":"MIT","readme":"\n# vue-webcomponent\n\nDeploy a web component from a Vue component with minimal modifications.\n\n\n## Install\n\n```shell\nnpm i --save @altipla/vue-webcomponent\n```\n\n\n## Simple usage\n\nDeclare a normal Vue component, but instead of using `Vue.component('name', {...})` use `buildElement('name', {...})` from our library:\n\n```js\nimport { buildElement } from '@altipla/vue-webcomponent';\n\n\nbuildElement('test-component', {\n template: `...`,\n props: {\n strProp: String,\n numericProp: Number,\n blnProp: Boolean,\n },\n data() {\n return {\n ...\n };\n },\n mounted() {\n ...\n },\n});\n```\n\n\nThen register the plugin after all components are declared:\n\n```js\nimport Vue from 'vue';\nimport VueWebComponent from '@altipla/vue-webcomponent';\n\n\nVue.use(VueWebComponent);\n```\n\nThe last step is to use the Web Component like a normal Vue component inside any plain HTML file:\n\n```html\nBefore
\n\nAfter
\n```\n\n\n## Styles\n\nStyles can be used and will be installed inside the Shadow DOM. There is two types of styles you can use: common and specific. Common styles are shared between all components of the page and assigned when registering the plugin. Specific styles are loaded on a per component basis and can overwrite anything in the common styles.\n\nKeep the styles are short as possible as they are inserted separately in every instance of the component.\n\nAssign global styles:\n\n```js\nVue.use(VueWebComponent, {\n globalStyles: `.foo h1 { ... }`,\n});\n```\n\nAssign specific styles:\n\n```js\nbuildElement('foo-name', {\n styles: `.foo h1 { ... }`,\n});\n```\n\nIn both cases it is recommended to use a bundler that allows you to import the file instead of using an inline string:\n\n```js\nimport globalStyles from './styles/foo.scss';\n\n\nVue.use(VueWebComponent, {\n globalStyles,\n});\n```\n","readmeFilename":"README.md"}