How to Install vue-bottom-sheet On Nuxt.Js 2.*

Nuxt.js is part of vue.js the 'vue-bottom-sheet' plugins are also compatible to run on nuxt.js.

the initial stage follows the same instructions as those on the vue-bottom-sheet page.

Installation

NPM

npm install --save @webzlodimir/vue-bottom-sheet

YARN

yarn add @webzlodimir/vue-bottom-sheet

then the next step is to create a plugins folder and create a vuebottomsheet.js file.

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import Vue from "vue";

Vue.use(VueBottomSheet);

then edit the nuxt.config.js file

plugins: [
    { src: '@/plugins/vuebottomsheet.js', mode: 'client' },
  ],

Usage

<template>
    <client-only>
       <vue-bottom-sheet ref="confirmCreate">
              <div class="flex flex-col w-full">
                   <p>Fill Content</p>
              </div>
       </vue-bottom-sheet>
    </client-only>
</template>
<script>
    methods : {
       confirmCreated() {
            this.$refs.confirmCreate.open();
        },
    }
</script>

please try hopefully it will be a solution