How to properly use RadSideDrawer - Slide menu nativescript-vue?

Question

Vue.js

I can’t run on nativescript-vue to launch a ready-made menu slide from Progress NativeScript UI
Here is the syntax about the App.vue tilde
:

<template>
  <Page>
    <ActionBar title="DailyCricket" class="action-bar">
        <ActionItem @tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
    </ActionBar>
    <RadSideDrawer ref="drawer" showOverNavigation="true">
        <StackLayout ~drawerContent class="sideStackLayout">
            <StackLayout class="sideTitleStackLayout">
                <Label text="Navigation Menu"></Label>
            </StackLayout>
            <StackLayout class="sideStackLayout">
                <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
                <Label text="Social" class="sideLabel"></Label>
                <Label text="Promotions" class="sideLabel"></Label>
                <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
                <Label text="Important" class="sideLabel"></Label>
                <Label text="Starred" class="sideLabel"></Label>
                <Label text="Sent Mail" class="sideLabel"></Label>
                <Label text="Drafts" class="sideLabel"></Label>
            </StackLayout>
            <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" @tap="onCloseDrawerTap"></Label>
        </StackLayout>
        <StackLayout ~mainContent>
            <Label textWrap="true" class="drawerContentText"></Label>
            <Button text="OPEN DRAWER" @tap="openDrawer()" class="drawerContentButton"></Button>
        </StackLayout>
    </RadSideDrawer>
  </Page>
</template>

<script>
  export default {
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        openDrawer() {
            this.$refs.drawer.nativeView.showDrawer();
        },
        onCloseDrawerTap() {
            this.$refs.drawer.nativeView.closeDrawer();
        },
        toggleDrawer() {
          this.$refs.drawer.nativeView.toggleDrawerState();
        }
    },
    mounted() {
        this.$refs.drawer.nativeView.drawerContent = this.$refs.drawerContent.nativeView
        this.$refs.drawer.nativeView.mainContent = this.$refs.mainContent.nativeView
    }
  }
</script>

main.js:

import Vue from 'nativescript-vue'
import App from './components/App'
import VueDevtools from 'nativescript-vue-devtools'

if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

Vue.registerElement('RadSideDrawer', () => require('nativescript-ui-sidedrawer').RadSideDrawer);

new Vue({
  render: h => h('frame', [h(App)])
}).$start()

The error itself:

System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: TypeError: viewClass is not a constructor
System.err: File: "file:///data/data/org.nativescript.ege/files/app/vendor.js, line: 4888, column: 6

Answer 1

components/Main.vue

<template>
    <Page class="page">
        <GridLayout rows="*" height="700" >
            <RadSideDrawer ref="drawer">
                <StackLayout ~drawerContent backgroundColor="gray">
                    <StackLayout height="56" style="text-align: center; vertical-align: center;">
                        <Label text="Navigation Menu" />
                    </StackLayout>
                    <StackLayout>
                        <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" />
                    </StackLayout>
                    <Label text="Close" color="lightgray" padding="10" style="horizontal-align: center"
                        @tap="onCloseDrawerTap" />
                </StackLayout>
                <StackLayout ~mainContent @swipe="onOpenDrawerTap">
                    <Label :text="mainContentText" textWrap="true" fontSize="13"
                        padding="10" />
                    <Button text="Open Drawer" @tap="onOpenDrawerTap" margin="10"
                        style="horizontal-align: left" />
                </StackLayout>
            </RadSideDrawer>
        </GridLayout>
    </Page>
</template>

<script>
    import Vue from "nativescript-vue";
    import RadSideDrawer from "nativescript-ui-sidedrawer/vue";
    Vue.use(RadSideDrawer);
 
    export default {
        methods: {
            onOpenDrawerTap() {
                this.$refs.drawer.nativeView.showDrawer();
            },
            onCloseDrawerTap() {
                this.$refs.drawer.nativeView.closeDrawer();
            }
        },

        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."
            };
        }
    };
</script>

import Vue from 'nativescript-vue'
import Main from './components/Main'

new Vue({
  render: h => h('frame', [h(Main)])
}).$start()