<Frame> is a UI component used to display <Page> elements. Every app needs at least a single <Frame> element, usually set as the root element.

A single root Frame

If you are migrating from nativescript 3.x and want to preserve the old behavior, the following snippet in your entry file will create a root frame and render your default page.

new Vue({
  render: h => h('Frame', [ h(HomePageComponent) ])
})

Multiple Frames

If you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side

<GridLayout columns="*, *">
  <Frame col="0"/>
  <Frame col="1"/>
</GridLayout>

A frame with a default page

<Frame>
  <Page>
    <ActionBar title="Default Page Title" />
    <GridLayout>
      <Label text="Default Page Content" />
    </GridLayout>
  </Page>
</Frame>

A frame with a default page from an external component

<Frame>
  <Page>
    <Home />
  </Page>
</Frame>

import Home from './Home'

export default {
  components: {
    Home
  }
}

Native component