What am I doing wrong, all my modals are initialised on page load

[BorisKamp]

Version

vue-final-modal: ^2.4.3 vue: ^2.7.10 nuxt: 2.17.0

OS: Mac

So I have created a plugin:

import Vue from 'vue'
import { vfmPlugin } from 'vue-final-modal/lib'

Vue.use(vfmPlugin)

Set in in my plugins section in nuxt config: '~/plugins/vue-final-modal.js'

Added modals container to my default.vue file:

<template>
  <div id="app">
    <navbar />

    <nuxt></nuxt>
    <modals-container></modals-container>
    <bird-blocker-footer />
  </div>
</template>

And created a dynamic modal according to this: https://v2.vue-final-modal.org/dynamic-modal:

<template>
  <vue-final-modal name="login" :ssr="false" classes="modal-container" content-class="modal-content">
    <div class="modal__content">
      <is-loading-overlay />
      <login-form />
    </div>
  </vue-final-modal>
</template>

Thats not working when I call $vfm.show('login') from any other component... But the modal is visible in vue devtools in Chrome, and the content is loaded (I have networking calls in it). I expect it only to be visible in devtools (loaded) when I call $vfm.show('login').

What am I missing here?

[hunterliu1003]

@BorisKamp Can you try to put all modal in <ClientOnly>, I think vue-final-modal@2.x not fully support the ssr