Nuxt 3 Example

Quick summary

Use the Nuxt 3 fixture to practice installing YetdaPay donation and feedback UI. Choose a hosted link for a fast setup or a copy-in Vue component for customization.

Run the fixture, add your public integration ID, and verify that the intended button or route renders.

examples/nuxt3-site/ — "Pixel Forge Studio", a minimal Nuxt 3 (SSR, single app.vue) consumer site used as an install target for the yetdapay-install skill.

cd examples/nuxt3-site
pnpm install     # or npm install — needs network on first install
pnpm dev         # http://localhost:3000

Candidate mount points are marked with HTML comments in app.vue: header .nav, #support .support, .site-footer.

Hosted install (zero deps)

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

Native install (copy-in SDK)

Copy sdk/core.ts + sdk/vue/YetdaPayButtons.vue into the site, then:

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

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

Validate the result with the gateway's yetdapay_integration_validate tool or the manual install checklist.

License side

For a full license-protected Nuxt app (activate → entitlement → gated server route), see the research PoC experiments/secure-browser-licensing/experiment-e-nuxt-sdk/ — it pairs @yetdapay/license-web with @yetdapay/license-nuxt's defineLicenseEventHandler. It is a PoC, not a shipped template.