Nuxt compatibility

[liang1403]

Hi, not sure whether I'm doing everything rigth, but faced the next issue:

1. Plugin connected via nuxt default approach

import { useModalRouter } from "jenesius-vue-modal";

export default defineNuxtPlugin((nuxtApp) => {
    useModalRouter.init(nuxtApp.$router);

2. Route is modified in app/router.options.ts like this

   {
     path: "/modal/:code",
     name: "Modal",
     component: useModalRouter(Modal),
   }

3. Container component is placed in the root of default.vue layout without any visibility conditions

ERROR: Modal Container not found. Put container from jenesius-vue-modal in App's template. Namespace: default

Checked why this is happening - container` onMounted is triggered after navigation and addModal method, therefore the store isn't initialized yet. That even makes sense, but how than i'm supposed to open modal as a first page on entering my app?

Using plugin version 1.10.0 and Nuxt 3.7.1

Would appreciate any ideas!

[Jenesius]

@liang1403 Hi! If you didn't forget about this step, then the problem looks like this: we are trying to open the modal window before our container was mounted.

So, i think that We can use some flag to not react to this error. One moment!

[Jenesius]

I hope it can help you:

1. Update version to 1.10.1;
2. Execute config (before you mount your application) from jenesius-vue-modal and pass disableInitializationCheck: true

   import {config} from "jenesius-vue-modal"
   config({
   disableInitializationCheck: true
   })

   Also, I update the docs. It was a bit of a mess, so there are some minor inaccuracies in the doc. I'll fix this later.

Hm, i think that skipInitCheck will be more short, concise and understandable than disableInitializationCheck.

[liang1403]

@Jenesius Oh, thanx, this seems to have fixed the problem, but here is another one :)

RouterView content is still being replaced on navigation. Modal opens, but previous content just goes away and returns on esc. I believe modal should open OVER my content... The same behavior i expect on accessing the site by direct link. Like it should open the modal over the index.vue page or smth (but the case with access by direct link isn't that critical). It seems like no matter, NuxtPage or RouterView is used, both replace content to, let's say, nothing on route change.

Again, I'm not sure whether it's supposed to work that way bc the docs don't cover that case with routing.

[Jenesius]

@liang1403 Lets also resolve it!)

Can you give a more detailed example (possibly with code) of what your Root Vue file looks like in which you connect the modal-container.

I also updated the example of working with integration vue-router in the examples of this project. To run it and see it, I attach the instructions:

• npm ci
• npm run serve
• http://localhost:8080/vue-router-with-modal/

---

You should also understand that by integrating modal windows with vue-router we are subject to the rules of vue-router. I'll try to explain what this means. Let's say we have the following vue-router configuration:

[
  { path: "users", component: WidgetUserList},
  { path: "dogs", component: WidgetDogList,
    children: [
      { path: ":id", component: useModalRouter(ModalDog)}
    ]
  },
  { path: "cats", component: WidgetCatList, 
    children: [
      { path: ":id", component: useModalRouter(ModalCat) }
    ]
  }
]

If we open /users first and then go to /cats/13, then the WidgetUserList component will be unmount and the WidgetCatList component will be mount.

I assume that in your project, switching to /modal/:code destroys all previous components precisely because of this. Because for vue-router they simply do not exist for the current path.

[Jenesius]

@liang1403 Also, I upload this example to sandbox(so you don't have to waste time on deployment). Sandbox

[Jenesius]

Maybe, if we go from /users to /cats/4, and then press esc we must got to /cats, not /users. 🤔🤔 But it will breake some vue-router logic

[Jenesius]

Version 1.10.2: disableInitializationCheck was renamed to skipInitCheck. Changelog