Nuxt

Install

BUG: We have issues loading the nuxtjs plugin from NPM... for now, please copy the files into the /plugins directory and skip the rest of the install instructions.

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,
}

Add the .env value for the Llana Instance URL and also add to your Nuxt config:

.env

LLANA_INSTANCE_URL=https://your.llana.instance

nuxt.config.ts

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

Usage

const { $llanaLogin } = useNuxtApp()

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

Logout

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

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 ' + $llanaAccessToken
}

WebSocket Subscription

const { $llanaSubscribe } = useNuxtApp()
$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))

Debugging

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

.env

LLANA_DEBUG=true

nuxt.config.ts

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

Overview