Vue NativeVue Native
Guide
Components
Composables
Navigation
  • iOS
  • Android
GitHub
Guide
Components
Composables
Navigation
  • iOS
  • Android
GitHub
  • Getting Started

    • Introduction
    • Installation
    • Your First App
    • Project Structure
  • Core Concepts

    • Components
    • Styling
    • Navigation
    • Native Modules
    • Hot Reload
  • Building & Releasing

    • Building for Release

Native Modules

Native modules expose device capabilities to your Vue code via composables.

Available composables

Device & System

import { useNetwork, useAppState, useColorScheme, useDeviceInfo } from '@thelacanians/vue-native-runtime'

const { isConnected, connectionType } = useNetwork()
const { state } = useAppState()          // 'active' | 'inactive' | 'background'
const { colorScheme, isDark } = useColorScheme()
const { model, screenWidth, screenHeight } = useDeviceInfo()

Storage

import { useAsyncStorage } from '@thelacanians/vue-native-runtime'

const { getItem, setItem, removeItem } = useAsyncStorage()

await setItem('key', 'value')
const value = await getItem('key')

Sensors & Hardware

import { useGeolocation, useBiometry, useHaptics } from '@thelacanians/vue-native-runtime'

const { coords, getCurrentPosition } = useGeolocation()
const { authenticate, getSupportedBiometry } = useBiometry()
const { vibrate } = useHaptics()

Media

import { useCamera } from '@thelacanians/vue-native-runtime'

const { launchCamera, launchImageLibrary } = useCamera()

Permissions

import { usePermissions } from '@thelacanians/vue-native-runtime'

const { request, check } = usePermissions()
const status = await request('camera')  // 'granted' | 'denied' | 'restricted'

UI

import { useKeyboard, useClipboard, useShare, useLinking, useAnimation, useHttp } from '@thelacanians/vue-native-runtime'

const { isVisible, height } = useKeyboard()
const { copy, paste } = useClipboard()
const { share } = useShare()
const { openURL, canOpenURL } = useLinking()
const { timing, spring } = useAnimation()
const http = useHttp({ baseURL: 'https://api.example.com' })

Notifications

import { useNotifications } from '@thelacanians/vue-native-runtime'

const { requestPermission, scheduleLocal, onNotification } = useNotifications()
await scheduleLocal({ title: 'Reminder', body: 'Hello!', delay: 5 })
Edit this page
Last Updated: 2/23/26, 5:58 AM
Contributors: Abdul Hamid, Claude Sonnet 4.6, Claude Opus 4.6
Prev
Navigation
Next
Hot Reload