A complete record of the process of building mobile applications using Vue Native

Preface

Vue Native is a JavaScript framework designed to build cross-platform mobile applications using JavaScript that can run on Android and iOS. By wrapping React Native, developers can use Vue Native to build mobile apps using Vue.js.

Because of this, everything that can be done in React Native can also be done in Vue Native, and the code is compiled to React Native. This way, developers can benefit from what both the Vue and React Native ecosystems have to offer.

In this article, we will discuss the features of Vue Native and how to create mobile apps using Vue Native.

Features of Vue Native

Vue Native has many useful features to consider when deciding to use Vue.js to build mobile apps.

Declarative rendering

Vue Native uses a declarative programming paradigm. This means we only have to declare how we want our components and state to render to get the results we want.

Two-way binding

In our Vue Native app, we can share data between our component class and its template. If we change the data in the state, it will automatically reflect in the UI.

We still have to access v-model for two-way data binding. This means we can use v-model to bind the value of an input element to our component's data property.

The richness of the Vue.js ecosystem

The Vue ecosystem is one of the largest and fastest growing ecosystems in the JavaScript space. Building applications with Vue Native provides the benefits of the larger Vue ecosystem.

This means we can use features like v-if for conditional rendering, v-model for two-way data binding, v-for for list rendering, and Vuex for state management.

Compiling to React Native

Because Vue Native depends on React Native, it is easier for developers familiar with the React Native ecosystem to get started.

We can also render React Native components in Vue Native without writing a single line of extra configuration for easy integration and increased productivity.

Setting up your development environment

The quickest and easiest way to get started with Vue Native is to bootstrap a mobile app using the Vue Native CLI. This CLI generates a simple single-page application using the Expo CLI or the React Native CLI.

This means we have to install either CLI, as required by our application, to use the Vue Native CLI.

To get started, we have to install some dependencies. First, run the command below to install Vue Native CLI globally.

$ npm install --g vue-native-cli

Next, install the Expo CLI globally, although this is interchangeable with the React Native CLI:

$ npm install --g expo-cli

Creating a Vue Native Project

Now that both Vue Native and Expo CLI are installed globally, let's create a Vue Native project using the following command:

vue-native init <yourProjectName>

Start a development server by navigating to the root directory of your project and running this command:

$ cd <yourProjectName>
$ npm start

Metro Bundler compiles JavaScript code in React Native, running from http://localhost:19002/. By accessing http://localhost:8080/ in a web browser, the following page will appear:

To view your Vue Native app on a physical device, scan the QR code in your browser and open the link in Expo Go on Android or iOS.

We can also open the app on an Android emulator or iOS simulator by clicking on the link displayed in the browser, but not all APIs available in Expo Go are available on the simulator.

As an alternative, we can clone the Kitchen Sink demo application prepared by the Vue Native core team.

Vue Native UI Components

Vue Native provides some out-of-the-box UI components to build application interfaces. Let’s take a look at some of the most important ones.

View Components

The view component works just like the div tag in our normal HTML. This component is the basic building block for creating user interfaces in Vue Native, just like in React Native.

We can have multiple subcomponents in a view component, such as the following code.

<template>
  <view class="container">
    <text>My Awesome Vue Native App</text>
  </view>
</template>

Text component

To output text in our mobile app, we cannot use regular HTML tags like h1 or p. Instead, we have to use the <text>...<text> component. Using this component is very straight forward.

<template>
  <text>Hello World</text>
</template>

Image component

The Image component renders static images, network images, and images from the user's device.

Unlike the src attribute used in the normal img tag, here we bind the source attribute in the image component to dynamically load our images. This allows webpack to bundle our image assets during the build process.

We can load an image into our Vue Native app by adding the following:

<template>
    <!-- Network image -->
  <image
     :style="{ width: 300, height: 150 }"
     :source="{
         uri:'https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
      }"
   />

  <!-- Static image -->
  <image
     :style="{ width: 300, height: 150 }"
     :source="require('./assets/photo.jpg')"
  />

  <!-- Local disk image --> 
  <image
     :style="{width: 66, height: 58}"
     :source="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}"
   />
</template>

TextInput Component

The TextInput component enters text into an application through the user's keyboard. We can use v-model to bind the data in our state to the TextInput component. This allows us to get and set the value of a TextInput seamlessly:

<template>
  <view class="container"> 
    <text-input
      :style="{
        height: 30,
        width: 250,
        borderColor: '#511281',
        borderWidth: 1,
      }"
      v-model="text"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
};
</script>

The above code then outputs the following screen in the Vue Native app:

NativeBase UI components

To build a production-ready mobile app, using only the built-in Vue Native components may not be enough. Fortunately, Vue Native brings the advantages of both React Native and Vue.js ecosystems, so we can use NativeBase UI components.

NativeBase was created by GeekyAnts, the same team behind Vue Native. This UI component gave us a truly native look and feel in our mobile apps, providing platform-specific designs for both Android and iOS through the same JavaScript codebase.

Two-way data binding

Sharing data between our Vue component template and the Vue state in Vue Native is a breeze using v-model. We can explore two-way data binding using the v-model directive as follows:

<template>
  <view class="container"> 
    <text-input
      :style="{
        height: 30,
        width: 250,
        borderColor: '#511281',
        borderWidth: 1,
      }"
      v-model="text"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
};
</script>

By outputting an input field with data binding from our state to the input field and a text component, we can see the following:

Navigation and Routing

Navigation and routing in Vue Native applications are handled by the Vue Native Router library. Under the hood, this library uses the popular React Navigation package. Both Vue Native Router and React Navigation have similar APIs, so the installation is also similar.

The library does not come pre-installed, so in order to start using navigation in our application, we have to install it in the following way.

npm i vue-native-router

Please note that we need to install the following packages for Vue Native Router to work properly:

• react-native-reanimated
• react-native-gesture-handler
• react-native-paper

Run the following command in the project root directory to install these packages:

npm i react-native-reanimated react-native-gesture-handler react-native-paper

Vue Native Router provides StackNavigator and DrawerNavigator to register screens for navigation:

<script>
import {
  createAppContainer,
  createStackNavigator,
} from "vue-native-router";

import SettingsScreen from "./screens/SettingsScreen.vue";
import HomeScreen from "./screens/HomeScreen.vue";

const StackNavigator = createStackNavigator(
  {
    Settings: SettingsScreen,
    Home: HomeScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppNavigator = createAppContainer(StackNavigator);

export default {
  components: { AppNavigator },
}
</script>

To navigate between screens, call the navigate method on the navigation object, which is passed as props like this:

<script>
export default {
  // navigation is declared as a prop
  props: {
    navigation:
      type: Object
    }
  },
  methods: {
    navigateToScreen() {
      this.navigation.navigate("Profile");
    }
  }
}
</script>

State Management

For the centralized state management mode in Vue Native applications, we can use Vue's official state management library Vuex.

Integrating Vuex is very simple. First, install Vuex using one of the following commands:

npm i vuex
//or
yarn add vuex

Create a central storage file and add state, getters, mutations, or actions as needed by your application. For simplicity, the state object is used here:

// store/index.js

import Vue from 'vue-native-core';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    name: 'Ejiro Asiuwhu',
  },
});
export default store;

Using data and methods in our store is very different from a traditional Vue application. Here is how we import and use the data in our store:

<script>
import store from "./store";
export default {
  computed: {
    name() {
      return store.state.name;
    },
  },
};
</script>

Notice that we are not using this.$store as we normally would in a Vue and Vuex application setup.

Accessing device APIs

Thanks to React Native’s rich ecosystem, it is possible to access native device APIs in our Vue Native app. For example, to access the user's device geolocation API in our app, we can use expo-location like this.

<template>
  <view class="container">
 <button
      :on-press="getLocation"
      title="Get Location"
      color="#184d47"
      accessibility-label="Get access to users' location"
    >
    <text>Location Details:</text>
    <text>{{ location }}</text>
    <text>Latitude: {{ latitude }}</text>
    <text>Longitude: {{ longitude }}</text>
    <text class="text-error">{{ errorMessage }}</text>
  </view>
</template>

<script>
import * as Location from "expo-location";

export default {
  data() {
    return {
      location: "",
      latitude: "",
      longitude: "",
      errorMessage: "",
      text: "",
      user: {
        country: "",
      },
    };
  },
  methods: {
    async getLocation() {
      try {
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== "granted") {
          this.errorMessage = "Permission to access location was denied";
          return;
        }
        let location = await Location.getCurrentPositionAsync({});
        this.location = location;
        this.latitude = location.coords.latitude;
        this.longitude = location.coords.longitude;
        this.errorMessage = "";
      } catch (error) {
        this.errorMessage = error;
      }
    },
  },
}
</script>

By using the Expo package, no additional configuration or setup is required, which makes building mobile apps with Vue Native a breeze.

Summarize

Building mobile apps with Vue Native opens up many possibilities for building cross-platform mobile apps using JavaScript.

With access to the richness and strength of the Vue and React Native ecosystems, developers can write .vue components and bundle them with Expo and React Native packages.

Integrates into your application with little to no additional configuration required.

The complete code used in this tutorial is available on GitHub.

This tutorial source code: github.com/ejirocodes/…

Translated from blog.logrocket.com, author: Ejiro Asiuwhu

This is the end of this article about using Vue Native to build mobile applications. For more relevant content about building mobile applications with Vue Native, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!