Author: John Au-Yeung

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.