Nuxt.js Integration

Spyglasses integrates seamlessly with Nuxt.js applications through our official module. Follow these steps to set up Spyglasses in your Nuxt project.

Installation

1. Install the package:

   npm install @spyglasses/nuxt

   with yarn:

   yarn add @spyglasses/nuxt

   with pnpm:

   pnpm add @spyglasses/nuxt

2. Add your API key: Create or update your .env file with your Spyglasses API key:

   SPYGLASSES_API_KEY=your_api_key_here
   

Configuration

Add the Spyglasses module to your Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@spyglasses/nuxt'],
  
  spyglasses: {
    apiKey: process.env.SPYGLASSES_API_KEY,
    // Optional: enable debug logging
    debug: process.env.NODE_ENV === 'development',
    // Optional: override collector endpoint
    collectorEndpoint: process.env.SPYGLASSES_COLLECTOR_ENDPOINT,
  },
})

Basic Configuration

The minimal configuration requires only your API key:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@spyglasses/nuxt'],
  
  spyglasses: {
    apiKey: process.env.SPYGLASSES_API_KEY,
  },
})

Advanced Configuration

For more control, you can configure additional options:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@spyglasses/nuxt'],
  
  spyglasses: {
    apiKey: process.env.SPYGLASSES_API_KEY,
    debug: true,
    collectorEndpoint: 'https://custom-collector.example.com',
    excludePaths: [
      '/admin',
      '/api/internal',
      '/_nuxt/', // Exclude Nuxt internal routes
    ],
  },
})

Configuration Options

The module accepts these configuration options:

Docker

If you deploy with Docker, set your API key in your Dockerfile or docker-compose:

Dockerfile:

ENV SPYGLASSES_API_KEY=your_api_key_here

docker-compose:

services:
  web:
    environment:
      - SPYGLASSES_API_KEY=your_api_key_here

Server Middleware

The Spyglasses module automatically registers server middleware to monitor all incoming requests. This middleware:

• Detects AI and bot traffic using user agents
• Identifies AI referrers from platforms like ChatGPT
• Logs analytics data to your Spyglasses dashboard
• Works automatically with Nuxt's server routes and API endpoints

Deployment

When deploying your Nuxt.js application, make sure to add your Spyglasses API key to your environment variables:

Vercel

1. Go to Project Settings > Environment Variables
2. Add SPYGLASSES_API_KEY
3. Deploy to apply changes

Netlify

1. Go to Site Settings > Build & Deploy > Environment
2. Add SPYGLASSES_API_KEY
3. Trigger a new deploy

Cloudflare Pages

1. Go to Workers & Pages > Your Project > Settings > Environment Variables
2. Add SPYGLASSES_API_KEY
3. Redeploy your application

AWS Amplify

1. Go to App Settings > Environment Variables
2. Add SPYGLASSES_API_KEY
3. Redeploy your application

DigitalOcean

1. Go to App Settings > Environment Variables
2. Add SPYGLASSES_API_KEY
3. Trigger a new deployment

Verifying Installation

After deploying your application with Spyglasses, you can verify the installation by checking your Spyglasses dashboard. If everything is set up correctly, you should start seeing data from your Nuxt.js application.

Troubleshooting

API Key Not Found

• Verify environment variable is set
• Check for typos in variable name
• Ensure deployment includes environment variables

Module Not Loading

• Confirm @spyglasses/nuxt is in your modules array
• Verify Nuxt version (3.0.0 or higher required)
• Check for module registration errors in console

No Data in Dashboard

• Verify your API key is correct
• Check that the module is properly configured
• Ensure your deployment includes the environment variables
• Check server logs for any errors

Performance Issues

• Enable debug mode to check for errors
• Verify excludePaths configuration
• Check network latency to collector endpoint

If you're not seeing data in your Spyglasses dashboard:

1. Verify your API key is correct
2. Check that the module is properly configured
3. Ensure your deployment includes the environment variables
4. Check your server console for any errors

Need help? Contact support@spyglasses.io