Vue Native is a Javascript framework that is designed to deliver cross-platform mobile native applications. It is inspired by the React Native project.
Vue Native was originally a fork from React-Vue, a compiler that gave developers the ability to write Vue and React in the same codebase.
In this tutorial, you will build an application to learn about the APIs and components available in Vue Native.
The application that you build will display trending gifs on the Giphy platform. The Giphy API will be used to get the associated gif image, title, and type for each trending gif. The image and details will be displayed using Vue Native components like ScrollView
, Text
, and Image
.
Note: The deploy process documented at the end of this tutorial is Android-specific. However, the process may still be educational for those interested in iOS deployment.
To complete this tutorial, you will need:
npm
(which comes packaged with Node) or Yarn. This tutorial will use npm
. If you prefer to use yarn
, you will need to substitute those steps.Expo will be used to build and run the new application. Expo is an open-source tool-chain built around React Native for building Android and iOS applications. It provides access to the system’s functionality like the Camera and Storage.
If you don’t already have expo-cli
installed globally, you can run the following in your terminal:
- npm install --global expo-cli@3.20.1
Note: An Expo account will be required if you are interested in deploying your app later.
First, you will need to set up a project and install some dependencies. The Vue Native CLI will be used to bootstrap the application.
Initialize a new project for vue-gifs
by running the following in your terminal with npx
:
- npx vue-native-cli@0.1.1 init vue-gifs
Running this command will bootstrap an application for this project using the Expo CLI.
To build for iOS and Android platforms, update the scripts
object in the package.json
file:
{
"name": "vue-gifs",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
...
"build:ios": "expo build:ios",
"build:android": "expo build:android",
},
...
}
Then update the sdkVersion
in the app.json
file to match the Expo version in your package.json
. Open the app.json
file and update it like the snippet below:
{
"expo": {
"name": "vue-gifs",
"description": "This project is really great.",
...
"sdkVersion": "37.0.3",
...
}
}
Note: At the time of testing this tutorial, the Vue Native CLI needs the React Native version 37.0.1
and Expo version 37.0.3
. At a later date, you may need to manually modify your app.json
and package.json
files and run npm install
. Consult the Expo documentation for upgrading the SDK.
Now that you’ve set up the project, you’re ready to start testing the application.
To test the application on mobile, the Expo CLI provides various methods to test the application. The first is using a URL that is generated after running the application. This URL can be visited on your mobile browser to test the application.
Ensure that you are in the vue-gifs
project directory and run npm start
to start the application:
- npm start
Expo typically starts your application on :19002
so visit http://localhost:19002
to view the Expo Dev Tools in your browser. Within the Dev Tools you can send the preview link as an SMS or email to your mobile phone:
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 connected to the same network, but the tunnel will work in all cases.
The next testing method that you can use is to download 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 QR code from the browser version of the application to run it on your phone. On Android, you can use the Expo app directly to scan the QR code and run the application. Your application will then display on your mobile device.
Another option for testing on a mobile device is using an emulator or simulator. Using Android Studio or Xcode on macOS, 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 the command to start the application:
For iOS, run:
- npm run ios
For Android, run:
- npm run android
Now that you’ve explored different options for testing the app, you are ready to build the application.
The next step is to create an app on the Giphy Developer platform.
On your developer account dashboard, there is a Create App button. Click the button, and you will be presented with a choice between an SDK or an API. For the purposes of this tutorial, API will suffice.
Then, click Next Step and then Create App. Fill in the details about your application.
After creating the app, your new application will be displayed on your dashboard with an API key. This key will be used when making requests to Giphy.
Giphy’s Javascript SDK will be used to make requests to the Giphy service itself. Run this command from the vue-gifs
directory to install the package:
- npm install --save giphy-js-sdk-core@1.0.6
Now, your project is ready to consume the Giphy APIs with the help of this SDK.
In this step you will build the app component. Open the App.vue
file in the root folder and update it like the snippet below:
<template>
<view>
<scroll-view class="scroll-view">
<!-- TODO: Create gif item and header -->
<view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
<activity-indicator size="large" color="#0000ff"></activity-indicator>
</view>
</scroll-view>
</view>
</template>
<script>
import Giphy from 'giphy-js-sdk-core';
const client = Giphy('GIPHY_API_KEY');
export default {
name: 'App',
data() {
return {
gifs: [],
loading: true,
};
},
async created() {
const response = await client.trending('gifs', {limit: 20});
this.gifs = response.data;
},
};
</script>
<style>
.scroll-view {
padding-top: 20px;
padding-bottom: 30px;
}
.loading-container {
height: 600px;
}
</style>
In the snippet above, the App
component renders a scrollview
component that houses the component’s elements. It only displays an activityindicator
; this will be replaced by the list of gifs when the call to the API is complete.
The Giphy client is instantiated using the API key obtained from the developers dashboard. Be sure to 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, either gifs
or stickers
. The second parameter is an object providing optional parameters like the limit
, offset
, rating
, and fmt
(format).
The only parameter used in this code is the limit
parameter, which restricts the results to 20
items. This call is made in the created
lifecycle of the component. Finally, the gif
list is used to render the returned results.
After reloading, the application should display the activity indicator:
Now that you’ve built the app component, you are ready to build the gif item component.
Each gif item will be displayed using a View
component. The View
component is an important building block in the framework. It supports layout using flexbox, styling, and accessibility. Each item will display the gif, title, and type.
Create a folder named components
in the root folder. Within the components
directory, create a file named GifItem.vue
and add the following code:
<template>
<view class="container">
<image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
<text class="title">{{titleCase(gif.title)}}</text>
</view>
</template>
<script>
export default {
name: "GifItem",
props: ["gif"],
methods: {
titleCase(text) {
const textArray = text.split(" ");
return textArray
.map(text => {
const trimmedText = text.trim();
return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
})
.join(" ");
}
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
position: relative;
}
.img {
height: 200px;
width: 300px;
}
.title {
font-size: 14px;
font-weight: 500;
margin-top: 7px;
}
</style>
The Image
component will be used to display the source of each gif, and the Text
component will be used to display the gif title. The Image
component takes a source
prop, which is an object with a uri
property.
The titleCase
method takes the title of each gif and returns the text in the title case, capitalizing the first letter of each word in the text. The GifItem
component will take a single prop gif
.
Update the App.vue
file to include the new GifItem
using the the snippet below:
<template>
<view>
<scroll-view class="scroll-view">
<gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
<view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
<activity-indicator size="large" color="#0000ff"></activity-indicator>
</view>
</scroll-view>
</view>
</template>
<script>
import Giphy from 'giphy-js-sdk-core';
const client = Giphy('GIPHY_API_KEY');
import GifItem from './components/GifItem';
export default {
name: 'App',
data() {
return {
gifs: [],
loading: true
};
},
async created() {
const response = await client.trending('gifs', {limit: 20});
this.gifs = response.data;
this.loading = false;
},
components: {GifItem}
};
</script>
<style>
.scroll-view {
padding-top: 20px;
padding-bottom: 30px;
}
.loading-container {
height: 600px;
}
</style>
When you open the application in the Expo app, the app will display gifs stacked in a list.
If your local application is not displaying a list of gifs, ensure that your code matches the snippets in this tutorial and that your Giphy API key is valid.
Now that the application can retrieve and display a list of trending gifs let’s include a header to give the application context. The View component will be used to create an area that will act as the header for the application.
Create a file called header.vue
within the components
directory and update it with the code below:
<template>
<view class="header-container">
<text class="header">Trending</text>
</view>
</template>
<script>
export default {
name: 'header.vue'
};
</script>
<style scoped>
.header-container {
background-color: rgba(0, 0, 0, 0.05);
display: flex;
justify-content: center;
padding-top: 15px;
padding-bottom: 15px;
border-bottom-color: aquamarine;
border-bottom-width: 1px;
margin-top: 20px;
}
.header {
font-size: 16px;
color: black;
opacity: 0.8;
font-weight: 600;
text-align: center;
}
</style>
Now add the header
component to the App
component. This will display a header at the top of the application. Update the App.vue
file to include the Header
component:
<template>
<view>
<header/>
<scroll-view class="scroll-view">
...
</scroll-view>
</view>
</template>
<script>
import Giphy from 'giphy-js-sdk-core';
const client = Giphy('GIPHY_API_KEY');
import GifItem from './components/GifItem';
import Header from './components/header';
export default {
name: 'App',
data() {
...
},
async created() {
...
},
components: {GifItem, Header}
};
</script>
<style>
...
</style>
After the application refreshes, the header will be added to the top of the application.
The components provided by Vue Native have done all of the work required to render, order, and display the list of trending gifs.
Note: This is an optional step that is not required for completing the tutorial. This should be considered for educational purposes on the workflow from project creation to app store submission.
The final step in this tutorial is to deploy the application to the Android Play store.
First, you will need to update 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 this command in your terminal window from the vue-gifs
directory:
- npm run build:android
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 trigger a download for your APK.
To deploy the downloaded APK to the Android Play Store, visit the Play Console to create an account. You will need to pay a registration fee before proceeding. When registration is complete, visit this page and follow the steps to upload your application to the Play Store.
Vue Native is a useful framework to build applications for mobile platforms using Vue.js. Vue Native compiles to React and uses components provided by React Native. At as the time of writing, some of its 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 to learn more about it.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Great article, Chris. I was able to build a first basic app in hours.
One question. You explained how to deploy the app on the Google Play Store. But how do you deploy a Vue Native app in the iOS app store?