# 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**:
   ```bash
   npm install @spyglasses/nuxt
   ```

   with yarn:
   ```bash
   yarn add @spyglasses/nuxt
   ```

   with pnpm:
   ```bash
   pnpm add @spyglasses/nuxt
   ```

2. **Add your API key**:
   Create or update your `.env` file with your Spyglasses API key:
   ```env
   SPYGLASSES_API_KEY=your_api_key_here
   ```

## Configuration

Add the Spyglasses module to your Nuxt configuration:

```typescript
// nuxt.config.ts

  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:

```typescript
// nuxt.config.ts

  modules: ['@spyglasses/nuxt'],
  
  spyglasses: {
    apiKey: process.env.SPYGLASSES_API_KEY,
  },
})
```

### Advanced Configuration

For more control, you can configure additional options:

```typescript
// nuxt.config.ts

  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:

| Option | Type | Required | Description | Default |
|--------|------|----------|-------------|---------|
| `apiKey` | `string` | Yes | Your Spyglasses API key | - |
| `debug` | `boolean` | No | Enable debug logging | `false` |
| `collectorEndpoint` | `string` | No | Custom collector endpoint | Spyglasses default |
| `excludePaths` | `string[]` | No | Paths to exclude from monitoring | `[]` |

## Docker

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

**Dockerfile:**
```dockerfile
ENV SPYGLASSES_API_KEY=your_api_key_here
```

**docker-compose:**
```yaml
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