{"id":19714378,"url":"https://github.com/peternaydenov/visual-controller-for-vue3","last_synced_at":"2025-06-13T05:33:03.769Z","repository":{"id":56909707,"uuid":"315869133","full_name":"PeterNaydenov/visual-controller-for-vue3","owner":"PeterNaydenov","description":"visual controller for vue3","archived":false,"fork":false,"pushed_at":"2025-05-14T07:14:47.000Z","size":680,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-14T08:26:45.472Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/PeterNaydenov.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,"zenodo":null}},"created_at":"2020-11-25T08:03:03.000Z","updated_at":"2025-05-14T07:14:51.000Z","dependencies_parsed_at":"2024-03-13T08:45:19.899Z","dependency_job_id":"c45bc1c0-a034-42bb-80c5-0a3132ed4e4f","html_url":"https://github.com/PeterNaydenov/visual-controller-for-vue3","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"c453fb204981672b7106a405a818eca806dfcc8e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PeterNaydenov/visual-controller-for-vue3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PeterNaydenov","download_url":"https://codeload.github.com/PeterNaydenov/visual-controller-for-vue3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-vue3/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259589297,"owners_count":22880945,"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":[],"created_at":"2024-11-11T22:31:19.180Z","updated_at":"2025-06-13T05:33:03.745Z","avatar_url":"https://github.com/PeterNaydenov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual Controller for Vue 3\n\nTool for building a micro-frontends(MFE) based on Vue 3 components - Start multiple Vue 3 applications on the same HTML page and control them.\n\nInstall visual controller:\n```\nnpm i @peter.naydenov/visual-controller-for-vue3\n```\n\nInitialization process:\n```js\nimport notice from '@peter.naydenov/notice'\nimport VisualController from '@peter.naydenov/visual-controller-for-vue3'\n// if you are using commonjs:\n// const VisualController = require ( '@peter.naydenov/visual-controller-for-vue3' )\n\nlet \n      eBus = notice ()        // Notice docs:  https://github.com/PeterNaydenov/notice\n    , dependencies = { eBus } // Provide to dependency object everything that should be exposed to components \n    , html = new VisualController ( dependencies )   \n    ;\n// Ready for use...\n```\n\nLet's show something on the screen:\n```js\n// Let's have vue component 'Hello' with prop 'greeting'\n\nhtml.publish ( Hello, {greeting:'Hi'}, 'app' )\n//arguments are: ( component, props, containerID )\n```\n\n## Inside of the Components\n*Note: If your component should be displayed only, that section can be skipped.*\n\nIf access to your external libraries needed, please inject `dependecies` object. All provided libraries during visualController initialization are available plus one special method `setupUpdates`. The method could set an interface for external component manipulation.\n\n```vue\n\u003cscript setup\u003e\nimport HelloWorld from './components/HelloWorld.vue'\nimport { inject, ref } from 'vue'\n\nconst { eBus, setupUpdates } = inject ( 'dependencies' );   // Here you can get your dependency object.\n//            ^^^^^^^^^^^^\n//              This method is coming as an extra dependency content. You can define here functions that can \n//              manipulate your component from outside of vue-app. \nlet message = ref('Vite + Vue');\n\neBus.emit ( 'check' )\n\nsetupUpdates ({   // Provides to visualContoller method 'changeMessage' \n      changeMessage:  msg =\u003e message.value = msg\n    })    \n\u003c/script\u003e\n```\nThe external call will look like this:\n\n```js\nhtml.getApp ( 'app' ).changeMessage ( 'New message content' ) \n```\n\n\n\n## Visual Controller Methods\n```js\n  publish : 'Render vue app in container. Associate app instance with the container.'\n, getApp  : 'Returns app instance by container name'\n, destroy : 'Destroy app by using container name '\n, has     : 'Checks if app with specific \"id\" was published'\n```\n\n\n\n### VisualController.publish ()\nPublish vue app.\n```js\nhtml.publish ( component, props, containerID )\n```\n- **component**: *object*. Vue component\n- **props**: *object*. Vue components props\n- **containerID**: *string*. Id of the container where vue-app will live.\n\nExample:\n```js\n let html = new VisualController ();\n html.publish ( Hi, { greeting: 'hi'}, 'app' )\n```\n\nRender component 'Hi' with prop 'greeting' and render it in html element with id \"app\".\n\n\n\n\n\n### VisualController.getApp ()\nReturns the library of functions provided from method `setupUpdates`. If setupUpdates was not called from the vue-app, result will be an empty object.\n\n```js\n let controls = html.getApp ( containerID )\n```\n- **containerID**: *string*. Id of the container.\n\nExample:\n```js\nlet \n      id = 'videoControls'\n    , controls = html.getApp ( id ) \n    ;\n    // if app with 'id' doesn't exist -\u003e returns false, \n    // if app exists and 'setupUpdates' was not used -\u003e returns {}\n    // in our case -\u003e returns { changeMessage:f }\nif ( controls )   controls.changeMessage ( 'Hello from outside' )\nelse { // component is not available\n       console.error ( `App for id:\"${id}\" is not available` )\n   }\n```\n\nIf visual controller(html) has a vue app associated with this name will return it. Otherwise will return **false**.\n\n\n\n\n\n### VisualController.destroy ()\nWill destroy vue app associated with this container name and container will become empty. Function will return 'true' on success\nand 'false' on failure. \nFunction will not delete content of provided container if there is no vue app associated with it.\n\n```js\nhtml.destroy ( containerID )\n```\n- **containerID**: *string*. Id name.\n\n## Other details and requirements\n\n- Support for Autonomous Custom Elements ( after v.1.1.0 ). Add a prop named `isCustomElement`. Should be a function.\n\n```js\nlet isCustomElement = tag =\u003e tag === 'plastic-button';   // Will ignore tags 'plastic-button' during vue- render process. \n\nhtml.publish ( Hi, { greeting: 'hi', isCustomElement}, 'app' )\n\n//custom elements for AWS Amplify service will look like\nlet amplfiyCustom = tag =\u003e tag.startsWith ( 'amplify-' )\nhtml.publish ( Hi, {greeting:'hi', isCustomElement: amplifyCustom}, 'app' )\n```\n \n\n\n\n\n## Extra\n\nVisual Controller has versions for few other front-end frameworks:\n- [React](https://github.com/PeterNaydenov/visual-controller-for-react) \n- [Vue 2](https://github.com/PeterNaydenov/visual-controller-for-vue)\n- [Svelte](https://github.com/PeterNaydenov/visual-controller-for-svelte3)\n\n\n\n\n\n## Release History\n\n\n\n### 2.1.4 ( 2024-12-20)\n- [x] Dependencies update. Ask for Promise - v.3.0.1;\n\n\n\n### 2.1.1 ( 2024-06-06)\n- [x] Dependencies update. Vue - v.3.4.27;\n- [x] Dev dependencies update. Vite - v.5.2.12, Cypress - v.13.11.0, Rollup - v.4.18.0;\n\n\n\n### 2.1.0 ( 2024-03-13)\n- [x]  Folder 'dist' was added to the project. Includes commonjs, umd and esm versions of the library;\n- [x] Package.json: \"exports\" section was added. Allows you to use package as commonjs or es6 module without additional configuration;\n- [x] Rollup was added to the project. Used to build the library versions;\n\n\n\n### 2.0.4 ( 2023-11-10)\n- [x] Dependencies update. Vue - v.3.3.8;\n- [x] Dev. dependencies update. Vite - v.4.5.0;\n- [x] Dev. dependencies update. Cypress - v.13.5.0;\n- [x] Dev. dependencies update. @vitejs/plugin-vue - 4.4.1;\n\n\n### 2.0.3 ( 2023-11-06)\n- [x] Dependencies update. Vue - v.3.3.7\n- [x] Dependencies update. ask-for-promise - v.1.5.0\n\n\n\n### 2.0.2 ( 2023-10-22)\n- [x] Dependencies update. Vue - v.3.3.6\n\n\n\n### 2.0.1 (2023-10-21)\n- [x] Dependencies update. ask-for-css - v.1.4.0\n\n\n\n\n### 2.0.0 ( 2022-11-21)\n- [x] Full rewrite of the library;\n- [x] Method 'has' was added;\n- [x] Support for SSR hydration;\n\n### 1.1.1 ( 2021-04-25)\n - [x] Support for Autonomous Custom Elements\n\n### 1.0.2 (2021-03-15)\n - [x] Fix: Only one load per component;","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeternaydenov%2Fvisual-controller-for-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeternaydenov%2Fvisual-controller-for-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeternaydenov%2Fvisual-controller-for-vue3/lists"}