# 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.