Cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted

How to integrate MindSphere OS bar with Nuxt.js?

Experimenter
Experimenter

I'm struggling with MindSphere OS bar integration with my Nuxt.js app. But no success so far.

 

What I did:

- Add { src: 'https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js' } to head property in nuxt.config.js like

  head: {
    title: pkg.title,
    script: { src: 'https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js' },
    meta: ... (snip)
  }

- modify default.vue in layouts folder and put the following init code in mounted() function, which seemed to be run but took no effect

_mdsp.init({...})

 

 

Unfortunately, these changes didn't show the OS bar on my app.

Is there any way to do this?

 

According to the document, the library should work in Vue.js but it doesn't refer to Nuxt.js. I guess it should do as well on Nuxt.js.

 

Any information/suggestion is appreciated.

2 REPLIES 2

Re: How to integrate MindSphere OS bar with Nuxt.js?

Experimenter
Experimenter

Do you see anything in the browser console? Any errors?

 

If you initialize it like that, it waits for the DomContentLoaded-Event until it starts. Might be, that you call it too late and the event has already happened. You could try and pass the "initialize" option when calling the OSBar.

 

        _mdsp.init({
            initialize: true,
            ...
        });

An alternative would be to call it outside of the lifecycle of the framework.

Re: How to integrate MindSphere OS bar with Nuxt.js?

Experimenter
Experimenter

@mahe Thanks! Your suggestion helped me to look into the issue. And finally got it worked.

 

Here is the info for Nuxt.js developers who want to integrate MindSphere OS bar into their app.

 

1. Add { src: 'https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js' } to head property in nuxt.config.js like

  head: {
    title: pkg.title,
    script: [{ src: 'https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js' }],
    meta: ... (snip)
  }

2. modify default.vue in layouts folder and put the following init code in mounted() function as shown below

<template>
<div>
<nuxt />
</div>
</template>
<script>
export default {
mounted() {
/*global _mdsp*/
_mdsp.init({
title: 'Your App Name Here',
appId: '__nuxt',
initialize: true
})
}
}
</script>

Note that the appId MUST BE '__nuxt' as Nuxt.js doesn't allow developers modify the root div tag ID.

initiazlie:true is REQUIRED since the _mdsp object failed to detect DomContentLoaded-Event as @mahe said.

 

Since according to a Siemens guy, MindSphere doesn't officially support Nuxt.js, please be aware that this tip is just a workaround.