NativeScript Vue — Navigation and Modals

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() {
      this.$navigateTo(App);
    },
  },
};
</script>

In the App component, we call this.$navigateTo with the Detail component to remove App from the screen show the Detail component.

Likewise, in the Detail component, we call the same method with the App component to replace the Detail component with the App component.

We can pass props to the component.

For instance, 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, {
        props: {
          foo: "bar",
        },
      });
    },
  },
};
</script>

components/Detail.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to App" @tap="goTo" />
      <Label :text="foo" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script>
import App from "@/components/App";

export default {
  props: ["foo"],
  methods: {
    goTo() {
      this.$navigateTo(App);
    },
  },
};
</script>

In the App component, we pass in an object into the 2nd argument with the props property to pass in props.

Then in the Detail component, we accept the prop as the props property.

And then we get its value and display it in the Label .

We can go back to the previous page with the $navigateBack method.

To use it, 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 Back" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    goTo() {
      this.$navigateBack();
    },
  },
};
</script>

We have the Detail component that calls the this.$navigateBack method when we tap on the button.

Modals

We can use the this.$showModal method to show a modal.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Modal" @tap="openModal" />
    </FlexboxLayout>
  </Page>
</template>

<script>
const Detail = {
  props: ["id"],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label :text="id" />
        <Button @tap="$modal.close" text="Close" />
      </StackLayout>
    </Page>
  `,
};

export default {
  methods: {
    openModal() {
      this.$showModal(Detail, { props: { id: 1 } });
    },
  },
};
</script>

We call the $showModal method with the Detail component.

And we can pass in props by setting the props property.

Conclusion

We can add navigation and show modals into our mobile app with NativeScript Vue.