{"id":20807934,"url":"https://github.com/dutchwebworks/vue-web-component-demo","last_synced_at":"2025-09-09T13:39:53.948Z","repository":{"id":39111995,"uuid":"150389372","full_name":"dutchwebworks/vue-web-component-demo","owner":"dutchwebworks","description":"Learning about Vue Web Components","archived":false,"fork":false,"pushed_at":"2025-02-18T14:16:44.000Z","size":1508,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T17:02:59.611Z","etag":null,"topics":["demo","learning-by-doing","vue","web-components"],"latest_commit_sha":null,"homepage":"https://vue-web-component-demo.dutchwebworks.nl","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/dutchwebworks.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":"2018-09-26T07:53:41.000Z","updated_at":"2025-01-08T19:20:54.000Z","dependencies_parsed_at":"2023-01-31T22:01:50.734Z","dependency_job_id":"edb4214e-d8a3-44d0-a7e2-3768d1562731","html_url":"https://github.com/dutchwebworks/vue-web-component-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutchwebworks%2Fvue-web-component-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutchwebworks%2Fvue-web-component-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutchwebworks%2Fvue-web-component-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutchwebworks%2Fvue-web-component-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dutchwebworks","download_url":"https://codeload.github.com/dutchwebworks/vue-web-component-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249018695,"owners_count":21199226,"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","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":["demo","learning-by-doing","vue","web-components"],"created_at":"2024-11-17T19:43:58.073Z","updated_at":"2025-04-15T06:26:48.054Z","avatar_url":"https://github.com/dutchwebworks.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Web-Components demo\n\n*By Dennis Burger, Poort80 Amsterdam, september 2018*\n\nThis is a little demo that uses VueJS's `vue-cli` v3.x to **build** a **W3C Web-Component** from a Vue component. This custom Web-component, with a custom made up HTML-tag, can then be dropped into a (non-Vue) web page. Or any other web page that uses any framework.\n\n## Prerequisites\n\n* [NodeJS](https://nodejs.org/en/)\n* You'll also need the `vue-cli`. After installing above NodeJS open a **Terminal** (command-line) and run:\n\n```bash\nnpm i -g @vue/cli\n```\n\nThis will install the [VueJS vue-cli](https://cli.vuejs.org/guide/installation.html) command-line-interface (CLI).\n\n## Project setup\n\nRun the usual NPM install from within this project directory to install it's dependencies.\n\n```bash\nnpm install\n```\n\n## Run local VueJS development web server\n\nFor this demo we'll focus on the `src/components/NameBlock.vue` -page. And it into a custom **W3C HTML-tag** with a JavaScript file. Run the following to start the local (hot-reloading) development web server.\n\n```bash\nnpm run serve\n```\n\nOpen the `src/components/NameBlock.vue` -page (component) into a text-editor (or IDE). This VueJS component (page) will be turned into a W3C Web-component.\n\n## Build the custom web-component\n\nWhen done developing; quit the running development server by hitting `ctrl + c` on the terminal. Now run the command below to have `vue-cli` v3.x **build** this component into a W3C web-component inside the `docs/` directory. To change this `docs/` directory edit the `vue.config.js` and update the `package.json` -file `demo` -script (to serve which directory).\n\nI've used the `docs/` directory because this project is hosted on [Github](https://github.com/dutchwebworks/vue-web-component-demo) and this demo can be viewed from the Github Pages on a custom domain .\n\n```bash\nnpm run build\n```\n\nThe result is a very short static `docs/demo.html` -page. With a few HTML `\u003cscript\u003e` -tags.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"./name-block.js\"\u003e\u003c/script\u003e\n\n\u003cname-block\u003e\u003c/name-block\u003e\n```\n\n* The first `\u003cscript\u003e` -line is the VueJS library loaded from a CDN.\n* The second `\u003cscript\u003e` -line is the `Home.vue` application all wrapped up into one JavaScript file.\n* The third is that custom HTML-tag name you'll use for your VueJS Web-component.\n\n## View the static HTML demo\n\nTo quickly view (or 'serve') this `docs/` directory run the command below. This will start a simple HTTP web server serving the `docs/` directory.\n\n```bash\nnpm run demo\n```\n\nOpen the URL mentioned in the terminal in a web browser. The `docs/index.html` file contains a demo of a normal HTML page where the `\u003cname-block\u003e\u003c/name-block\u003e` W3C web-component is used.\n\n## Using the Web-component\n\nNow you can use this custom HTML-tag `\u003cname-block\u003e\u003c/name-block\u003e` along with those two `\u003cscript\u003e` -tags inside other web pages.\n\nThis setup uses the **Shadow DOM** for self-contained components.\n\n## Browser support\n\nAs of this writing this VueJS Web-component demo works in:\n\n* Chrome\n* Firefox\n* Safari\n* Opera\n* Edge (with polly-fill)\n\n## More info\n\n* [Create \u0026 Publish Web Components With Vue CLI 3](https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/)\n* [Use Vue.js to create custom web components](http://vuetips.com/vue-web-components)\n* [Shadow DOM v1: Self-Contained Web Components](https://developers.google.com/web/fundamentals/web-components/shadowdom)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdutchwebworks%2Fvue-web-component-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdutchwebworks%2Fvue-web-component-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdutchwebworks%2Fvue-web-component-demo/lists"}