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.