Getting Started with Mobile Development 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.