# Nuxt

To integrate Preo Widget with Nuxt, make the following changes to your `nuxt.config.js` file:

- Add the Preo JavaScript SDK to your project by including the following script tag in the `head` section

  ```javascript
  export default {
    // Other configuration options...
    head: {
      script: [
        {
          src: "https://edge.preo.cloud/c/components@0.6/components.umd.js",
          body: true,
        },
      ],
    },
  };
  ```

- Modify compiler options to allow custom elements. This is necessary for the Preo web components to work correctly in Nuxt.

  ```javascript
  export default {
    // Other configuration options...
    vue: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith("preo-"),
      },
    },
  };
  ```

## TypeScript Support

To add TypeScript support for the Preo web components in your Nuxt application, create a type declaration file `types/preo.d.ts`:

```typescript
declare module 'vue' {
  export interface GlobalComponents {
    'preo-storefront': {
      'sdk-id': string;
    };
  }
}

export {};
```

With these changes, you can now use the Preo widget in your Nuxt application. For example, you can add the widget to your page like this:

```html
<template>
  <div>
    <preo-storefront sdk-id="..."></preo-storefront>
  </div>
</template>
```