Category: NativeScript Vue

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.

Stack Layout with Horizontally Aligned Children

We can add stack layouts with horizontally aligned the children components.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout backgroundColor="#3c495e">
      <Label
        text="left"
        horizontalAlignment="left"
        width="33%"
        height="70"
        backgroundColor="red"
      />
      <Label
        text="center"
        horizontalAlignment="center"
        width="33%"
        height="70"
        backgroundColor="green"
      />
      <Label
        text="right"
        horizontalAlignment="right"
        width="33%"
        height="70"
        backgroundColor="blue"
      />
      <Label
        text="stretch"
        horizontalAlignment="stretch"
        height="70"
        backgroundColor="yellow"
      />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the horizontalAlignment prop to the position we want to place the Label in.

Setting to 'stretch' will make the Label span the whole screen’s width.

Also, we can make child components vertically aligned.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout orientation="horizontal" backgroundColor="#3c495e">
      <Label
        text="top"
        verticalAlignment="top"
        width="70"
        height="33%"
        backgroundColor="red"
      />
      <Label
        text="center"
        verticalAlignment="center"
        width="70"
        height="33%"
        backgroundColor="green"
      />
      <Label
        text="bottom"
        verticalAlignment="bottom"
        width="70"
        height="33%"
        backgroundColor="blue"
      />
      <Label
        text="stretch"
        verticalAlignment="stretch"
        width="70"
        backgroundColor="yellow"
      />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the orientation to 'horizontal' to vertically align the Label s.

Then in the Label s, we set the verticalAlignment prop instead of horizontalAlignment .

WrapLayout

The WrapLayout component lets us position items in rows or columns.

We can add a row of equally-sized items and wrap any overflowing items by default.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <WrapLayout backgroundColor="#3c495e">
      <Label text="first" width="30%" height="30%" backgroundColor="red" />
      <Label text="second" width="30%" height="30%" backgroundColor="green" />
      <Label text="third" width="30%" height="30%" backgroundColor="blue" />
      <Label text="fourth" width="30%" height="30%" backgroundColor="yellow" />
    </WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the WrapLayout with Label s inside.

We can change the orientation prop to 'vertical' to wrap overflowing items into a new column.

To do this, we write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <WrapLayout orientation="vertical" backgroundColor="#3c495e">
      <Label text="first" width="30%" height="30%" backgroundColor="red" />
      <Label text="second" width="30%" height="30%" backgroundColor="green" />
      <Label text="third" width="30%" height="30%" backgroundColor="blue" />
      <Label text="fourth" width="30%" height="30%" backgroundColor="yellow" />
    </WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

ActionBar

We can use the ActionBar component to add a toolbar at the top of the activity window.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the ActionBar component to the top of the screen.

The title prop has the text that’s displayed at the top bar.

Also, we can add more items into the ActionBar :

<template>
  <Page>
    <ActionBar>
      <StackLayout orientation="horizontal">
        <Image
          src="res://icon"
          width="40"
          height="40"
          verticalAlignment="center"
        />
        <Label text="NativeScript" fontSize="24" verticalAlignment="center" />
      </StackLayout>
    </ActionBar>
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the verticalAlignment to 'center' to center the image vertically.

And we add the Label with the text to do the same.

We can add the app icon by setting the props for ActioBar :

<template>
  <Page>
    <ActionBar
      title="NativeScript App"
      android.icon="res://icon"
      android.iconVisibility="always"
    >
    </ActionBar>
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the android.icon and android.iconVisible props to add the icon and make it visible.

Also, we can remove the border by setting the flat prop to 'true' :

<template>
  <Page>
    <ActionBar title="NativeScript App" flat="true" />
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

Conclusion

We can add stack and wrap layouts, and a top bar to our mobile app with NativeScript Vue.

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.

Grid and Star Sizing

We can create a grid with star sizing to set the grid size proportionally for child elements.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the column to 1/3 and 2/3 of the width of the screen respectively.

And we set the row to 3/5 and 3/5 of the height of the screen respectively.

We can set the grid layout to fixed or auto-sizing.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the width of the 2nd column to auto so it’s sized to fit the content.

Also, we can set the grid layout with mixed sizing and merge cells.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout
      columns="40, auto, *"
      rows="40, auto, *"
      backgroundColor="#3c495e"
    >
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
      <Label text="1,2" row="1" col="2" backgroundColor="lightred" />
      <Label text="2,1" row="2" col="1" backgroundColor="lightgreen" />
      <Label text="2,2" row="2" col="2" backgroundColor="lightblue" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the colSpan and rowSpan props to merge columns and rows.

And we set the columns and rows prop to set the row and column sizes.

StackLayout

The StacjLayout component lets us add components and display them as a column.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout backgroundColor="#3c495e">
      <Label text="first" height="70" backgroundColor="red" />
      <Label text="second" height="70" backgroundColor="green" />
      <Label text="third" height="70" backgroundColor="blue" />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the Label s and display them in a column.

We can also display the components inside the layout by changing the orientation prop:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout orientation="horizontal" backgroundColor="#3c495e">
      <Label text="first" width="70" backgroundColor="red" />
      <Label text="second" width="70" backgroundColor="green" />
      <Label text="third" width="70" backgroundColor="blue" />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the orientation prop to 'horizontal' to set the Label s to display the Labels side by side.

Conclusion

We can add grid layouts and stack layouts with NativeScript Vue.

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.

FlexboxLayout

We can use the FlexboxLayout to add a layout based on flexbox.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout backgroundColor="#3c495e">
      <Label text="first" width="90" backgroundColor="red" />
      <Label text="second" width="90" backgroundColor="green" />
      <Label text="third" width="90" backgroundColor="blue" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

We add the backgroundColor prop to set the background color of the Label s.

text has the text. width sets the width.

So we get the Label s side by side.

We can also set the flexDirection prop to 'column' to create a column layout:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
      <Label text="first" height="90" backgroundColor="red" />
      <Label text="second" height="90" backgroundColor="green" />
      <Label text="third" height="90" backgroundColor="blue" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

The Label s will now be displayed in a column.

We can set the alignItems prop to align the items our way.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
      <Label text="first" width="90" height="90" backgroundColor="red" />
      <Label text="second" width="90" height="90" backgroundColor="green" />
      <Label text="third" width="90" height="90" backgroundColor="blue" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the alignItems prop to set the flex-start to align the items to the left.

The order of the components can be changed.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
      <Label
        text="first"
        order="2"
        width="90"
        height="90"
        backgroundColor="red"
      />
      <Label
        text="second"
        order="3"
        width="90"
        height="90"
        backgroundColor="green"
      />
      <Label
        text="third"
        order="1"
        width="90"
        height="90"
        backgroundColor="blue"
      />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the order prop to switch the order of the Label s in the flex container.

Components inside the FlexboxLayout will wrap automatically if they overflow the width of the screen.

For example, if we have:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
      <Label text="first" width="30%" backgroundColor="red" />
      <Label text="second" width="30%" backgroundColor="green" />
      <Label text="third" width="30%" backgroundColor="blue" />
      <Label text="fourth" width="30%" backgroundColor="yellow" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

Then the 4th Label will be pushed to the 2nd row.

This is because we set the flexWrap prop to 'wrap' .

GridLayout

The GridLayout component lets us arrange child elements in a table-like manner.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="115, 115" rows="115, 115">
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We add the Label component with the row and col props to set the row and column.

columns have the width for the columns.

And rows have the heights for each row.

Conclusion

We can add flexbox layouts and grid layouts with NativeScript Vue.

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.

Install NativeScript

We start by install the nativescript Node package globally by running:

npm install -g nativescript

Create the App Project

Once we installed the package, we create the project by writing:”

$ npm install -g @vue/cli @vue/cli-init
$ vue init nativescript-vue/vue-cli-template <project-name>
$ cd <project-name>
$ npm install

We install Vue CLI.

Then we create the project with the last 3 commands.

To run the project, we install the Genymotion emulator to preview the app.

It’ll show up as a regular Android device.

Then we can run tns preview or tns run to run the project after going into the folder.

This should be done as an admin user. Then we can select Configure for Local Build and let it install all the packages that are required to run the project.

If Genymotion is started, then you should see the project.

First App

Once we create our project, we should have the following in components/App.vue

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="*" rows="*">
      <Label class="message" :text="msg" col="0" row="0" />
    </GridLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      msg: "Hello World!",
    };
  },
};
</script>

<style scoped>
ActionBar {
  background-color: #53ba82;
  color: #ffffff;
}

.message {
  vertical-align: center;
  text-align: center;
  font-size: 20;
  color: #333333;
}
</style>

This is the main screen of the project and we display the ‘Hello World’ message on it.

We use the same Vue components as any web app, but we create a native app from it.

AbsoluteLayout

We can add elements with absolute positioning with the AbsoluteLayout component.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <AbsoluteLayout backgroundColor="#3c495e">
      <Label
        text="10,10"
        left="10"
        top="10"
        width="100"
        height="100"
        backgroundColor="green"
      />
      <Label
        text="150,10"
        left="120"
        top="10"
        width="100"
        height="100"
        backgroundColor="green"
      />
      <Label
        text="10,150"
        left="10"
        top="120"
        width="100"
        height="100"
        backgroundColor="green"
      />
      <Label
        text="150,150"
        left="120"
        top="120"
        width="100"
        height="100"
        backgroundColor="green"
      />
    </AbsoluteLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the AbsoluteLayout component to add our layout.

Inside it, we have the Label component to add text boxes and we display some text inside.

We set the left and top position of each component to position them.

DockLayout

DockLayout is a layout container that lets us dock child elements to the side or center of the layout.

For example, we cna write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <DockLayout stretchLastChild="false" backgroundColor="#3c495e">
      <Label text="left" dock="left" width="40" backgroundColor="lightgreen" />
      <Label text="top" dock="top" height="40" backgroundColor="#289062" />
      <Label text="right" dock="right" width="40" backgroundColor="lightgreen" />
      <Label
        text="bottom"
        dock="bottom"
        height="40"
        backgroundColor="#289062"
      />
    </DockLayout>
  </Page>
</template>

<script >
export default {};
</script>

We add the Label components to set its position.

The dock prop sets the location we dock to.

The text prop sets the text of the label.

Conclusion

We can create a native app with NativeScript Vue and add layouts easily.