NativeScript Vue — Navigation and Modals

Photo by Dennis Rochel on Unsplash

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

Navigation

We can use the $navigateTo method lets us show different components in our app.

For example, we can write:

components/App.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to Detail" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>
<script>
import Detail from "@/components/Detail";
export default {
  methods: {
    goTo() {
      this.$navigateTo(Detail);
    },
  },
};
</script>

components/Detail.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to App" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>
<script>
import App from "@/components/App";
export default {
  methods: {
    goTo() {…