{"id":21207495,"url":"https://github.com/ranjeetsinghbnl/stenciljs-vue","last_synced_at":"2025-07-19T20:12:15.476Z","repository":{"id":129697541,"uuid":"205675784","full_name":"ranjeetsinghbnl/stenciljs-vue","owner":"ranjeetsinghbnl","description":"Stenciljs component in vuejs step by step guide","archived":false,"fork":false,"pushed_at":"2019-09-15T13:16:49.000Z","size":13,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-21T15:49:58.481Z","etag":null,"topics":["microfrontend","microfrontends-demo","stencil-components","vuejs"],"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/ranjeetsinghbnl.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":"2019-09-01T12:52:26.000Z","updated_at":"2020-10-07T08:01:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"5bcc5a6f-cb86-4d39-aa38-6aa4ee296768","html_url":"https://github.com/ranjeetsinghbnl/stenciljs-vue","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/ranjeetsinghbnl%2Fstenciljs-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranjeetsinghbnl%2Fstenciljs-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranjeetsinghbnl%2Fstenciljs-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranjeetsinghbnl%2Fstenciljs-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ranjeetsinghbnl","download_url":"https://codeload.github.com/ranjeetsinghbnl/stenciljs-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243660344,"owners_count":20326862,"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":["microfrontend","microfrontends-demo","stencil-components","vuejs"],"created_at":"2024-11-20T20:58:58.426Z","updated_at":"2025-03-14T23:26:39.549Z","avatar_url":"https://github.com/ranjeetsinghbnl.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stencil component in Vue\n\n\nThis is a step by step guide, how we can use a stencil component in a Vue app. For more details you can also check the official [Framework integration guide](https://stenciljs.com/docs/vue).\n\nThis project is created with [Vue Cli](https://cli.vuejs.org/)\n\n## Similar guides\nI have created another framework integration guide to use stencil components\n\n* [Stencil components in React](https://github.com/ranjeetsinghbnl/stenciljs-react)\n* [Stencil components in Angular](https://github.com/ranjeetsinghbnl/stenciljs-angular)\n* [Stencil components in javascript](https://github.com/ranjeetsinghbnl/stenciljs-javascript)\n\nIn order to use the custom element library within the Vue app, the application must be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the `main.js` file.\n\nThis example use the stencil component from the following project\n\n* [Product \u0026 Cart showcase example](https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs)\n\n## Table of contents\n* [Add the component to the dependencies](#add-the-component-to-the-dependencies )\n* [Import the component](#import-the-components)\n* [Consume the component](#consume-the-component)\n* [Using component](#using-component)\n\n\n## Add the component to the dependencies\nAdd the component to the app dependencies in `package.json`\n\n```json\n// package.json\n\n\"dependencies\": {\n  ...\n  \"@ranjeetsinghbnl/product-mgmt-stenciljs\": \"0.0.1\"\n}\n```\nor\nInstall it `npm install @ranjeetsinghbnl/product-mgmt-stenciljs`\n\n## Import the component\nimport the component in the `main.js` file\n\n```javascript\nimport {\n  applyPolyfills,\n  defineCustomElements as defineProductMgmtExp\n} from '@ranjeetsinghbnl/product-mgmt-stenciljs/loader';\n```\n\n## Consume the component\nTelling Vue to ignore the custom element tags [see](https://vuejs.org/v2/api/#ignoredElements). Add the following code to your `main.js` file. You can also use the component names or regular expression for that.\n\n```javascript\nVue.config.ignoredElements = [/mf-\\w*/];\n```\nor\n\n```javascript\nVue.config.ignoredElements = [\n    'mf-product-view',\n    'mf-product-cart'\n];\n```\nand Bind the custom elements to the window object\n\n```javascript\napplyPolyfills().then(() =\u003e {\n  defineProductMgmtExp(window);\n});\n```\n\n## Using component\nNow The components should then be available in any of the Vue components\n\nYou can use it\n\n```html\n\u003cmf-product-view\u003e\u003c/mf-product-view\u003e\n```\n\n```html\n\u003cmf-product-cart\u003e\u003c/mf-product-cart\u003e\n```\n\nTo know more about the components. Please check the [Product \u0026 Cart showcase example](https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs)\n\n\n**Note: I have include the bootstrap 4 css to give style to the stencil components. Because they are open to design changes. Their is no style added to components i have used in the showcase**\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Run your tests\n```\nnpm run test\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franjeetsinghbnl%2Fstenciljs-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Franjeetsinghbnl%2Fstenciljs-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franjeetsinghbnl%2Fstenciljs-vue/lists"}