Vue & Nuxt

Framework SDK

Vue 3 plugin and composables for device intelligence in SPAs and Nuxt apps.

terminal

npm install @lightningresearch/vue @lightningresearch/sdk vue

Plugin setup

main.ts

import { createApp } from 'vue';
import { LRDefenderPlugin } from '@lightningresearch/vue';
import App from './App.vue';

const app = createApp(App);
app.use(LRDefenderPlugin, {
  apiKey: import.meta.env.VITE_LR_API_KEY,
  region: 'auto',
});
app.mount('#app');

useDeviceId()

Returns reactive data, isLoading, error, and execute(). Call execute() explicitly or from onMounted.

DeviceInfo.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { useDeviceId } from '@lightningresearch/vue';

const { data, isLoading, error, execute } = useDeviceId();

onMounted(() => execute());
</script>

<template>
  <p v-if="isLoading">Loading…</p>
  <p v-else-if="error">{{ error.message }}</p>
  <p v-else>Device ID: {{ data?.deviceId }}</p>
</template>

useBot() & useThreat()

SecurityChecks.vue

<script setup lang="ts">
import { useBot, useThreat } from '@lightningresearch/vue';

const bot = useBot();
const threat = useThreat();

async function runChecks() {
  await bot.execute();
  await threat.execute();
}
</script>

<template>
  <button @click="runChecks">Run checks</button>
  <p v-if="bot.data">Bot: {{ bot.data.isBot ? 'yes' : 'no' }}</p>
  <p v-if="threat.data">Threat score: {{ threat.data.threatScore }}</p>
</template>

Nuxt 3 usage

Create a client-only plugin (*.client.ts) so the SDK never runs during SSR. Store your publishable API key in runtimeConfig.public.

plugins/lrdefender.client.ts

// plugins/lrdefender.client.ts
import { LRDefenderPlugin } from '@lightningresearch/vue';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  nuxtApp.vueApp.use(LRDefenderPlugin, {
    apiKey: config.public.lrApiKey,
    region: 'auto',
  });
});

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      lrApiKey: process.env.NUXT_PUBLIC_LR_API_KEY,
    },
  },
});