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.
LoginDialog
NativeScript Vue comes with a login 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 login("Login", "Username field", "Password field");
const { result: res, userName, password } = result;
console.log(res, userName, password);
},
},
};
</script>
We have a button to open the login dialog.
The login function opens the login dialog.
The first argument is the message content.
The 2nd and 3rd arguments are the placeholders for the username and password inputs respectively.
Then we can get the values of the username and password from the resolved value.
res has the form validation result.
We can set more options 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 login({
title: "Login Title",
message: "Login message",
okButtonText: "OK",
cancelButtonText: "Cancel",
userName: "user",
password: "password",
});
const { result: res, userName, password } = result;
console.log(res, userName, password);
},
},
};
</script>
title has the login dialog title.
message has the message for the login dialog.
okButtonText sets the OK button’s text.
cancelButtonText sets the cancel button’s text.
userName sets the default value of the username field.
And password sets the default value of the password field.
PromptDialog
The prompt global function lets us open a dialog with a single-line text input.
To use it, 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 prompt(
"Enter something",
"Suggested user input"
);
console.log(result);
},
},
};
</script>
We have a button to open the prompt dialog.
The prompt method takes the dialog text as the first argument and the default value for the input as the 2nd argument.
We can also add more options. 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 prompt({
title: "Title",
message: "Enter something",
okButtonText: "OK",
cancelButtonText: "Cancel",
defaultText: "Suggested value",
});
console.log(result);
},
},
};
</script>
We set the title value to show the dialog title.
message has the dialog message.
okButtonText has the OK button text.
cancelButtonText has the cancel button text.
defaultText has the default value for the input.
Conclusion
We can add a login and prompt dialog into our mobile app with NativeScript Vue.
