Ana içeriğe atla
Vue 3, Web Bileşenlerini yerel olarak destekler; bu da Ribaunt eklemeyi kolaylaştırır. Vite yapılandırmanızda ribaunt-widget’ı özel bir öğe olarak kaydedin, widget’ı bileşeninizin içine yan etki olarak içe aktarın ve Vue’nun standart : özellik bağlama ve @ olay dinleyici söz dizimi ile doğrudan şablonunuzda kullanın.
Widget, Web Crypto API’sine bağlıdır ve bu nedenle güvenli bir bağlam gerektirir. Üretimde https://, yerel geliştirme sırasında ise http://localhost kullanın. Düz yerel ağ HTTP URL’leri bazı tarayıcılarda başarısız olabilir.

​
Vite yapılandırması

Vue’nun şablon derleyicisine, ribaunt- ile başlayan herhangi bir etiketi özel öğe olarak değerlendirmesini söyleyin. Bu adım olmadan Vue, çalışma zamanında “Unknown custom element” (Bilinmeyen özel öğe) uyarıları verecektir. 
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('ribaunt-')
        }
      }
    })
  ]
})

​
Widget’ı bir bileşende kullanma

Özel öğeyi kaydetmek için ribaunt/widget’ı yan etki olarak içe aktarın, ardından <template>’iniz içinde doğrudan <ribaunt-widget> kullanın. Reaktif verileri : ile bağlayın ve olay işleyicilerini @ ile ekleyin. 
<template>
  <form @submit.prevent="submitForm">
    <ribaunt-widget
      ref="widgetRef"
      challenge-endpoint="/api/captcha/challenge"
      verify-endpoint="/api/captcha/verify"
      auto-verify="true"
      :show-warning="showWarning"
      :solve-timeout="15000"
      :disabled="isDisabled"
      @verify="onVerify"
      @error="onError"
      @state-change="onStateChange"
    ></ribaunt-widget>

    <button type="submit" :disabled="!isVerified">Submit Form</button>
    <button type="button" @click="resetCaptcha">Reset</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { RibauntWidgetElement, WidgetState } from 'ribaunt/widget'

// Side-effect import — registers the <ribaunt-widget> custom element
import 'ribaunt/widget'

const widgetRef  = ref<RibauntWidgetElement | null>(null)
const isVerified = ref(false)
const showWarning = ref(false)
const isDisabled  = ref(false)

const onVerify = (event: CustomEvent<{ solutions: any[] }>) => {
  console.log('Verified!', event.detail.solutions)
  isVerified.value = true
}

const onError = (event: CustomEvent<{ error: string }>) => {
  console.error('Error verifying:', event.detail.error)
  isVerified.value = false
}

const onStateChange = (event: CustomEvent<{ state: WidgetState }>) => {
  console.log('State changed to:', event.detail.state)
}

const resetCaptcha = () => {
  widgetRef.value?.reset()
  isVerified.value = false
}

const submitForm = () => {
  if (isVerified.value) {
    console.log('Form submitted securely!')
  }
}
</script>
Önerilen challenge uç noktası yanıt biçimi { challenges: string[] }’dir. Geriye dönük uyumluluk için widget ayrıca { tokens: string[] } ve ham string[] biçimlerini de kabul eder.
:disabled="isDisabled" bağladığınızda, widget disabled durumunu tam bir etkileşim kilidi olarak değerlendirir. Tıklamalar, klavye etkinleştirmesi, startVerification() ve auto-verify, prop’u temizleyene kadar tamamen engellenir. Widget’ın çalışmasını beklemeden önce isDisabled.value = false ayarlayın.