Composables and Globals Reference

Generated apps include types for resuxjs/globals, so Resux APIs can be used without imports in app files.

State

useState<T>(key, factory?)

Create or read a resumable ref.

const count = useState<number>('count', () => 0)
count.value++

• key: stable state key.
• factory: optional initial value factory.
• Value must be JSON-serializable.

Reactivity (Resux-native)

Resux ships its own lightweight reactivity system for resumable components. It does not require Vue hydration runtime for normal Resux components.

Use globals in app files, or import from resuxjs / resuxjs/reactivity.

ref<T>(value)

const count = ref(0)
count.value++

reactive<T extends object>(value)

const state = reactive({ count: 0 })
state.count++

computed<T>(getter | { get, set? })

const doubled = computed(() => count.value * 2)

watch(source, callback, options?)

watch(count, (next, prev) => {
  console.log(next, prev)
})

watchEffect(effect, options?)

watchEffect((onCleanup) => {
  const id = setInterval(() => console.log(count.value), 1000)
  onCleanup(() => clearInterval(id))
})

readonly(value)

const locked = readonly(state)

toRef(object, key, defaultValue?) and toRefs(object)

const state = reactive({ a: 1, b: 2 })
const a = toRef(state, 'a')
const { b } = toRefs(state)

unref(value), isRef(value), isReactive(value), isReadonly(value)

if (isRef(count)) {
  console.log(unref(count))
}

nextTick(fn?)

await nextTick()

Async data

useAsyncData<T>(key, handler?)

Create a resumable async resource.

const { data, pending, error } = await useAsyncData('stats', ({ signal }) => {
  return $fetch('/api/stats', { signal })
})

Return type:

type AsyncDataResource<T> = {
  data: Ref<T | undefined>
  value: Ref<T | undefined>
  pending: Ref<boolean>
  error: Ref<{ name: string; message: string } | null>
}

The resource is thenable, so await useAsyncData(...) waits for server-side resolution.

Routing

useRoute()

const route = useRoute()
route.path
route.params
route.query
route.origin

useRouter()

const router = useRouter()
await router.push('/about')
router.replace('/login')
router.back()
router.forward()
router.go(-1)

Head

useHead(input)

useHead({
  title: 'Page title',
  meta: [{ name: 'description', content: 'Description' }],
  link: [{ rel: 'canonical', href: 'https://example.com' }]
})

useSeoMeta(input)

useSeoMeta({
  title: 'Docs',
  description: 'Resux docs',
  ogTitle: 'Docs',
  twitterCard: 'summary_large_image'
})

Config and app

useRuntimeConfig()

const config = useRuntimeConfig()
config.public.appOrigin

useResuxApp()

const app = useResuxApp()
app.provides
app.provide('key', 'value')

Fetch helpers

apiURL(path)

Resolve internal API URLs for SSR-safe native fetch calls.

const response = await fetch(apiURL('/api/stats'))

useFetch<T>(url, init?)

Fetch JSON and return a ref.

const data = await useFetch<{ ok: boolean }>('/api/status')

$fetch<T>(url, init?)

Fetch JSON and return the parsed value.

const stats = await $fetch<{ users: number }>('/api/stats')

Lifecycle

onMounted(callback)

Runs when the scope is first resumed in the browser.

onMounted(() => {
  console.log('browser resumed')
})

Page meta

definePageMeta(meta)

definePageMeta({
  layout: 'dashboard',
  middleware: ['auth'],
  title: 'Dashboard',
  meta: [{ name: 'robots', content: 'noindex' }]
})

Config and extension factories

defineResuxConfig(config)

export default defineResuxConfig({
  app: { head: { title: 'App' } },
  runtimeConfig: { public: { appOrigin: 'https://example.com' } }
})

defineResuxPlugin(plugin)

export default defineResuxPlugin((app) => {
  app.provide('name', 'Resux')
})

defineResuxRouteMiddleware(middleware)

export default defineResuxRouteMiddleware((to) => {
  if (to.path === '/admin') return navigateTo('/login')
})

defineResuxModule(module)

export default defineResuxModule({
  setup(options, resux) {
    resux.addCss('/module.css')
  }
})

Server helpers

defineEventHandler(handler) and eventHandler(handler)

export default defineEventHandler(() => ({ ok: true }))

defineServerMiddleware(middleware)

export default defineServerMiddleware((event) => {
  setHeader(event, 'x-app', 'resux')
})

readBody<T>(event)

const body = await readBody<{ name: string }>(event)

getQuery(event)

const query = getQuery(event)

setHeader(event, name, value)

setHeader(event, 'cache-control', 'no-store')

Navigation helpers

navigateTo(to, options?)

return navigateTo('/login', { statusCode: 302 })

abortNavigation(message?, options?)

return abortNavigation('Not allowed', { statusCode: 403 })