Sidedrawer in Vue


Anyone know how to implement sidedrawer in NS Vue ?
i’m using nativescript-vue/vue-cli-template

I already install it using : npm install --save nativescript-ui-sidedrawer

Then register it in main.js :
Vue.registerElement(‘RadSideDrawer’, () => require(‘nativescript-ui-sidedrawer’).RadSideDrawer)

Then i try this Sidedrawer code from nativescript playground, with a litle bit changes, but it doesn’t work.

  <Page class="page">
<GridLayout rows="*" height="1500px">

  <RadSideDrawer ref="drawer">
    <StackLayout ~drawerContent backgroundColor="gray">
      <StackLayout height="56" style="text-align: center; vertical-align: center;">
        <Label text="Navigation Menu" />
        <Label text="Primary" padding="10" backgroundColor="lightgray" />
        <Label text="Social" padding="10" />
        <Label text="Promotions" padding="10" />
        <Label text="Labels" padding="10" backgroundColor="lightgray" />
        <Label text="Important" padding="10" />
        <Label text="Starred" padding="10" />
        <Label text="Sent Mail" padding="10" />
        <Label text="Drafts" padding="10" />
      <Label text="Close" color="lightgray" padding="10" style="horizontal-align: center" @tap="onCloseDrawerTap" />

    <StackLayout ~mainContent>
      <Button text="MENU" @tap="onOpenDrawerTap" margin="10" style="horizontal-align: right" />

        <TabView height="300px">
          <TabViewItem title="Tab 1">
            <Label text="Label in Tab 1" />
          <TabViewItem title="Tab 2">
            <Label text="Label in Tab 2" />



// require("nativescript-vue").registerElement("RadSideDrawer", () => require("nativescript-ui-sidedrawer").RadSideDrawer);

  export default {
    data() {
    return {
      mainContentText: "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
      + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.",
      segmentedBarItems: function () {
        var segmentedBarModule = require("ui/segmented-bar");
        let segmentedBarItem1 = new segmentedBarModule.SegmentedBarItem();
        segmentedBarItem1.title = "Item 1";
        let segmentedBarItem2 = new segmentedBarModule.SegmentedBarItem();
        segmentedBarItem2.title = "Item 2";
        return [segmentedBarItem1, segmentedBarItem2];
      selectedBarIndex: 0,
   methods: {
    onOpenDrawerTap() {
    onCloseDrawerTap() {


rifkrinaldi, Did you get this to work?

I am getting an error “Error: A Frame must be used to navigate to a Page.”


Did you solve the problem?


sorry. still hasn’t got time to play around


This problem was recently discussed here. The problem is related with vue-router, the solve is to use Manual Routing


thanks mate, will check it out