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.
Label
We can add a label to our app with the Label component.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Label text="Label" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {};
</script>
to add a label into our app.
The text prop has the text to display.
We can also add formatted text with:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Label textWrap>
<FormattedString>
<Span
text="hello world"
fontWeight="bold"
fontStyle="italic"
style="color: red"
/>
</FormattedString>
</Label>
</FlexboxLayout>
</Page>
</template>
<script >
export default {};
</script>
We add the FormattedString component to add the formatted string.
The Span has the text, font weight, font style, and other styles we want to add.
ListPicker
We can add a component to let users pick a choice with the ListPicker component.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<ListPicker
:items="listOfItems"
selectedIndex="0"
@selectedIndexChange="selectedIndexChanged"
/>
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
listOfItems: ["apple", "orange", "grape"],
};
},
methods: {
selectedIndexChanged({ value }) {
console.log(value);
},
},
};
</script>
We add the ListPicker component with the items prop to set the items displayed.
selectedIndex is set to 0 to select the first item by default.
And we listen to the selectedIndexChange event that’s emitted from the component.
We can get the index of the selected component with the value prop.
We can shorten this with the v-model directive:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<ListPicker :items="listOfItems" v-model="selectedItem" />
<Label :text="selectedItem" style="text-align: center" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
listOfItems: ["apple", "orange", "grape"],
selectedItem: "",
};
},
};
</script>
It binds the index of the selected item to the selectedItem reactive property.
ListView
We can add a vertically scrolling list view with the ListView component.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<ListView for="item in listOfItems" [@itemTap](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2FitemTap "Twitter profile for @itemTap")="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
</ListView>
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
listOfItems: [
{
text: "apple",
},
{ text: "orange" },
{
text: "grape",
},
],
selectedItem: "",
};
},
methods: {
onItemTap({ item }) {
console.log(item);
},
},
};
</script>
to add the ListView component to display our objects in our code.
We add a Label into the default slot to display the items the way we like.
The itemTap event is emitted when we tap on an item.
Then we can get the tapped item with the onItemTap method.
Also, we can add multiple v-template blocks.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<ListView for="item in listOfItems" @itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<Label :text="item.text" color="red" />
</v-template>
</ListView>
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
listOfItems: [
{
text: "apple",
},
{ text: "orange" },
{
text: "grape",
},
],
selectedItem: "",
};
},
methods: {
onItemTap({ item }) {
console.log(item);
},
},
};
</script>
We add the if prop to the v-template to show something different for items with an odd index with the $odd reactive property.
Also, we can use $even to for check if an item has an even index.
$index has the index of the item.
ListView doesn’t loop through the list items like we expect with v-for .
It just creates the required views to display the currently visible items on the screen.
The views are reused for items that were off-screen and now shown on-screen.
Conclusion
We can add labels, list pickers, and list views into our mobile app with NativeScript Vue.
