Fixed modal setup

components/ReportModal.vue

@@ -39,6 +39,7 @@
 import gql from 'graphql-tag'
 
 export default {
+  name: 'ReportModal',
   data() {
     return {
       loading: false,

layouts/default.vue

@@ -83,10 +83,12 @@
       </div>
     </ds-container>
     <div id="overlay" />
-    <report-modal />
     <no-ssr>
       <portal-target name="modal" />
     </no-ssr>
+    <no-ssr>
+      <report-modal />
+    </no-ssr>
   </div>
 </template>
 

package.json

@@ -51,8 +51,8 @@
     "jsonwebtoken": "^8.3.0",
     "nuxt": "^2.0.0",
     "nuxt-env": "^0.0.4",
-    "portal-vue": "^1.5.1",
     "nuxt-sass-resources-loader": "^2.0.5",
+    "portal-vue": "^1.5.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",

styleguide/src/system/components/layout/Modal/Modal.vue

@@ -1,55 +1,57 @@
 <template>
-  <portal to="modal">
-    <div :key="key" class="ds-modal-wrapper">
-      <transition name="ds-transition-fade" appear>
-        <div
-          v-if="isOpen"
-          class="ds-modal-backdrop"
-          ref="backdrop"
-          @click="backdropHandler"
-        >
-          &nbsp;
-        </div>
-      </transition>
-      <transition name="ds-transition-modal-appear" appear>
-        <ds-card
-          v-if="isOpen"
-          class="ds-modal"
-          :class="[extended && 'ds-modal-extended']"
-          :header="title"
-          tableindex="-1"
-          role="dialog"
-          ref="modal"
-          style="display: block"
-        >
-          <ds-button
-            v-if="!force"
-            class="ds-modal-close"
-            ghost
-            size="small"
-            icon="close"
-            aria-hidden="true"
-            @click="cancel('close')"
-          />
-          <!-- @slot Modal content -->
-          <slot ref="modalBody"/>
-          <template slot="footer">
-            <!-- @slot Modal footer with action buttons -->
-            <slot
-              name="footer"
-              :confirm="confirm"
-              :cancel="cancel"
-              :cancelLabel="cancelLabel"
-              :confirmLabel="confirmLabel"
-            >
-              <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
-              <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
-            </slot>
-          </template>
-        </ds-card>
-      </transition>
-    </div>
-  </portal>
+  <div>
+    <portal to="modal">
+      <div :key="key" class="ds-modal-wrapper">
+        <transition name="ds-transition-fade" appear>
+          <div
+            v-if="isOpen"
+            class="ds-modal-backdrop"
+            ref="backdrop"
+            @click="backdropHandler"
+          >
+            &nbsp;
+          </div>
+        </transition>
+        <transition name="ds-transition-modal-appear" appear>
+          <ds-card
+            v-if="isOpen"
+            class="ds-modal"
+            :class="[extended && 'ds-modal-extended']"
+            :header="title"
+            tableindex="-1"
+            role="dialog"
+            ref="modal"
+            style="display: block"
+          >
+            <ds-button
+              v-if="!force"
+              class="ds-modal-close"
+              ghost
+              size="small"
+              icon="close"
+              aria-hidden="true"
+              @click="cancel('close')"
+            />
+            <!-- @slot Modal content -->
+            <slot ref="modalBody"/>
+            <template slot="footer">
+              <!-- @slot Modal footer with action buttons -->
+              <slot
+                name="footer"
+                :confirm="confirm"
+                :cancel="cancel"
+                :cancelLabel="cancelLabel"
+                :confirmLabel="confirmLabel"
+              >
+                <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
+                <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
+              </slot>
+            </template>
+          </ds-card>
+        </transition>
+      </div>
+    </portal>
+  </div>
 </template>
 
 <script>