Installation

Cette page vous guide pour ajouter Layro à un projet Nuxt 3.
Copiez-collez les extraits ci-dessous.

Prérequis

Node.js ≥ 20
Nuxt 3 (avec auto-import des composables)
Accès à une instance Layro Core (URL + token/API key)

Assurez-vous d’avoir vos variables d’environnement Layro avant de continuer.

1) Installer le SDK

pnpm add @layro/sdk

npm i @layro/sdk

yarn add @layro/sdk

bun add @layro/sdk

2) Variables d’environnement

.env

NUXT_PUBLIC_LAYRO_API_URL=https://core.layro.app
NUXT_PUBLIC_LAYRO_PROJECT_ID=your_project_id
NUXT_LAYRO_API_KEY=your_private_api_key

Les clés privées doivent rester côté serveur (NUXT_...) et non exposées (NUXT_PUBLIC_...).

3) Plugin Nuxt pour Layro

plugins/layro.client.ts

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const publicConfig = config.public

  const client = new (await import('@layro/sdk')).LayroClient({
    baseURL: publicConfig.LAYRO_API_URL,
    projectId: publicConfig.LAYRO_PROJECT_ID
  })

  return { provide: { layro: client } }
})

Plugin server (admin)

plugins/layro.server.ts

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()

  const client = new (await import('@layro/sdk')).LayroAdmin({
    baseURL: config.public.LAYRO_API_URL,
    apiKey: config.LAYRO_API_KEY
  })

  return { provide: { layroAdmin: client } }
})

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    LAYRO_API_KEY: process.env.NUXT_LAYRO_API_KEY,
    public: {
      LAYRO_API_URL: process.env.NUXT_PUBLIC_LAYRO_API_URL,
      LAYRO_PROJECT_ID: process.env.NUXT_PUBLIC_LAYRO_PROJECT_ID
    }
  }
})

4) Premier usage

Tokens → CSS vars

components/LayroTokensProvider.client.vue

<script setup lang="ts">
const { $layro } = useNuxtApp()

onMounted(async () => {
  const tokens = await $layro.tokens.list()
  const root = document.documentElement
  root.style.setProperty('--color-primary', tokens.color?.primary ?? '#22c55e')
})
</script>

<template><slot /></template>

Feature flags

composables/useFeatureFlag.ts

export function useFeatureFlag(key: string) {
  const { $layro } = useNuxtApp()
  const enabled = ref(false)

  onMounted(async () => {
    enabled.value = await $layro.flags.isEnabled(key)
  })

  return computed(() => enabled.value)
}

exemples/FlaggedCTA.vue

<script setup lang="ts">
const isNewCTA = useFeatureFlag('marketing.newCta')
</script>

<template>
  <UButton v-if="isNewCTA" color="primary">Try the new CTA</UButton>
  <UButton v-else color="gray">Get started</UButton>
</template>

5) Vérifier l’intégration

pages/_dev/layro.vue

<script setup lang="ts">
const { $layro } = useNuxtApp()
const tokens = ref()
const flags = ref()

onMounted(async () => {
  tokens.value = await $layro.tokens.list()
  flags.value = await $layro.flags.list()
})
</script>

<template>
  <UContainer class="py-8 space-y-6">
    <UCard><template #header>Tokens</template><pre>{{ tokens }}</pre></UCard>
    <UCard><template #header>Flags</template><pre>{{ flags }}</pre></UCard>
  </UContainer>
</template>

Dépannage

La clé privée (NUXT_LAYRO_API_KEY) est requise uniquement pour les opérations admin côté serveur.