2

I am trying to use external components with Vue Typescript Class Components. I've installed standard template and modified its <script> block according to instruction:

    import { Vue, Component, Prop } from "vue-property-decorator";

    @Component
    export default class App extends Vue {
        msg: string = "Hello";
    }

But I am getting an error: No known component for element RadSideDrawer.

I also tried to include RadSideDrawer to @Component options with no success:

    import { Vue, Component, Prop } from "vue-property-decorator";
    const RadSideDrawer = require('nativescript-ui-sidedrawer').RadSideDrawer;

    @Component({
        components: {
            RadSideDrawer,
        }
    })
    export default class App extends Vue {
        msg: string = "Hello";
    }

All my component code is here. I didn't modify any other parts of the template, so I have this lines in main.ts:

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

But it doesn't work. How to use RadSideDrawer with class components?

Denis Peshekhonov
  • 73
  • 7
  • It works on my end, if you still have issues please share a sample repo where the issue can be reproduced. – Manoj Nov 09 '19 at 21:11
  • I confirm that vue-class-component conflicts with RadSideDrawer. I was not able to make it work with it upgrading all packages to their latest versions nor importing `Vue` from `nativescript-vue` rather than `vue-property-decorator`. If you come up with a solution share it please. – belvederef Nov 10 '19 at 21:35
  • I probably found a way to make it work, but run into another issue: https://github.com/NativeScript/NativeScript/issues/8065 – Denis Peshekhonov Nov 14 '19 at 00:55

1 Answers1

0
//main.ts
...
import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
Vue.use(RadSideDrawer)
...

//mycomponent.vue
<template>
  <Page>
    <RadSideDrawer ref="drawer">
      <StackLayout ~drawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
          <Label text="Navigation Menu"></Label>
        </StackLayout>
        <Label
          text="Close Drawer"
          color="lightgray"
          padding="10"
          style="horizontal-align: center"
          @tap="onCloseDrawerTap"
        ></Label>
      </StackLayout>
      <StackLayout ~mainContent>
        <StackLayout orientation="vertical">
          <Button
            text="OPEN DRAWER"
            @tap="onOpenDrawerTap()"
            class="drawerContentButton"
          ></Button>
        </StackLayout>
      </StackLayout>
    </RadSideDrawer>
  </Page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({ name: 'Drawer' })
export default class Drawer extends Vue {

  private onOpenDrawerTap () {
    const ref = this.$refs.drawer as any
    ref.showDrawer()
  }
  private onCloseDrawerTap () {
    const ref = this.$refs.drawer as any
    ref.closeDrawer()
  }
}
</script>
Андрей Замышляев
  • 1