Документация Fitting Widget

Nuxt

Интеграция с Nuxt 3 / Nuxt 4 приложением

Интеграция с Nuxt

Fitting Widget легко интегрируется с Nuxt 3 и Nuxt 4.

1. Загрузка скрипта

Используйте composable useHead или добавьте скрипты в nuxt.config.ts.

Вариант А — На страницу через useHead

<!-- pages/product/[slug].vue -->
<template>
  <div>
    <h1>{{ product.name }}</h1>
    <TryOnWidget :product-name="product.name" :image-url="product.image" />
  </div>
</template>

<script setup lang="ts">
import { useHead } from '#app'

useHead({
  script: [
    {
      src: 'https://widget.try-on.ru/fitting-widget-bundle.js',
      id: 'fitting-widget-bundle',
    },
    {
      id: 'fitting-init',
      innerHTML: `
        window.fitting = window.fitting || function() {
          (window.fitting.q = window.fitting.q || []).push(arguments);
        };
        window.fitting('init', {
          apiKey: '${import.meta.env.VITE_TRY_ON_API_KEY}'
        });
      `,
    },
  ],
})
</script>

Вариант Б — Глобально в nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://widget.try-on.ru/fitting-widget-bundle.js',
          id: 'fitting-widget-bundle',
        },
        {
          id: 'fitting-init',
          innerHTML: `
            window.fitting = window.fitting || function() {
              (window.fitting.q = window.fitting.q || []).push(arguments);
            };
            window.fitting('init', {
              apiKey: '${import.meta.env.VITE_TRY_ON_API_KEY}'
            });
          `,
        },
      ],
    },
  },
})

2. Создание компонента-обёртки

<!-- components/TryOnWidget.vue -->
<template>
  <div>
    <div id="widget-container" class="aspect-[3/4] w-full max-w-[600px]" />
    <button @click="handleTryOn">Примерка</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  productName: string
  imageUrl: string
}>()

const handleTryOn = () => {
  window.fitting('create', {
    targetElementId: 'widget-container',
    model: 'balanced',
    tryonItems: [
      {
        productName: props.productName,
        url: props.imageUrl,
      },
    ],
  })
}
</script>

Переменная окружения

Добавьте в .env:

VITE_TRY_ON_API_KEY=pk_live_xxx