NuxtJS module to prevent opening the app in multiple tabs
- Add
nuxt-prevent-multitabs
dependency to your project:
npm install nuxt-prevent-multitabs
- Create the layout to be used when the client opens another tab. An example:
<template>
<main class="section">
<div class="container">
<div class="has-text-centered">
<b-icon class="mb-2" icon="alert-circle" size="is-large" />
<h1 class="is-size-4 has-text-weight-bold">
Cannot open multiple windows
</h1>
<div class="mt-10">
<p>APP_NAME is already open in another window.</p>
<p>Make sure you close it before opening a new one.</p>
</div>
<b-button type="is-primary mt-8" rounded @click="reload()">
Click here to access
</b-button>
</div>
</div>
</main>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
methods: {
reload(): void {
location.reload()
},
},
})
</script>
- Add
nuxt-prevent-multitabs
module and configuration tonuxt.config.js
:
export default {
// ...other config options
modules: ["nuxt-prevent-multitabs"];
preventMultitabs: {
layout: 'multitab', // optional
}
}
- Type:
String
- Default:
multitab
The layout to be used when the client opens another tab
See the LICENSE file for license rights and limitations (MIT).