0.0.4 • Public • Published

NativeScript-Vue Multi Drawer

A plugin which provides a drawer component that supports multiple drawers.

All drawers are optional, and can be configured individually.


  • drawers on left, right, top and bottom
  • swipe to open
  • swipe to close
  • tap outside to close
  • progressively dim main content as the drawer is opened

Quick Start

$ npm i --save nativescript-vue-multi-drawer
// main.js
import Vue from 'nativescript-vue'
+ import MultiDrawer from 'nativescript-vue-multi-drawer'
+ Vue.use(MultiDrawer)

Optionally set default options by passing options when installing the plugin:

Vue.use(MultiDrawer, { 
  // override any option here
  // for example enable debug mode
  debug: true

For the available options check the source of defaultOptions

  <StackLayout slot="left">
    <Label text="Im in the left drawer" />  
  <StackLayout slot="right">
    <Label text="Im in the right drawer" />  
  <StackLayout slot="top">
    <Label text="Im in the top drawer" />  
  <StackLayout slot="bottom">
    <Label text="Im in the bottom drawer" />  
  <Frame /> <!-- main content goes into the default slot -->

The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

Opening a drawer from code

Assign a ref to the Drawer component

<MultiDrawer ref="drawer" />

And use this.$ where side is a string: left, right, top or bottom.

Using v-model to toggle the drawer

The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

<MultiDrawer v-model="drawerState" />
export default {
  data() {
    return {
      drawerState: false // closed
  methods: {
    doStuff() {
      // do stuff
      this.drawerState = 'left' // this will open the left drawer

Package Sidebar


npm i nativescript-vue-multi-drawer

Weekly Downloads






Unpacked Size

17.5 kB

Total Files


Last publish


  • rigor789