@ruby-native/vue

Vue components for Ruby Native. Use these in an Inertia.js + Vue app to emit the signal elements that Ruby Native's iOS and Android apps read to render native tabs, navigation bars, forms, and more.

Install

npm install @ruby-native/vue

Usage

<script setup>
import { NativeTabs, NativeNavbar, NativeButton, NativeForm } from "@ruby-native/vue"
</script>

<template>
  <NativeNavbar :title="product.name">
    <NativeButton icon="bag" href="/cart" />
  </NativeNavbar>

  <NativeForm />

  <!-- your page content -->
</template>

Each component renders a hidden data-native-* signal element that the Ruby Native runtime picks up and turns into the corresponding native UI.

Components

• NativeTabs - show the native tab bar
• NativePush - request push notification permission
• NativeForm - mark the current page as a form so back navigation skips it
• NativeReview - ask for an App Store review prompt when the page loads
• NativeNavbar - native navigation bar with title and buttons
• NativeButton - native nav bar button (icon, title, href, or click target)
• NativeMenuItem - item inside a native menu
• NativeSubmitButton - native "Save" button that submits a form
• NativeOverscroll - per-page overscroll colors
• NativeBadge - set the badge count on a home screen or tab bar icon

Helpers

• nativeHaptic(feedback = "success", data = {}) - returns attributes to v-bind onto a clickable element so tapping it triggers native haptic feedback:

  <button v-bind="nativeHaptic('success')">Save</button>

Docs

Full guides at rubynative.com/docs.

License

MIT