How to Setup, Build and Deploy Native Apps with Vue

Vue-Native is a framework written by GeekyAnts, it is a framework built to deliver cross platform mobile native applications. It is inspired by the React-native API, hence it gives a developer the ability to build cross platform applications in Vue.js using React Native’s robust system.

Table of Contents

Vue Native was originally a fork from React-vue, a compiler that gave developers that ability to write Vue and React in the same codebase. In this article, we’ll build a simple application to introduce the APIs and components available in Vue native.

We’ll be building a simple application that fetches the trending Gifs on Giphy, using the Giphy API. We’ll also display the Gif and details about it using components like ScrollView, Text, Image etc.

Before we get started, we’ll need to setup the project and install project dependencies. We’ll be making use of Vue native CLI to bootstrap our application. There’s also an installation option using Create React Native App, this option is longer but you can find the instructions here.

First, install the Vue Native CLI by running the following command:

yarn global add vue-native-cli
// or
npminstall -g vue-native-cli

Then initialize a new project by running the following command:

vue-native init vue-gifs

Running this command will bootstrap a Create React Native App application using the Expo CLI.

At the time of writing the Vue Native CLI needs the React Native version_ 0.55.4_ and expo version 29.0.0, so update your package.json to set these versions. We’ll also add commands to build for ios and android platforms by updating the scripts object.

Everything else will remain the same. After making these changes, run npm install or yarn to install the required versions for the application. When this is done, run npm start to run the application.

To build and run our application, we’ll be using Expo. Expo is an open source toolchain built around React-native for building Android and iOS applications. It provides access to the system’s functionality like the Camera, Storage etc.

To test the application on mobile, the expo-cli provides various methods to test the application. The first is using a URL generated after running the application, this URL can be visited on your mobile browser to test the application.

Run the npm run start-native command within your project folder to run the application using expo. expo typically starts your application on port 19002, visit http://localhost:19002 to view the expo dev tools. Within the dev tools you can send the preview link as an SMS or email to your mobile phone.

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

Check your email to confirm your subscription.

You can select any of the three connection options. An external tunnel, LAN or Local connection. For the local connection, your mobile phone and work PC have to be connection to the same network but the tunnel works regardless.

The next method which is the easiest is downloading the Expo mobile app, it can be found on both the Apple App store and the Android Play store. On iOS, after installing the app, open up your camera and scan the barcode above to run your application. While on Android, you can use the Expo app to scan the barcode and run the application.

Run any of the following command to test on either platforms:

npm start

After starting the application, scan the barcode and view the application on the expo app. You should see a view similar to the screenshot below:

Let’s see the other methods we can test the application on mobile. The next option for testing on a mobile device is using an emulator or simulator. Using Android studio or Xcode, you can boot emulators or simulators for their respective platforms. Download and install the tool for the platform of choice, Xcode for iOS and Android studio for Android. After installation, run any of the following commands to start the application:

To get started consuming the Giphy API, you’ll need to log in to your Giphy account, create one if you haven’t already. The next step is to create an app on the developer platform. On your developer account dashboard, there’s a Create App button, click it and fill in the details about your application.

After creating the app, your new application should be displayed on your dashboard with an API key, this key will be used when making requests to Giphy

To make requests to the Giphy service, we’ll make use of their Javascript SDK. Run the following command to install the package:

Our application is a simple one that displays the trending gifs on the Giphy platform. Using the Giphy API, we’ll get the associated gif image, title and type from the returned data. The data will be displayed using some of the components provided by vue-native. Open the App.vue file in the root folder and update it like the snippet below:

In the snippet above, the App component renders a scrollview component that houses the components elements. It only displays an activityindicator, this will be replaced by the list of gif when the call to the API is complete.

Also, we instantiate the Giphy client using the API key obtained from the developers dashboard and replace the placeholder string with the API key. Calling the trending method makes a call to the Giphy trending endpoint. The first provided parameter is gifs, this indicates which trending items should be returned, gifs or stickers. The second parameter is an object providing optional parameters like the limit, offset, rating and fmt (format).

We’ll just be providing a limit parameter, limiting the results to 20 items. This call is made in the created lifecycle of the component. Next, we’ll create the gif item to render the returned results.

After reloading, the application should display the activity indicator:

Each gif item will be displayed using a View component, the View component is an important building block, it supports layout using flexbox, styling and accessibility. Each item will display the gif, title and type. Create a folder components in the root folder. Within the components directory, create a named GifItem.vue and update it with the code below:

After successfully querying for trending gifs and displaying them using native components, let’s include a header to give the application context. Using the View component, we’ll create an area that will act as the header for our application. Create file called header.vue within the components directory and update it with the code below:

We’ll be deploying our application to the Android Play store. To achieve this, we’ll need to update the app.json to include Android specific properties. Open the app.json file and update the file to include the `android` field:

{
"expo": {
...
"android": {
"package": "com.vue.gifs"
}
}
}

The android.package field is a unique value that will represent your package in the app store. You can read more on the package naming convention here. After updating the file, run the npm run build:android command.

This command will present you with a prompt, asking you to provide a keystore or to generate a new one. If you have an existing keystore, you can select this option or let expo generate one for your application.

After completion, a download link will be generated for your application, clicking on this link will be trigger a download for your apk.

To deploy the downloaded APK to the Android Play Store, visit the Play Console to create an account, then you’ll be required to pay a registration fee of $25 before proceeding. When registration is complete, visit this page and follow the steps to upload your application to the Play Store.

Vue native has provided a solution to build for mobile platforms using Vuejs. It compiles to React and uses components provided by React Native. As as the time of writing, some of it’s components require that you write JSX with the actual React Native components. Since Vue native works with React native, you can follow the official React native documentation.
Vue native is still in it’s infant stages and has a lot of potential, it creates an opportunity for Vue.js developers to build cross platform mobile applications. You can view the source code for the demo here.

Jobs!

If you’re familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won’t be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS which re...