How to use vue components in nativescript-vue popups?

I open the popup in some root component like this:

import parentt from "./parentt.vue";
.
.
.
this.$showModal(parentt, {
  fullscreen: true,
});

This is the content of parentt.vue:

<template>
  <StackLayout>
    <label text="parent" />
    <!-- <child /> -->
  </StackLayout>
</template>

<script>
  import child from "./child.vue";
  export default {
    components: [child],
  };
</script>

<style scoped>
</style>

This is the content of child.vue:

<template>
  <StackLayout>
    <label text="child" />
  </StackLayout>
</template>

<script>
  export default {};
</script>

<style scoped></style>

Whith <child /> commented out I get a popup with text parent in it.

with <child /> being there I get a white screen.

I’m using many components in different places in my code, it’s only here in a popup that it doesn’t work.

Answer

You have wrong bracket in components object in parentt.vue. Components is an object, thus use braces instead of the square brackets.

So, the correct script section looks like in parentt.vue:

<script>
  import child from "./child.vue";
  export default {
    components: {
       child
    },
  };
</script>

I recommend for detailed informations the official vue documentation

Advertisement

Answer