Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gianmarx's avatar

VUE 2.x: show a modal only once

i have implemented a component in vue which shows a modal.

i did this with vue-tailwind. Having said that I would like the modal to show only once and not every time I update the browser page.

I was wondering if this frontend thing was possible?

This is modal:

<template>
    <t-modal 
             header="Modal title to be shown only once"
    >
      Modal content to be shown only once
        <template v-slot:footer>
            <div class="flex justify-between">
                <t-button type="button">
                    Cancel
                </t-button>
                <t-button type="button">
                    Ok
                </t-button>
            </div>
        </template>
    </t-modal>
</template>
0 likes
7 replies
MohamedTammam's avatar

Please show the modal code and how you're showing the modal.

gianmarx's avatar

@MohamedTammam the modal component is what I put above. this component is called in the Parent component called Homepage.vue. all as follows:

<template>
        <ShownOnlyOnceModal/>
        <Welcomepage :user="user"/>
</template>

as it is done now, the modal is shown every time you load the Homepage component or better every time you go to the Homepage page.

I was trying to do something that only made it charge once and that was it.

MohamedTammam's avatar

@gianmarx Use a prop for displaying and hiding it.

<template>
	 <t-modal v-if="show"> ... </t-modal>
</template>
<script>
export default {
	props: {
		show: true, // Display by default
	}
}
</script>

When using it

<template>
	 <ShownOnlyOnceModal :show="showModal"/>
</template>
<script>
export default {
	data() {
		return {showModal: false} // Hide by default
	},
	methods() {
		toggleModal() {
				this.showModal = ! this.showModal; 
		}
	}
}
</script>
gianmarx's avatar

@MohamedTammam it does not work nor if you put true or false it does not load it. That said, the modal must only be viewed once and then not again.

MohamedTammam's avatar

@gianmarx What do you mean by "once", if you refresh the page and the default value to show, it will show again.

Use a boolean value to hide/show it to match your logic.

gianmarx's avatar

@MohamedTammam once: to be shown only once, so I go into the homepage and see the modal only once. If I re-upload the page once I enter the homepage, the modal must no longer be visible.

Please or to participate in this conversation.