# geekyants/vue-native-core

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/geekyants-vue-native-core).**

8,281 stars · 289 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/GeekyAnts/vue-native-core
- Homepage: https://vue-native.io
- awesome-repositories: https://awesome-repositories.com/repository/geekyants-vue-native-core.md

## Topics

`android` `framework` `ios` `javascript` `mobile-app-development` `vue` `vue-native`

## Description

Vue Native is a framework that compiles Vue.js single-file components into React Native primitives, enabling developers to build native iOS and Android applications using Vue syntax. At its core, it provides a build-time compiler that transforms Vue components into React components, while hooking Vue's dependency-tracking reactivity system into React's component lifecycle to trigger re-renders when observed data changes.

The framework wraps React Native's native module bridge so Vue components can access device APIs through Vue's reactivity system, and maps Vue's component syntax to React Native primitives for direct access to the entire React Native ecosystem. It includes a Metro bundler transformer plugin that processes Vue template syntax before React Native's JavaScript engine runs, and handles the translation of Vue-specific patterns like slots, scoped slots, and two-way binding into their React equivalents during compilation.

Beyond the compilation pipeline, Vue Native provides a declarative animation system with sequenced, parallel, and staggered animation primitives using Vue syntax for native mobile motion effects. It supports screen-based navigation patterns including stack, tab, and drawer navigators, and integrates Vue ecosystem tools like Vuex for state management. The framework also enables access to device hardware such as camera, location, and accelerometer, and allows reuse of any React Native library or component directly from a Vue.js codebase.

The project includes command-line tooling for scaffolding new projects from templates, and provides integration procedures for adding Vue component support to existing React Native applications through runtime packages and Metro bundler configuration.

## Tags

### Part of an Awesome List

- [Vue.js Mobile App Builders](https://awesome-repositories.com/f/awesome-lists/devtools/desktop-and-mobile-apps/cross-platform-app-builders/vue-js-mobile-app-builders.md) — Compiles Vue.js components into native iOS and Android apps via React Native, enabling cross-platform mobile development with Vue syntax. ([source](https://cdn.jsdelivr.net/gh/geekyants/vue-native-core@master/README.md))
- [Reactivity-Bridged Native Bridges](https://awesome-repositories.com/f/awesome-lists/devtools/native-integration/native-module-bridges/reactivity-bridged-native-bridges.md) — Wraps React Native's native module bridge so Vue components access device APIs through Vue's reactivity system.
- [Text Input Fields](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields.md) — Provides a text input field with configurable keyboard type and two-way data binding. ([source](https://vue-native.io/docs/basic-components.html))
- [VueJS](https://awesome-repositories.com/f/awesome-lists/more/vuejs.md) — Listed in the “VueJS” section of the Awesome Ui Component Library awesome list.

### Mobile Development

- [Vue-based](https://awesome-repositories.com/f/mobile-development/cross-platform-frameworks/vue-based.md) — Creates native iOS and Android apps from a single Vue.js codebase without web views.
- [Cross-Platform Mobile Applications](https://awesome-repositories.com/f/mobile-development/cross-platform-mobile-applications.md) — Builds iOS and Android apps from a single Vue.js codebase using native components and platform APIs.
- [React Native Ecosystem](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem.md) — Leverages the entire React Native ecosystem of libraries and components directly from a Vue.js codebase. ([source](https://vue-native.io/))
- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Allows importing and using any React Native component via kebab-case equivalents in Vue.js templates. ([source](https://vue-native.io/docs/react-native.html))
- [Vue.js to React Native Compilers](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components/vue-js-to-react-native-compilers.md) — Transforms Vue single-file components into React Native primitives at build time for cross-platform mobile execution. ([source](https://vue-native.io/))
- [React Native Libraries](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-libraries.md) — Provides access to any React Native library or component from inside a Vue-based mobile project. ([source](https://vue-native.io/))
- [Vue-to-React Native Wrappers](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/vue-to-react-native-wrappers.md) — Maps Vue.js component syntax to React Native primitives for direct access to the React Native ecosystem.
- [Drawer Navigation Systems](https://awesome-repositories.com/f/mobile-development/android-ecosystem/android-libraries/navigation-drawer-libraries/drawer-navigation-systems.md) — Supports slide-out sidebar navigators that can contain their own stack of screens for app navigation. ([source](https://vue-native.io/docs/vue-native-router.html))
- [App Navigation Frameworks](https://awesome-repositories.com/f/mobile-development/app-navigation-frameworks.md) — Implements stack, tab, and drawer navigation patterns for screen-based mobile apps.
- [Device Hardware Integrations](https://awesome-repositories.com/f/mobile-development/device-hardware-integrations.md) — Accesses device hardware like camera, location, and accelerometer from Vue.js mobile apps.
- [Navigators](https://awesome-repositories.com/f/mobile-development/navigation-routing/navigators.md) — Provides stack navigators for pushing screens and passing data between routes in mobile apps. ([source](https://vue-native.io/docs/vue-native-router.html))

### User Interface & Experience

- [Cross-Framework](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/component-compilers/cross-framework.md) — Transforms Vue single-file components into React components at build time using a custom compiler pipeline.
- [Declarative UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/declarative-frameworks/declarative-ui-frameworks.md) — Compiles declarative Vue templates into native views that update automatically when state changes. ([source](https://vue-native.io/))
- [Component Data Passing](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing.md) — Sends data from parent to child components through declared properties for dynamic content rendering. ([source](https://vue-native.io/docs/composing.html))
- [Slot-to-Prop Translations](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems/scoped-slots/slot-prop-destructuring/slot-to-prop-translations.md) — Converts Vue slot and scoped-slot syntax into React's children and render-prop patterns during compilation.
- [Component Name Casing Mappings](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/component-architecture/property-passing/prop-casing-mappings/component-name-casing-mappings.md) — Maps kebab-case Vue component names to PascalCase React Native components at compile time for template resolution.
- [Layout Containers](https://awesome-repositories.com/f/user-interface-experience/flexible-layout-systems/layout-containers.md) — Provides a layout container primitive for nesting and styling child components. ([source](https://vue-native.io/docs/basic-components.html))
- [List Rendering Directives](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/control-flow-directives/list-rendering-directives.md) — Provides list rendering directives that iterate over arrays and bind item data to templates. ([source](https://vue-native.io/docs/conditional.html))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Breaks app interfaces into small, self-contained, reusable pieces that manage their own template and logic. ([source](https://vue-native.io/docs/composing.html))
- [Cross-Framework Reactivity Bridges](https://awesome-repositories.com/f/user-interface-experience/signal-based-reactivity/reactive-rendering-engines/cross-framework-reactivity-bridges.md) — Hooks Vue's dependency-tracking reactivity system into React's component lifecycle to trigger re-renders.
- [Text Components](https://awesome-repositories.com/f/user-interface-experience/text-components.md) — Provides a styled, nestable text component that responds to touch interactions. ([source](https://vue-native.io/docs/basic-components.html))
- [Conditional Rendering](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/conditional-rendering.md) — Provides conditional rendering that mounts or removes elements based on boolean state. ([source](https://vue-native.io/docs/conditional.html))
- [Action Buttons](https://awesome-repositories.com/f/user-interface-experience/button-styles/action-buttons.md) — Renders platform-styled buttons that fire callbacks when pressed in mobile apps. ([source](https://vue-native.io/docs/basic-components.html))
- [Component Slot Systems](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems.md) — Supports slot-based content injection where parent components insert content into child component placeholders. ([source](https://vue-native.io/docs/slots.html))
- [Scoped Slots](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems/scoped-slots.md) — Exposes child component data to parent slot templates through scoped slot bindings. ([source](https://vue-native.io/docs/slots.html))
- [Named Slot Definitions](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-rendering-patterns/named-slot-definitions.md) — Allows defining multiple named insertion points within a component for parent content injection. ([source](https://vue-native.io/docs/slots.html))
- [Declarative Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations.md) — Creates smooth motion effects with sequenced, parallel, and staggered animations using Vue syntax.
- [Render Props](https://awesome-repositories.com/f/user-interface-experience/dom-manipulation-libraries/declarative-rendering-frameworks/render-props.md) — Supports passing Vue components as props to React Native components that expect a render prop. ([source](https://vue-native.io/docs/render-prop.html))
- [Flat List Renderers](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering/flat-list-renderers.md) — Ships a performant flat list component with pull-to-refresh and scroll loading. ([source](https://vue-native.io/docs/basic-components.html))
- [Embedded Web Views](https://awesome-repositories.com/f/user-interface-experience/embedded-web-views.md) — Provides a web view component that renders full web pages from a URL source. ([source](https://vue-native.io/docs/basic-components.html))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides a toggle switch component with two-way binding for boolean state. ([source](https://vue-native.io/docs/basic-components.html))
- [Image Display Components](https://awesome-repositories.com/f/user-interface-experience/image-display-components.md) — Ships an image component that renders from network URLs, local files, and base64 data. ([source](https://vue-native.io/docs/basic-components.html))
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/loading-indicators.md) — Provides a circular spinner loading indicator that can be toggled with a conditional directive. ([source](https://vue-native.io/docs/basic-components.html))
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Provides a native alert dialog component with customizable title, message, and buttons. ([source](https://vue-native.io/docs/basic-components.html))
- [UI Element Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/page-headers/page-action-integrations/page-element-injections/ui-element-visibility-toggles.md) — Provides visibility toggling that shows or hides elements by adjusting opacity. ([source](https://vue-native.io/docs/conditional.html))
- [Scrollable Containers](https://awesome-repositories.com/f/user-interface-experience/scrollable-containers.md) — Provides a scrollable container that renders all children within a bounded height. ([source](https://vue-native.io/docs/basic-components.html))
- [Tabbed Navigation](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation.md) — Supports bottom tab bars and material top tab bars for switching between screens. ([source](https://vue-native.io/docs/vue-native-router.html))
- [Touchable View Wrappers](https://awesome-repositories.com/f/user-interface-experience/view-to-view-mappings/touchable-view-wrappers.md) — Provides a touchable wrapper that dims on press and fires a tap callback. ([source](https://vue-native.io/docs/basic-components.html))

### Data & Databases

- [Compile-Time Desugarings](https://awesome-repositories.com/f/data-databases/data-synchronization/two-way-data-binding/compile-time-desugarings.md) — Transforms Vue's v-model directive into React's controlled component pattern with onChange handlers at compile time.
- [Two-Way Data Binding](https://awesome-repositories.com/f/data-databases/data-synchronization/two-way-data-binding.md) — Keeps data properties and input elements in sync so changes in either are reflected immediately. ([source](https://vue-native.io/))

### Programming Languages & Runtimes

- [Event Bindings](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-text-processing/template-engines/event-bindings.md) — Provides declarative event binding syntax for attaching listeners to native components. ([source](https://vue-native.io/docs/handle-user-input.html))

### Web Development

- [Vue-React Reactivity Bridges](https://awesome-repositories.com/f/web-development/controller-frameworks/reactive-controller-bridges/vue-react-reactivity-bridges.md) — Hooks Vue's dependency-tracking reactivity system into React's component lifecycle to trigger re-renders.
- [Vue-React Reactivity Bridges](https://awesome-repositories.com/f/web-development/reactive-state-management/vue-react-reactivity-bridges.md) — Uses Vue's reactivity system to track state changes and automatically re-render React components. ([source](https://vue-native.io/docs/how-does-it-work.html))
- [Controlled Input Synchronization](https://awesome-repositories.com/f/web-development/state-syncing-reactivity/set-state-syncing/reconciliation-state-syncs/controlled-input-synchronization.md) — Provides two-way input synchronization that binds text input values to app data. ([source](https://vue-native.io/docs/handle-user-input.html))
- [React Native Converters](https://awesome-repositories.com/f/web-development/svg-component-transformations/react-native-converters.md) — Converts Vue single-file components into React components for use in React Native applications. ([source](https://vue-native.io/docs/how-does-it-work.html))
- [Vue-to-React Native Compilers](https://awesome-repositories.com/f/web-development/svg-component-transformations/react-native-converters/vue-to-react-native-compilers.md) — Provides a compiler that transforms Vue single-file components into React components for React Native.
- [Bundler Transformer Plugins](https://awesome-repositories.com/f/web-development/syntax-transformers/bundler-transformer-plugins.md) — Extends the Metro bundler with a custom transformer that processes Vue template syntax before execution.
- [Vue.js Frameworks](https://awesome-repositories.com/f/web-development/vue-js-frameworks.md) — Builds cross-platform iOS and Android apps using Vue.js syntax compiled to React Native components.
- [Vue.js State Management Libraries](https://awesome-repositories.com/f/web-development/vue-js-state-management-libraries.md) — Integrates Vuex for state management and other Vue libraries inside native mobile applications. ([source](https://vue-native.io/))