This Tech Note describes how to enable geolocation functionality in Vue Native (mobile) apps.

This first post deals with configuring Vue Native applications. The second post will show how to implement user location detection and display of position.

Vue Native

First, what is Vue Native? It’s a framework for developing native mobile apps for IOS and Android platforms. It is a wrapper around React Native API’s. Sometimes, this wrapper can get rather thin and underlying code bleeds through to the development task particularly with rather unhelpful error messaging. However, using the Expo.io framework, a lot of effort is abstracted away. But most of the React Native functionality is still directly available with some syntax changes.

Geolocation is obviously important to many applications but particularly for serving information to users such as nearest places of interest or address finding and routing.

Short Form Setup

Setting up a vue native app is quite straightforward. It requires recent versions of node.js & npm to enable a CLI (command line interface) install.

Requirements:

• Globally installed node >= 6.0
• Globally installed npm >= 4.0
• Globally installed Expo CLI

We’re going to use the Expo CLI.

npm install --global expo-cli

Create New Project

We’ll target the ios platform which will provide us an ios simulator (which should auto-launch) as well as physical device handling by scanning a QR code. Android is similar. This will display a basic app to prove everything is running. The following instructions will create the app and install dependencies.

$ vue-native init geoDemo
$ cd geoDemo
$ npm run ios

Anatomy

Vue Native follows a similar structure to web Vue applications. The following illustrates the required Hello World app.

• Template (views)
• Script (javascript)
• Style (obvious)

Replace the content of App.vue with the following:

Template

Each app requires a template and here we are using a container to provide an entity for component styling. The double {{ }} is moustache syntax for interpolation.

<template>
  <view class="container">
    <text class="text-color-primary">{{message}}</text>
  </view>
</template>

Javascript

Similar to web Vue, there is a data function that returns the message content. In this static example, the data is fixed but it does have to be returned from a data function. Note the value of the ‘key’ which is used in the template interpolation inside the ‘moustache’ double curly braces and is replaced by the assigned value.

<script>
export default {
  data: function() {
    return {
      message: "Hello World"
    };
  }
};
</script>

Style

What’s there to say?

<style>
.container {
  flex: 1;
  background-color: white;
  align-items: center;
  justify-content: center;
}
.text-color-primary {
  color: blue;
  font-size: 30;
}
</style>

The second part of this TechNote will code the user location.