{"id":20644959,"url":"https://github.com/todm/vuei5","last_synced_at":"2026-04-22T10:34:13.192Z","repository":{"id":57145970,"uuid":"427053654","full_name":"todm/vuei5","owner":"todm","description":"Vue.js for native UI5 apps","archived":false,"fork":false,"pushed_at":"2021-11-17T15:22:35.000Z","size":478,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-03T06:25:33.691Z","etag":null,"topics":["fiori","ui5","ui5-library","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://todm.github.io/vuei5/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/todm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-11T15:38:55.000Z","updated_at":"2024-11-07T12:32:39.000Z","dependencies_parsed_at":"2022-09-06T13:02:15.170Z","dependency_job_id":null,"html_url":"https://github.com/todm/vuei5","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/todm/vuei5","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/todm%2Fvuei5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/todm%2Fvuei5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/todm%2Fvuei5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/todm%2Fvuei5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/todm","download_url":"https://codeload.github.com/todm/vuei5/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/todm%2Fvuei5/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32132617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T08:34:57.708Z","status":"ssl_error","status_checked_at":"2026-04-22T08:34:55.583Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["fiori","ui5","ui5-library","vue","vuejs"],"created_at":"2024-11-16T16:18:11.423Z","updated_at":"2026-04-22T10:34:13.178Z","avatar_url":"https://github.com/todm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuei5 - Vue.js for native UI5 apps\n\nVuei5 allows you to build [UI5](https://openui5.org/) apps using [vuejs](https://vuejs.org/). The resulting apps can be used both in standalone mode and in sap launchpad. UI5 Controls will be wrapped as vue components that can be used with the usual vuejs features. The components will then be added to the regular ui5 component system. It is also possible to let only a part of the app be controlled by vuei5. This project **does not** use webcomponents. Just the regular UI5 controls.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"docs/assets/tear.png\" /\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\u003c!-- ![tear image](/docs/tear.png) --\u003e\n\n\u003e ⚠ **Should be obvious but:**\n\u003e\n\u003e This project is experimental and it's probably a really bad idea to use it in production! It's basically just held together by ducktape. It could break at any moment.\n\n## What works and what doesn't\n\nSuprisingly a lot of things actually work as they should. Not everything is tested thoroughly but here is a quick overview of what is currently doable:\n\n**Works**\n\n- ✔ UI5 components in Vue\n- ✔ v-bind on ui5 components\n- ✔ v-model on ui5 components\n- ✔ v-on on ui5 components\n- ✔ Slots to nest ui5 components\n- ✔ i18n translations in vue\n- ✔ UI5 Routing system in vue\n- ✔ .vue Single file components\n- ✔ .vue \u0026lt;script setup\u0026gt; tag\n- ✔ Pug templates in .vue files\n- ✔ Render HTML inside ui5 app\n- ✔ ESM in .vue files (actually required)\n- ✔ Convert JSON Model to vue refs\n- ✔ style in .vue files\n- ✔ Babel Sourcemaps\n\n**Doesn't work / Work in progress**\n\n- ❌ Typescript support\n- ❌ v-show (bind to :visible instead)\n\n## Installation\n\nAdd the package to your project as a dev dependency.\n\n```sh\nnpm i -D @todms/vuei5\n```\n\nAdd the package to the ui5 dependencies of `package.json`\n\n```yaml\n\"ui5\": {\n  \"dependencies\": [\n    #...\n    \"@todms/vuei5\",\n  ]\n}\n```\n\nIf you want to use .vue sfc files include task and middleware in `ui5.yaml`\n\nTask:\n\n```yaml\nbuilder:\n  customTasks:\n    - name: vuei5-task-sfc\n      beforeTask: generateComponentPreload\n```\n\nMiddleware:\n\n```yaml\nserver:\n  customMiddleware:\n    - name: vuei5-middleware-sfc\n      beforeMiddleware: serveResources\n```\n\n## Updating vue.js\n\nAfter installation a ui5 compatible version of vue will be generated from the installed vue package.\n\nIf you want to reinstall your vuejs version you can execute the script manually\n\n```sh\nnode node_modules/vuei5/scripts/transformVue.js [--dev]\n```\n\nBy default the minified prod version of vue will be used. You can add `--dev` to use the bigger unminified dev version.\n\n## Documentation\n\n[View Documentation](https://todm.github.io/vuei5);\n\nThe documentation page was created with vuei5 and can be used as a working example. You can find it's source code in `/docs`.\n\n## Quickstart\n\nMake sure you've followed the [installation steps](#installation) to make vuei5 available in your project. Then initialize vuei5. Either for the whole app or just a part of it.\n\n\n### Initializing vuei5 for the whole app\n\nTo let vue control the whole app you need to modify your `Component.js` file. Just change the default `UIComponent` to the vuei5 `VUEIComponent`. You can also still add your usual ui5 configuration since `VUEIComponent` extends `UIComponent`.\n\nTo make the app work you at least have to specify the root vue component to render on the page.\n\n```js\n//Component.js\n\nsap.ui.define(\n  [\n    \"vuei5/VUEIComponent\",\n    \"./components/Home\", // also import your root vue component\n  ],\n  function (VUEIComponent, Home) {\n    \"use strict\";\n\n    // Simply replace UIComponent with VUEIComponent.\n    return VUEIComponent.extend(\"vuei5.demo.Component\", {\n      metadata: {\n        manifest: \"json\",\n      },\n\n      vuei5: {\n        vueRoot: Home,\n      },\n    });\n  }\n);\n```\n\nWith this configuration the app should now render your specified root vue component.\n\n### Initializing vuei5 for part of the app\n\nTo let vue control only part of the app you need to launch it inside of a controller while passing it a reference to the parent element.\n\n```js\n// App.controller.js\n\nsap.ui.define(\n  [\n    \"sap/ui/core/mvc/Controller\",\n    \"vuei5/Launcher\", //import vuei5 Launcher\n    \"../components/Home\", //import your root vue component\n    //...\n  ],\n  function (Controller, vuei5Launcher, Home) {\n    return Controller.extend(\"vuei5.demo.controller.App\", {\n      //...\n\n      onInit: function () {\n        // get your parent ui5 element\n        const element = this.byId(\"myParentElement\");\n\n        vuei5Launcher(element, Home, {\n          /* Options */\n        });\n      },\n\n      //...\n    });\n  }\n);\n```\n\nWith this configuration the contents of the root vue component shoulod now be added to your specfied parent ui5 element.\n\n### Writing components and importing ui5 controls\n\nYou can write your components both in `.vue` sfc files and in standard `.js` files. If you want to use .vue files make sure that you correctly installed the [sfc task / middleware](#task-and-middleware) wich will automatically transform them into normal js files. Also note that it's mandatory to use **ES Modules in .vue files**. They will be resolved by the task.\n\nTo import and use a ui5 control in your vue component use the `UI5Control` function. It will take in a Control or a String and will return a vue-ready component. If you provide the function with a string instead of a control it will load it synchronously with `sap.ui.requireSync()`.\n\nIf you use a control multiple times it's a good idea to register it globally.  \u003e See Documentation\n\n**Writing components in .vue files:**\n\n```html\n\u003c!-- MyComponent.vue --\u003e\n\u003ctemplate\u003e\n  \u003cVBox\u003e\n    \u003cText text=\"Hello World\" /\u003e\n  \u003c/VBox\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import UI5Control from \"vuei5/UI5Control\";\n  import VBox from \"sap/m/VBox\";\n\n  export default {\n    components: {\n      // you can pass a amd loaded control\n      VBox: UI5Control(VBox),\n\n      // or a string wich will load the control with sap.ui.requireSync();\n      Text: UI5Control(\"sap/m/Text\"),\n    },\n  };\n\u003c/script\u003e\n```\n\n**The same component in vanilla js:**\n\n```js\nsap.ui.define([\"vuei5/UI5Control\", \"sap/m/VBox\"], function (UI5Control, VBox) {\n  return {\n    template: `\u003cVBox\u003e\u003cText text=\"Hello World\"/\u003e\u003c/VBox\u003e`,\n    components: {\n      // you can pass a amd loaded control\n      VBox: UI5Control(VBox),\n\n      // or a string wich will load the control with sap.ui.requireSync();\n      Text: UI5Control(\"sap/m/Text\"),\n    },\n  };\n});\n```\n\nIn a `\u003cscript setup\u003e` tag just asign the result to a constant:\n\n```html\n\u003cscript setup\u003e\n  import ui5 from \"vuei5/UI5Control\";\n\n  // Component will be available as \u003cButton/\u003e\n  const Button = ui5(\"sap/m/Button\");\n\u003c/script\u003e\n```\n\n### Interact with ui5 vue components\n\nInteracting with ui5 vue components is, with a few exceptions, the same as interacting with any other vue component. You can bind data with `v-bind` or `:` use `v-if`, `v-for` and listen to events with `v-on` or `@`\n\nIt does not matter if you use the options api or the composition api and even the new `\u003cscript setup\u003e` tag will work.\n\n```html\n\u003c!-- MyComponent.vue --\u003e\n\u003ctemplate\u003e\n  \u003cVBox\u003e\n    \u003cText :text=\"count\" /\u003e\n    \u003cbutton text=\"Click me!\" @press=\"increment\" /\u003e\n  \u003c/VBox\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import UI5Control from \"vuei5/UI5Control\";\n  import VBox from \"sap/m/VBox\";\n  import { ref } from \"vuei5/Vue\";\n\n  export default {\n    components: {\n      VBox: UI5Control(VBox),\n      Text: UI5Control(\"sap/m/Text\"), //Will import sync\n      Button: UI5Control(\"sap/m/Button\"), //Will import sync\n    },\n\n    setup() {\n      const count = ref(0);\n      function increment() {\n        count.value++;\n      }\n      return { count, increment };\n    },\n  };\n\u003c/script\u003e\n```\n\n### Aggregations\n\nMany ui5 controls have aggregations that allow you to define child controls. In vuei5 you can achive this by adding them as children. Without any configuration the controls will be attached with a `default` aggregation. You can specify a diffrent one by setting `v-slot` on a template or by defining `ui5--aggregation` on a single control.\n\n```html\n\u003cm-Table\u003e\n  \u003c!-- Will be added with default aggregation --\u003e\n  \u003cMyComponent/\u003e\n\n  \u003ctemplate v-slot:headerToolbar\u003e\n    \u003c!-- Will be added with headerToolbar aggregation --\u003e\n    \u003cMyComponent/\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate v-slot:columns\u003e\n    \u003c!-- Will be added with columns aggregation --\u003e\n    \u003cMyComponent/\u003e\n  \u003c/template\u003e\n\n  \u003c!-- Will be added with infoToolbar aggregation --\u003e\n  \u003cMyComponent ui5--aggregation=\"infoToolbar\"/\u003e\n\u003c/m-Table\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftodm%2Fvuei5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftodm%2Fvuei5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftodm%2Fvuei5/lists"}