Nuxt 3 예제

핵심 요약

Nuxt 3 예제로 후원·피드백 UI 설치를 실습할 수 있습니다. 빠르게 연결하려면 호스티드 링크, 디자인을 바꾸려면 Vue 컴포넌트를 사용하세요.

앱 실행 → 공개 연동 ID 설정 → 버튼·페이지 표시 확인 순서로 진행하세요.

examples/nuxt3-site/ — "Pixel Forge Studio", yetdapay-install 스킬의 설치 대상으로 사용되는 최소 Nuxt 3(SSR, 단일 app.vue) 소비자 사이트.

cd examples/nuxt3-site
pnpm install     # 또는 npm install — 첫 설치 시 네트워크 필요
pnpm dev         # http://localhost:3000

후보 마운트 지점은 app.vue의 HTML 주석으로 표시되어 있습니다: header .nav, #support .support, .site-footer.

호스티드 설치 (의존성 제로)

<a href="https://your-site.example/h/intpub_…" target="_blank" rel="noopener noreferrer">
  ☕ 후원하기
</a>

네이티브 설치 (copy-in SDK)

sdk/core.ts + sdk/vue/YetdaPayButtons.vue를 사이트에 복사한 후:

<script setup>
import YetdaPayButtons from '~/sdk/vue/YetdaPayButtons.vue';
</script>

<YetdaPayButtons publicId="intpub_…" mode="native" feature="both" />

게이트웨이의 yetdapay_integration_validate 도구 또는 수동 설치 체크리스트로 결과를 검증하세요.

라이선스 측

완전한 라이선스 보호 Nuxt 앱(activate → entitlement → 게이트된 서버 라우트)은 연구 PoC experiments/secure-browser-licensing/experiment-e-nuxt-sdk/를 참조하세요 — @yetdapay/license-web과 @yetdapay/license-nuxt의 defineLicenseEventHandler를 페어링합니다. PoC이지 출시된 템플릿이 아닙니다.