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