RootLayout

Layout container for dynamically layering views with a programmatic API.

The official documentation for RootLayout is here, but in NativeScript-Vue it will not work with Vue components since RootLayout expects a NativeScript view and a Vue component is a node and not a NativeScript view.

This documentation explains how to create a NativeScript view from a Vue component in Nativescript View, but this section presents a typical case for use with RootLayout.

Add the RootLayout view to your application. Reference.
Create NativeScript view from a Vue component using createNativeView and open RootLayout.

vue

<script lang="ts" setup>
import { createNativeView } from "nativescript-vue"
import { getRootLayout } from "@nativescript/core"
import MyComponent from "./MyComponent.vue"

function showRootLayout(){
  const node = createNativeView(MyComponent, {
    props: {
      foo: "bar",
      onChange(data){
        // can listen to events launched via `emit`. In this example: `emit("change")`
      }
    }
  })
  node.mount();
  
  getRootLayout()
    .open(node.nativeView, {
      animation: {...},
      ...
    });
}

</script>

<template>
  <Button @tap="showRootLayout" text="Show RootLayout" />
</template>

RootLayout ​

RootLayout