Vuejs integration

Hi,

Experimenting with the vue cli and various setups to try and get UI5 webcomponents working. Few questions.

• @ui5/webcomponents/dist/ does not seem to have an index file. Do all elements need to be imported individually?
• import "@ui5/webcomponents/dist/DatePicker" generates a date picker (yay!), but also the following error in the console:

[Vue warn]: Unknown custom element: <ui5-datepicker> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

Trying to register by trying to import DatePicker from ... and a subsequent Vue.use or Vue.component('ui5-datepicker', DatePicker) resulted in:

vue.runtime.esm.js?2b0e:5049 Uncaught TypeError: Class constructor DatePicker cannot be invoked without ‘new’

Less related but worth mentioning, when trying this in a TypeScript environment (otherwise same setup), the console also mentioned:

ToolsAPI.js:6 Uncaught TypeError: sap.ui.define is not a function at ToolsAPI.js:6

… which, indeed, was not present when expecting the window object.

Is there a basic setup you guys are using, or are these outstanding still in the current version?

[adrian-bobev]

Hi @jorgt,

we are preparing a Vue example with all the needed configurations. As soon as it is released, we will update the issue with a link to the app.

• Yes, currently we do not have an index.js file that re exports all the components and you should import needed components one by one.

• The warning that you got when import the DatePicker is normal. Vue has a configuration option to ignore all Custom Elements that are defined outside of it. The option is: Vue.config.ignoredElements

Vue.config.ignoredElements = [/^ui5-/];

For the TypeScript, could you please describe your setup?

[adrian-bobev]

@jorgt I will close the issue because cannot reproduce it. If you still have the issue with typescript, please explain your setup in more details.