Introducing Vue Native for building native mobile apps with Vue.js

2 min read

If Vue.js is the Javascript framework of your choice, you will definitely enjoy Vue Native. Developed by Geeky Ants, Vue Native can help you build powerful native mobile apps using JavaScript and Vue.js.

It is designed to connect React Native and Vue.js, making app development simpler. It has gained quite some popularity with already 2500+ starts on Github, since its official announcement, a few days ago. It was originally started by SmallComfort as react-vue which transpiles Vue files to React & React Native Components. GeekyAnts forked it later.

It brings the goodness of Vue ecosystem to native mobile app development such as support for templating, styling, state-management with Vuex and router makes. More distinctive features include declarative rendering, two-way binding, and completeness of React Native ecosystem.

How does it work

Vue Native transpiles to React Native. React Native is a framework to build native Android and iOS apps using JavaScript. The Vue Native CLI is used to generate a Vue Native app, which is a React Native API wrapper. It generates a simple single page application (SPA) using create-react-native-app and vue-native-core.

React Native is a direct dependency of Vue Native. Once you initialize a new app using vue-native-cli, the entry script is App.vue. You can use:

the reactivity system of Vue to observe React component
the react-vue-loader to run Vue component in React application
the vue-native-scripts to run Vue component in React Native

How to get started

The first step is to install React Native on your system. Next, install the Vue Native CLI on your system using npm.

$ npm install -g vue-native-cli

Now all you need to do is initialize a new Vue-Native project directory in your system.

You can now run this app on an iOS or Android Simulator using the npm run command.

The installation guide contains the full list of features along with details to get started and code examples. Vue Native is open source; you can find it on GitHub.