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.
WebView
We can add a WebView component to display web content in our app.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<WebView src="https://www.yahoo.com/" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {};
</script>
We set the URL of the web page to show as the value of the src prop.
Also, we can show a local HTML page by writing:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<WebView src="~/assets/hello.html" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {};
</script>
And we also can show a rendered HTML string with it:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<WebView src="<div><h1>hello world</h1></div>" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {};
</script>
We set the src prop to an HTML string and it’ll be displayed.
ActionDialog
We can show an action dialog with the action method.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Button text="Open Dialog" @tap="openDialog" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
methods: {
async openDialog() {
const result = await action("Your message", "Cancel", [
"Option1",
"Option2",
]);
console.log(result);
},
},
};
</script>
We add a button to call the openAlert method to open the action dialog when we tap it.
The action function is a global function that’s called to open the action dialog.
The first argument is the message, which is displayed as the title.
The 2nd argument is the cancel button text.
And the 3rd argument is an array of option texts that we can tap on.
AlertDialog
We can show an alert dialog with the alert global function.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Button text="Open Dialog" @tap="openDialog" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
methods: {
async openDialog() {
await alert({
title: "Your title",
message: "Your message",
okButtonText: "OK",
});
console.log("Alert dialog closed");
},
},
};
</script>
We add the button to show the alert when we tap on the button.
The alert function takes an object that lets us set the title of the dialog.
message is the content text of the dialog.
okButtonText is the OK button’s text.
Also, we can just pass in a string to display:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Button text="Open Dialog" @tap="openDialog" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
methods: {
async openDialog() {
await alert("hello world");
console.log("Alert dialog closed");
},
},
};
</script>
ConfirmDialog
The confirm global function lets us open a confirm dialog.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Button text="Open Dialog" @tap="openDialog" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
methods: {
async openDialog() {
const result = await confirm({
title: "Your title",
message: "Your message",
okButtonText: "OK",
cancelButtonText: "Cancel",
});
console.log(result);
},
},
};
</script>
We add the button to open the confirm dialog by calling the confirm function.
The title property has the title text.
message has the dialog message.
okButtonText has the OK button’s text.
And the cancelButtonText has the cancel button text.
We can also add a simple dialog by writing:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Button text="Open Dialog" @tap="openDialog" />
</FlexboxLayout>
</Page>
</template>
<script>
export default {
methods: {
async openDialog() {
const result = await confirm("Your message");
console.log(result);
},
},
};
</script>
The string is the message text for the confirm dialog.
Conclusion
We can add web views and various dialogs with NativeScript Vue.
