We at Omninos Solutions are very excited to share one of our side projects which we have been working on for a while, Vue Native!
Though the point of you in the JavaScript community about Vue has been mixed, we couldn’t stop ourselves from trying Vue for native mobile app development.
★ Motivation:-
As a web engineer, we generally cherished the straightforwardness of composing HTML code and afterward styling it with CSS. Vue gives us a comparative involvement in .vue documents.
As a group which is dynamic in the React Native people group with commitments like NativeBase, we are never one-sided about our conclusion to attempt new systems and dialects. Vue is one of them and it suits the utilization cases to assemble a large portion of our applications.
The help for templating, styling, state-the board with Vuex and switch settles on Vue the ideal decision.
With Vue Native, we are carrying a similar encounter to local portable application advancement.
- Initial Experiment
With a fast inquiry on the web, we went over response vue by SmallComfort. respond vue transpiles Vue documents to React and React Native Components. Credit to the creator of respond vue which takes care of the vast majority of the issue. Vue Native is a fork of the equivalent.
- It Transpiles to React Native
Respond Native is an immediate reliance of Vue Native. When you instate another application utilizing vue-local cli, the passage content is App.vue.
Much the same as a .js record, you can create a .vue documents with many .vue records. All these .vue documents are really changed over to React Native segment records with .js. You can peruse more about it here.
- Two-way binding model
Vue Native is likewise fit for accomplishing two-way information authoritative with the assistance of v-model mandate as appeared in the code bit beneath.
Loops
To compose circles, we can utilize Vue's v-for mandate. The v-for order is like JavaScript's guide administrator.
Example apps:
- KitchenSink app
We have re-manufactured our NativeBase KitchenSink App utilizing Vue Native. You can take look at the whole source code of this application here:
- TODO APP:-
Ankit Singhania, a Senior Software Developer at GeekyAnts, has additionally made a basic ToDo App utilizing Vue Native.
- The most effective method to Get Started
So as to utilize Vue Native, you will initially need to introduce React Native on your framework. Follow the means offered here to introduce React Native. Next, we can introduce the Vue Native CLI on your framework utilizing NPM.
- $ npm introduce - g vue-local cli
With that, all you have to do now is introduce another Vue-Native undertaking registry in your framework.
- $ vue-local init <projectName>
- $ disc <projectName>
You would now be able to run this Vue Native application on an iOS or Android Simulator utilizing the npm run order.
- Directives :-
Directives are unique properties that are found in Vue. These are traits that accompany the v-prefix. Here are a couple of these mandates and where they can be utilized in Vue.
● v-if and v-else:-
The v-if and v-else mandates are utilized in Vue to compose contingent code squares.
● V-For:-
The v-for directive is similar to JavaScript’s map operator.Running this code on your system will give you this output:
● V-model
V-Model mandate makes a two-way information authoritative on a structure input component or a part. Inside it appends worth and onChangeText handler to TextInput of React Native.The above code scrap makes a two-way information official on textContent, so when the sorts something in the content information, it will be put away in textContent, which will at that point be shown directly beneath the content info field.
● Vue Native Router
Vue Native uses vue-switch for actualizing routes in your portable applications. How about we investigate how Drawer Navigation can be actualized utilizing Vue Native.
It's a basic covering around React Navigation of React Native.
● State Management using Vuex
You can utilize Vuex as the App State Management library. Peruse more about it here.
● Limitations and known issues
- Once in a while for a segment, you may need to make a capacity that profits JSX code.For example: renderItem in FlatList must return JSX.
- The mistake announcement is on the React Native level and it doesn't guide to the Vue Native code yet. We are progressing in the direction of it.
