Vue Native Update : Latest In The Mix

Error mapping now live! More developmental features introduced.

GeekyAnts
The GeekyAnts Blog

--

Announced in January 2018, Vue Native has made quite the progress. Indeed, this week has been great for Vue Native, with the introduction of more development tools to add to the versatility of features that can be instilled in the creation process of your application.

Every step we are taking with Vue Native is a big one, and is in the right direction. We are closer to our goal of providing an easy-to-use app development tool which uses VueJS as a language to provide a seamless app building experience.

These are the newly implemented changes in Vue Native as of first week of August, 2018.

SOURCE MAP SUPPORT

The previously announced Source Mapping support is now live. Vue Native will now map errors to .vue files. Every error in the code will be highlighted and will be easily navigable.

NO MORE JSX (RenderProp)

Based on the concept of React Native, the implementation of ‘Inline Components’ was made possible through defining components, importing them into a file and using a .jsx syntax. With the introduction of a new API called render-prop and render-prop-fn, inline components can be easily used within .vue files, hereby removing the need of jsx template. For detailed information on render-prop, follow this link.

render-prop Example

HASSLE-FREE LAYOUT POPULATION WITH NAMED SLOTS

Based on the original concept implied in VueJS, Vue Native now supports content distribution from a parent component using the <slot> element for a base layout defined in its child components. This parent component can now pass information into its child components directly, even handling multiple components using ‘Named Slots’. More information on <slot> functionality can be found here.

<slot> Example

V-MODEL SUPPORT FOR SWITCH

v-model makes <switch> implementation fluid by managing user states internally through implementation of two-way data binding. This essentially removes the necessity of a method that is explicitly defined to manage data states for <switch>, thereby making code more optimised and easy to employ. An example on v-model can be found here.

For complete information on Vue Native from scratch, the updated document can be found at https://vue-native.io/docs/

To stay on trail with more news and developments on Vue Native, stay tuned to the GeekyAnts blog.

You can also follow us on Twitter and Slack and be the first to hear about Vue Native.

Godspeed!

I am Digvijay Wanchoo, the newest Ant in the colony. I love video games and decimating lives with humorless puns. I toil as a Technical Content Writer at GeekyAnts and will be your source for all updates on the GeekyAnts creative colony.

--

--