@hosterai/nuxt

Nuxt 3 & 4 module for Hoster.AI with useFetch support, SSR, and auto-imports.

Installation

pnpm add @hosterai/core @hosterai/nuxt

Setup

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@hosterai/nuxt'],
  
  hoster: {
    baseURL: 'https://api.hoster.ai'
  }
});

Usage

Using useHosterApi (Recommended - Fully Typed)

Combines typed Client methods with Nuxt reactivity (SSR, caching, reactive data):

<script setup lang="ts">
// Fully typed with autocomplete + SSR + caching!
const { data: users, status, refresh } = await useHosterApi(
  (client) => client.users().findUsers()
);

// With parameters - full type inference
const { data: user } = await useHosterApi(
  (client) => client.users().findUser({ id: '123' })
);

// Reactive watch - auto-refetch when userId changes
const userId = ref('123');
const { data: userDetails } = await useHosterApi(
  (client) => client.users().findUser({ id: userId.value }),
  { watch: [userId] }
);
</script>

<template>
  <div v-if="status === 'pending'">Loading...</div>
  <div v-else-if="users">
    <div v-for="user in users" :key="user.id">{{ user.name }}</div>
  </div>
</template>

Using useHosterLazyApi (Non-blocking, Typed)

<script setup lang="ts">
// Doesn't block navigation - data fetched after page loads
const { data: products, status, execute } = useHosterLazyApi(
  (client) => client.products().findProducts()
);

// Manually trigger fetch when needed
await execute();
</script>

Using useHosterFetch (URL-based)

For cases where you need direct URL access:

<script setup>
const { data, status, error } = await useHosterFetch('/users');

// With query params
const { data: products } = await useHosterFetch('/products', {
  params: { page: 1, limit: 10 }
});

// POST request
const { data: newUser } = await useHosterFetch('/users', {
  method: 'POST',
  body: { name: 'John', email: '[email protected]' }
});
</script>

<template>
  <div v-if="status === 'pending'">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else-if="data">{{ data }}</div>
</template>

Using useHosterLazyFetch (Non-blocking, URL-based)

<script setup>
// Doesn't block navigation - data fetched after page loads
const { data, status, execute } = useHosterLazyFetch('/users');

// Manually trigger fetch when needed
const refresh = () => execute();
</script>

Using the Client Directly

For imperative calls without reactivity:

<script setup lang="ts">
const hoster = useHoster();

// Set token (e.g., from auth state)
hoster.setAccessToken(authToken);

// Direct typed API calls
const { body: users } = await hoster.users().findUsers();
const { body: invoices } = await hoster.invoices().findInvoices();
</script>

Setting Auth Token

Create a plugin to set the token globally:

// Nuxt 3: plugins/hoster-auth.ts
// Nuxt 4: app/plugins/hoster-auth.ts
export default defineNuxtPlugin(() => {
  const hoster = useHoster();
  const auth = useAuth(); // your auth composable
  
  watch(() => auth.token, (token) => {
    if (token) {
      hoster.setAccessToken(token);
    }
  }, { immediate: true });
});

Nuxt 4 Compatibility

This module is fully compatible with Nuxt 4. Key differences:

• Directory structure: In Nuxt 4, plugins go in app/plugins/ instead of plugins/
• Data defaults: data and error default to undefined instead of null
• Status checks: Use status === 'success' instead of !pending for reliable checks

API

Composables

| Composable | Description | |------------|-------------| | useHosterApi(fetcher, options) | Recommended - Fully typed API calls with Nuxt reactivity | | useHosterLazyApi(fetcher, options) | Non-blocking typed API calls | | useHoster() | Direct access to the typed Client instance | | useHosterFetch(path, options) | URL-based requests with useFetch | | useHosterLazyFetch(path, options) | Non-blocking URL-based requests |

Module Options

interface ModuleOptions {
  baseURL?: string; // API base URL (default: 'https://api.hoster.ai')
}