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.
Page
The Page component lets us render the app’s screen.
It’s a wrapper for one or more components.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Label text="Foo" />
<Label text="Bar" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {};
</script>
to add the labels to the page.
Placeholder
The Placeholder component lets us add native widgets into our app.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Placeholder @creatingView="creatingView" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
methods: {
creatingView(args) {
const nativeView = new android.widget.TextView(args.context);
nativeView.setSingleLine(true);
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
nativeView.setText("Hello World");
args.view = nativeView;
},
},
};
</script>
We listen to the creatingView event and run the creatingView method when it’s emitted.
Then we create the text view with the android.widget.TextView constructor.
We pass in the args.context property to return the native view.
Then we call the setEllipseize to set the ellipsis for the text view.
And we call setText to set the text for the text view.
And we set that as the value of the args.view property to set the view.
Progress
The Progress component lets us show a bar to show the progress of a task.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Progress :value="currentProgress" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
currentProgress: 50,
};
},
};
</script>
We add the Progress component to show the progress bar.
The value prop has the progress value. It can be between 0 and 100.
ScrollView
The ScrollView component lets us add a scrollable content area into our app.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal">
<Label :text="n" v-for="n in 100" :key="n" width='30' />
</StackLayout>
</ScrollView>
</FlexboxLayout>
</Page>
</template>
<script >
export default {};
</script>
to add a ScrollView with a StackLayout inside.
We set both orientation props to 'horizontal' to display a horizontal scroll view.
Then we add the Label inside the StackLayout to display the numbers.
Now we can scroll through the numbers.
SearchBar
The SearchBar component lets us add an input box to let users enter a search query.
For instance, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<SearchBar v-model="searchQuery" @submit="onSubmit" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
searchQuery: "",
};
},
methods: {
onSubmit() {
alert(this.searchQuery);
},
},
};
</script>
We bind the input value of the SearchBar to the searchQuery reactive property.
Then when we press Enter, the submit event is emitted.
Then the onSubmit method is called.
We can add a search hint with the hint prop.
Conclusion
We can add a page, progress bar, scroll view, and search bar into our mobile app with NativeScript Vue.
