Vue3 Support?

[gterras]

Hi, Do you have plans to support Vue3 ? Thanks

[Fusseldieb]

Vue 3.0 is not even ready for production yet.

euvl is also searching for maintainers, so I guess before that, no.

I'm personally happy with Vue 2 and I think it will be at least one year until Vue 3 becomes production ready (or maybe even more!).

[loren138]

See https://github.com/euvl/vue-js-modal/issues/586 for details on the maintainer search.

[mcdis]

Hi! vue 3 already released

[Fusseldieb]

It's not even stable yet, or better, it lacks documentation. Just go with Vue 2 and you'll be fine.

Am Mi., 21. Okt. 2020 um 06:57 Uhr schrieb MCDis [email protected]:

Hi! vue 3 already released

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/euvl/vue-js-modal/issues/626#issuecomment-713454265, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABD7E6JOJTTSHEJKWQSLR6LSL2WAJANCNFSM4RTCWTFQ .

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alexbruno]

Vue 3 is stable already and very well documented, including migration guide. The official libraries, like vuex and vue-router, are still in beta, but Vue is stable already:

From vuejs/vue-next:

All of our official libraries and tools now support Vue 3, but most of them are still in beta status and distributed under the next dist tag on NPM. We are planning to stabilize and switch all projects to use the latest dist tag by end of 2020.

So, Vue 3 is going to take the main distribution position soon.

[JshGrn]

+1 for Vue3 support

[hunterliu1003]

Hi, I'm the author of vue-final-modal and it supports Vue2 and Vue3. Maybe you can consider replacing vue-js-modal with vue-final-modal. If you have any problems when using vue-final-modal, please open an issue. I will be happy to help you solve the problem.

[rafalolszewski94]

Hi, I'm the author of vue-final-modal and it supports Vue2 and Vue3. Maybe you can consider replacing vue-js-modal with vue-final-modal. If you have any problems when using vue-final-modal, please open an issue. I will be happy to help you solve the problem.

This doesn't have proper documentation to make it work with Vue 3.

I may take up on writing a MR for Vue 3.

[mikeerickson]

@rafalolszewski94 Thanks for chiming in, I have a need for the same thing (v3 support). I will have a look at your project.

[rafalolszewski94]

I'm working on it here: https://github.com/rafalolszewski94/vue-js-modal/tree/vue3

Currently got working:

• Local docs (updated to VitePress)
• Updated Vue to v3
• Made static modal working

Will keep you guys posted 🤜

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bisubus]

@rafalolszewski94 Thanks for the fork. It's not published yet, is it? Unfortunately, vue-final-modal is not a drop-in replacement.

[xaddict]

bump

[vricosti]

Could someone merge rafalolszewski94 work and publish a new version for Vue 3 ? Since projects froms this developer seems abandoned I am thinking about migrating vue-js-modal and vue-js-toggle-button with vue-final-modal and vue-toggles

[joelawm]

Anyone publish a new version yet?

[riderx]

vue-final-modal from @hunterliu1003 do not work in typescript with setup script for now.

[riderx]

@rafalolszewski94 did you find a way to make it work ?

[RezaErfani67]

any release?

[mr-Sepi0l]

Any news? I've been trying vue final modal but it is a hell of a thing to make it work as i need. vue-js-modal is working just fine in my old vue2 project and i'd be glad t use it in my vue 3

[medbrat13]

Make vue3 support please!!!!!

[Instinctlol]

Hey guys, I migrated to the aforementioned vue-final-modal. If you choose to do so yourself, this will make your life a little easier as it's not a drop-in replacement.

When using vue-final-modal, you need to set the styling classes yourself. I copied the styling from vue-js-modal and merged it a little with the stuff explained in the step-by-step section of vue-final-modal:

// SCSS code
.modal {
    &--content {
        // default settings of vue-js-modal
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        background-color: white;
        border-radius: 3px;
        box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);
        width: 600px;

        // step-to-step settings of vue-final-modal
        display: flex;
        flex-direction: column;
        //margin: 0 1rem;
        //padding: 1rem;
        //border: 1px solid #e2e8f0;
        //border-radius: 0.25rem;
        //background: #fff;
    }
    &--container {
        // step-to-step settings of vue-final-modal
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

Apply these to your vue-final-modal like this

classes="modal--container"
content-class="modal--content"
:content-style="{height: 'auto'}"

A very basic example, to switch from a vue-js-modal like this:

<modal
    :name="name"
    :draggable="true"
    :adaptive="true"
    height="auto"
    width="70%"
    @before-open="beforeOpen"
    @opened="onOpen"
    @before-close="onBeforeClose"
  >
<div>some content</div>
</modal>

do this

<vue-final-modal
    v-model="show"
    :name="name"
    :drag="true"
    :fit-parent="true"
    :esc-to-close="true"
    classes="modal--container"
    content-class="modal--content"
    :content-style="{width: '70%', height: 'auto'}"
    @before-open="beforeOpen"
    @opened="onOpen"
    @before-close="onBeforeClose"
  >
  <div>some content</div>
</vue-final-modal>

You can figure out the rest yourself (e.g. getting the params is a tiny bit different). To make it scrollable you probably have to style your modal yourself as there's no simple prop for it like in vue-js-modal. But I didn't use the prop and made it myself so I didn't have any trouble regarding that when migrating.

Hope this helps!

[yf-hk]

Is there anyone intested in migrating this module to Vue 3?

[JshGrn]

Use Vue-Final-Modal

[xaddict]

If anyone is still looking for a drop-in replacement for the dynamic modals version (with stackable modals), try jenesius-vue-modal

We wrote a quick wrapper so if we decide to switch again in the future it becomes a lot easier:

import { config, pushModal, popModal } from 'jenesius-vue-modal'

config({
	scrollLock: true,
	animation: 'modal-list',
	backgroundClose: true,
	escClose: true
})

export async function showModal(
	component = null,
	props = {},
	{ backgroundClose= false, escClose= false } = {}
) {
	const close = () => popModal()
	const modal = await pushModal(component, { onClose: close, ...props })
	modal.onclose = (event) => {
		let canClose = true
		if (event.esc) { canClose = escClose }
		if (event.background) { canClose = backgroundClose }
		return canClose
	}
	return modal
}

and to use the wrapper in a method:

const component = defineAsyncComponent(() => import('../path/to/component'))
showModal(component) // easiest
showModal(component, { prop: 'value' }) // with props (like vue-js-modal)
showModal(component, { prop: 'value', onDone: () => {} }) // supports native Vue events ($emit)
showModal(component, { prop: 'value' }, { backgroundClose: true }) // override backgroundClose and escClose on a per-modal basis

[kouts]

Anyone still looking for an alternative to vue-js-modal for Vue 3 can also check vue-modal

[doyaaaaaken]

Here's some reference information. I'm using Jenesius/vue-modal, and the migration was easy because it's quite similar to the vue-js-modal's specifications.