Very simple modal for nuxt framework

Demo Page

https://user-images.githubusercontent.com/51977254/169375875-33904498-5449-42b4-89c9-77c9f22909ef.mp4

# install module
$ npm i @s3rver/nuxt-modal

Steps of use

1 - Add module to nuxt.config.js

// nuxt.config.js
export default {
    //...
    modules: ['@s3rver/nuxt-modal']
    //...
}

2 - Register modals for layout

<template>
    <div>
        <nuxt />

        <!-- added line -->
        <register-modals />
    </div>
</template>

3 - Making directory modals

In the main root of the project, create a directory called modals and save your modals with the vue extension

options

nuxt.config.js

default options

// nuxt.config.js
export default {
    //...
    modal: {
        pluginName: "modal", // name plugin 
        layout: "default", // layout desktop
        mobileLayout: "defaultMobile", // layout mobile
        mobileSize: 400, // mobile or desktop window size
        responsive: false,
    },

    modules: ['@s3rver/nuxt-modal']
    //...
}

Responsive

Responsive value is disabled by default and you must define separate components for mobile and desktop dimensions

If enabled, you do not need to create two components

layout & mobileLayout

The value is equal to the name of the registered component

Making Custom Layout

Sample desktop layout

Sample mobile layout

And then open the modal