Sliding Panel Component For Vue – vue-slideout

If you are working on any vue based app and looking for sliding panel component then here i am going to share an awesome library which you can use to create simple sliding panel on your vue application. There are many types of sliding panel in this library like left right top bottom slide panel which you can choose as per your project need. Integration of this sliding component is very easy just follow the below steps.
Vue Sliding Panel Component

Install

NodeJS ENV (commonjs)

npm i @hyjiacan/vue-slideout

or

yarn add @hyjiacan/vue-slideout

Unlike node env, a lowercase global slideout will be exploded.

The newest version

<script src="https://cdn.jsdelivr.com/npm/@hyjiacan/vue-slideout/lib/slideout.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.css" />

Specified version

<script src="https://cdn.jsdelivr.com/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.css" />

unpkg is also available: instead cdn.jsdelivr.net with unpkg.com

And you can use the uncompressed by instead slideout.umd.min.js with slideout.umd.js

Usage

Global (recommended)

main.js

import Vue from 'vue'
import SlideOut from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'


Vue.use(SlideOut, {

})

In Component

Foobar.vue

<slide-out @close="onClose">
    <div slot="header" slot-scope="{title}">
    </div>
    content
</slide-out>
<script>
import SlideOut from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'

export default {
    name: 'Foobar',
    components: {SlideOut},
    methods: {
        onClose (e) {

            e.wait = true

            setTimeout(() => {

                e.close = true
            }, 3000)
        }
    }
}
</script>

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by hyjiacan. Visit their official repository for more information and follow for future updates.