Side Modal Component For Vue 3 – Side Panel

Side Panel is a side modal component for Vue 3 that allows you to create panels sliding from the edge of the screen, with a sticky header and/or footer.

How to use it:

1. Import and register the side panel component.

import { createApp } from 'vue';
import VueSidePanel from 'vue3-side-panel';
import 'vue3-side-panel/dist/vue3-side-panel.css'
const app = createApp(App);
app.use(VueSidePanel);

2. Add the VueSidePanel component to the template.

<template>
  <VueSidePanel
    v-model="isOpened"
    width="450px"
  >
    <div style="padding-top: 70px; color: #f14668">
      <h2
        v-for="item in 50"
        :key="item"
        :style=""
        >
        This is scrolled body!
      </h2>
    </div>
  </VueSidePanel>
</template>

import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    return {
      isOpened: ref(false)
    }
  }
})

3. Available component props.

idName: {
  type: String as PropType<string>,
  default: 'vsp-container',
},
hideCloseBtn: {
  type: Boolean as PropType<boolean>,
  default: false,
},
noClose: {
  type: Boolean as PropType<boolean>,
  default: false,
},
side: {
  type: String as PropType<string>,
  validator: (value: string) => ['top', 'right', 'bottom', 'left'].includes(value),
  default: 'right',
  required: true,
},
zIndex: {
  type: [Number, String] as PropType<number | 'auto' | undefined>,
  default: 'auto',
},
width: {
  type: String as PropType<string>,
  default: 'auto',
},
height: {
  type: String as PropType<string>,
  default: 'auto',
},
lockScroll: {
  type: Boolean as PropType<boolean>,
  default: false,
},
lockScrollHtml: {
  type: Boolean as PropType<boolean>,
  default: true,
},
modelValue: {
  type: Boolean as PropType<boolean>,
  default: false,
  required: true,
},
overlayColor: {
  type: String as PropType<string>,
  default: 'black',
},
overlayOpacity: {
  type: Number as PropType<number>,
  default: 0.5,
},
overlayDuration: {
  type: Number as PropType<number>,
  default: 500,
},
panelColor: {
  type: String as PropType<string>,
  default: 'white',
},
panelDuration: {
  type: Number as PropType<number>,
  default: 300,
},
headerClass: {
  type: String as PropType<string>,
  default: '',
},
bodyClass: {
  type: String as PropType<string>,
  default: '',
},
footerClass: {
  type: String as PropType<string>,
  default: '',
},

Preview:

Changelog:

v1.2.0 (04/16/2023)

• Bugfixes

Download Details:

Author: headmandev

Live Demo: https://vue3-side-panel.netlify.app/

Download Link: https://github.com/headmandev/vue3-side-panel/archive/refs/heads/main.zip

Official Website: https://github.com/headmandev/vue3-side-panel

Install & Download:

# NPM
$ npm i vue3-side-panel