Nuxt

Install

$ npm install @juicyllama/llana-plugins-nuxtjs

Add the following to your nuxt.config.ts file:

modules: ['@juicyllama/llana-plugins-nuxtjs'],

build: {
        transpile: ['#app'],
},

Configure

You might need to set the asyncContext experimental flag in your nuxt.config.ts if you encounter Nuxt instance is unavailable.

experimental: {
    asyncContext: true,
}

.env

LLANA_INSTANCE_URL=https://your.llana.instance
LLANA_INSTANCE_PROXY_URL=https://your.nuxt.instance/api

nuxt.config.ts

runtimeConfig: {
    public: {
        LLANA_INSTANCE_URL: process.env.LLANA_INSTANCE_URL
        LLANA_INSTANCE_PROXY_URL: process.env.LLANA_INSTANCE_PROXY_URL
    },
},

server/api/[...].ts

export default defineEventHandler(async event => {
    const config = useRuntimeConfig()
    const targetBase = config.public.LLANA_INSTANCE_URL

    const { pathname, search } = getRequestURL(event)
    const apiPath = pathname.replace(/^\/api/, '')

    const target = `${targetBase}${apiPath}${search}`

    console.log(`Proxying request to: ${target}`)

    // Forward method, headers, and body automatically:
    return proxyRequest(event, target, {
        // Forward all headers including auth cookies from the original request
        headers: getRequestHeaders(event),
    })
})

This catch-all route proxies all /api/* requests from your Nuxt app to the same path on your Llana backend. For example, /api/user?... will be forwarded to https://your-llana-backend.com/user?....

This setup is required to ensure authentication cookies are correctly passed between Nuxt and Llana—especially in SSR mode, where missing cookies can prevent successful authentication.

Usage

const { $llanaLogin } = useNuxtApp()

const response = await $llanaLogin({
  username: form.value.email,
  password: form.value.password
})

Logout

const { $llanaLogout } = useNuxtApp()
await $llanaLogout()

Auth Check

If you want to check if the user is authenticated, you can call:

const { $llanaAuthCheck } = useNuxtApp()
const isAuthed: boolean = $llanaAuthCheck()

Request (Via Pinia Store)

import type { Client } from '@/types/Clients'
import type { ListResponse } from '@/plugins/llana'

const { $llana } = useNuxtApp()
const table = 'clients'
type T = Client

export const useClientsStore = defineStore('clientsStore', {
    state: () => <ListResponse<T>>defaultList(),
    actions: {
        async listClients(force: boolean = false): Promise<ListResponse<T>> {
            if (!force && this.$state.data.length > 0) {
                return this.$state
            }
            const { $llana } = useNuxtApp()
            this.$state = (await $llana<T>({ type: 'LIST', table })) as ListResponse<T>
            return this.$state
        }
    }
})

Get Profile

const { $llanaGetProfile } = useNuxtApp()
const profile = (await $llanaGetProfile<Profile>()) as Profile

Get Llana Instance URL

const { $llanaInstanceUrl } = useNuxtApp()
export const socket = io($llanaInstanceUrl)

Get Users Access Token

const { $llanaAccessToken } = useNuxtApp()
const headers = {
    Authorization: 'Bearer ' + await $llanaAccessToken
}

WebSocket Subscription

const { $llanaSubscribe } = useNuxtApp()
const closeSocket = $llanaSubscribe(table, (data: SocketData) => this.get(data.id as number), (data: SocketData) => this.update(data.id as number), (data: SocketData) => this.delete(data.id as number))
...
// close the websocket
closeSocket()

Debugging

You can pass the optional boolean value LLANA_DEBUG in your .env and Nuxt config to enable debugging messages in Nuxt console.

.env

LLANA_DEBUG=true

nuxt.config.ts

runtimeConfig: {
    public: {
        LLANA_DEBUG: process.env.LLANA_DEBUG,
    },
},

n8n

A n8n Plugin for Llana