$store is undefined inside OfficeLayer

[super2ni]

Describe the bug I tried to create my own Modal component using OfficeLayer. It seems that Vuex $store is not "pushed" to the components inside OfficeLayer slot.

To Reproduce

1. Use the OfficeLayer component like this for example:

   <template>
   <OfficeLayer>
     <div class="Modal-content">
       <div class="Modal-header">
         <template v-if="title">{{title}}</template>
         <button @click="$emit('closeModal')" class="Modal-close">Fermer</button>
       </div>
       <SaveAttachments/>
     </div>
   </OfficeLayer>
   </template>

2. Inside the child component of OfficeLayer ("SaveAttachments" in above case), try to access $store.
3. $store is undefined

Expected behavior $store in child component should be accessible.

[s-bauer]

Thanks for reporting this! I'll take a look at this!

[s-bauer]

The problem here is that Vue does not allow to render stuff outside the root element (e.g. the <div id="app"></div> element). I however have to render the content of the OfficeLayer directly in the body, I currently do a workaround, which basically consists of creating a <div> in the body using document.createElement and then creating a new Vue({}) which mounts to this <div>. So the content of the OfficeLayer is completely cut out of the dependency tree of your application. So it makes sense that the mixed in $store variable is not available.

I'm trying to find a fix for this. It's easy to just support vuex, but I want to find a general solution, which works with all mixins and injected properties.