# Vite Installation

## Vite Installation Guide for Squid Widget

This guide will help you integrate the Squid Widget into your Vite + TypeScript project.

For a complete working example, check out our [**full Vite example**](https://github.com/0xsquid/widget-integrations/tree/main/packages/squid-v2/vite/vite-5.5-typescript).

### Prerequisites

Ensure you have the following installed:

* Node.js
* Yarn or npm
* Git (for cloning the example repository)

### Installation Steps

#### Step 1: Install Dependencies

First, install the Squid Widget and necessary dependencies:

```bash
yarn add @0xsquid/widget@^3.0.10
```

#### Step 2: Add Polyfills

Squid requires some polyfills for browser compatibility. Follow these steps to add them:

1. Install the `vite-plugin-node-polyfills` plugin:

```bash
yarn add vite-plugin-node-polyfills -D
```

2. Update your `vite.config.ts` file:

```typescript
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { nodePolyfills } from "vite-plugin-node-polyfills"

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills()
  ]
})
```

#### Step 3: Integrate the Widget

Add the Squid Widget to your desired component. For example, in `src/App.tsx`:

```tsx
import { SquidWidget } from "@0xsquid/widget";

function App() {
  return (
    <div>
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "https://v2.api.squidrouter.com",
          // Add other configuration options here
        }}
      />
    </div>
  );
}

export default App;
```

Replace `<your-integrator-id>` with the Integrator ID you received from Squid.

### Running Your Vite App

After setting up the widget, you can start your Vite development server:

```bash
yarn dev
```

### Example Project

For a full working example, you can clone our example repository:

```bash
# Clone the repo
git clone https://github.com/0xsquid/widget-integrations.git

# Move to the Vite example folder
cd packages/squid-v2/vite/vite-5.5-typescript

# Install dependencies
yarn install

# Start the development server
yarn dev
```

### Customization

To customize the widget's appearance and behavior:

1. Use the [**Squid Widget Studio** ](https://studio.squidrouter.com/)to generate a custom configuration.
2. Copy the generated config and paste it into your `config` prop in the `SquidWidget` component.

### Troubleshooting

If you encounter any issues:

1. Ensure you're using the latest version of the widget (^3.0.10).
2. Verify that you've correctly configured the `vite.config.ts` file with the polyfills.
3. Check that you've added the correct `integratorId` and `apiUrl` in the widget config.
4. Make sure all dependencies are properly installed.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/widget-integration/add-a-widget/widget/vite-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.