Lighthouse for
your API calls

# Step 1: Install
$ npm install @fluxiapi/vue

# Step 2: Add one component to your App.vue

<!-- App.vue -->
<script setup>
import { FluxDevTools } from '@fluxiapi/vue';
</script>

<template>
  <RouterView />
  <FluxDevTools force-show verbose network="jio-4g" />
</template>

# That's it! A floating badge appears in the corner.
# Click it to expand the panel. Press Ctrl+Shift+F to toggle.

# Optional: With TanStack Vue Query
import { wrapQueryClient } from '@fluxiapi/vue';
const queryClient = wrapQueryClient(new QueryClient());

# Optional: Use composables for custom UI
import { useFluxScore, useFluxViolations } from '@fluxiapi/vue';
const score = useFluxScore();      // { overall, grade, color }
const violations = useFluxViolations(); // RuleViolation[]

# Step 1: Install
$ npm install @fluxiapi/react

# Step 2: Add one component to your App.tsx

import { FluxDevTools } from '@fluxiapi/react';

function App() {
  return (
    <>
      <YourApp />
      <FluxDevTools forceShow verbose network="jio-4g" />
    </>
  );
}

# That's it! Floating badge + expandable panel.

# Optional: With TanStack Query
import { wrapQueryClient } from '@fluxiapi/react';
const queryClient = wrapQueryClient(new QueryClient());

# Optional: With SWR
import { fluxSWRMiddleware } from '@fluxiapi/react';
<SWRConfig value={{ use: [fluxSWRMiddleware] }}>

# Optional: Use hooks for custom UI
import { useFluxScore, useFluxViolations } from '@fluxiapi/react';
const { overall, grade } = useFluxScore();

# Step 1: Install the core SDK
$ npm install @fluxiapi/scan

# Step 2: Use programmatically

import { FluxScanner, FluxAnalyzer, generateHtmlReport } from '@fluxiapi/scan';

// Scan
const scanner = new FluxScanner({ duration: 60, network: 'jio-4g' });
scanner.start();

// ... user browses app ...

const session = scanner.stop();

// Analyze
const analyzer = new FluxAnalyzer({ network: 'jio-4g' });
const report = analyzer.analyze(session);

// Output
const html = generateHtmlReport(report);
console.log(report.score.overall); // 38