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

  Code
   
  export default {
    // Other configuration options...
    head: {
      script: [
        {
          src: "https://cdn.jsdelivr.net/npm/@preo-live/[email protected]/dist/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.

  Code
   
  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:

Code
 
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:

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