Browser extension or desktop tool sellers
A Vue marketing site sells licences. Each paid order is tagged with the plan, and Kit sends activation help to the right segment.
Checkout embed
Vue + Kit (ConvertKit) integration
A Vue 3 component opens the checkout through the browser SDK, and Kit tags and emails the buyer from a paid order.
No credit card required. No coding required.
Vue
Kit (ConvertKit)Does Vue integrate with Kit (ConvertKit)?
Plandalf has no Vue-specific package for this and no Vue to Kit sync. Your Vue app loads the browser SDK and opens the offer; a Plandalf sequence then runs native Kit steps after the paid event. Kit events can also start Plandalf sequences, for example to enrol a form signup in a promo.
What moves between Vue and Kit (ConvertKit)
| Event | From and to | Through | What happens |
|---|---|---|---|
| Checkout opened | Vue → Plandalf | A button bound with :data-plandalf-present opens the offer. The SDK watches the DOM, so a button created by v-if or a route component still attaches. | |
| Checkout completed | Plandalf → Kit | Native step | Tag Subscriber and Add Subscriber to Sequence use the email from the trigger, so nothing in the Vue bundle holds a Kit key. |
| Subscriber joined form | Kit → Plandalf | Native step | A Kit landing page signup can start Enroll in Promo, and a Vue component mounts the countdown with sdk.promo() into a template ref. |
| Automation step reached | Kit → Plandalf | Webhook | Kit's Send a Webhook app, on paid Kit accounts, posts the subscriber's ID and email to a URL when a subscriber reaches a Visual Automation step. It can point at a Plandalf catch URL. |
| Paid access | Plandalf → Vue | Webhook | Unlocking protected screens belongs on your server, fed by a verified paid event. A browser callback only updates the page. |
Kit tags for buyers of a Vue app
This uses Vue 3 and the hosted browser SDK, with no extra npm package.
Add the queue snippet and SDK to index.html
In a Vite project, put the small
plandalfqueue function before your app entry script, then your account's SDK script tag. Load it once per document.Build the button component
Bind the offer slug with
:data-plandalf-presentand include the offer in the element's:key. The SDK reads attributes when it first attaches, so a changed slug needs a fresh element.Create the Kit key and connect
In Kit open Settings, Developer and add a V4 key. In Plandalf use Automation, Marketplace, Kit, Connect and paste it.
Add the tag and sequence steps
A sequence on Checkout Completed for your offer runs Kit, Tag Subscriber (email
{{trigger.customer_email}}, tag Vue app buyer) and Kit, Add Subscriber to Sequence for onboarding emails.Check one sandbox purchase
Confirm the Stripe connection is a test connection, buy through your Vue page, then match the paid invoice to the subscriber and tag in Kit. Remember the Run on test purchases setting.
What sellers do with Vue and Kit (ConvertKit)
Small SaaS with a Vue dashboard
An upgrade button inside the app opens checkout in a modal. Kit tags upgraded users so a nudge campaign stops reaching them.
Limits and gotchas
- Plandalf's Vue guide was checked locally on one Vue version and notes that earlier-tier purchases, renewals, refunds and fulfilment were still pending, so test your own flow.
- Kit's purchase history will stay empty because Plandalf connects by API key. Use tags or custom fields instead.
- Kit's Send a Webhook app sends only the subscriber ID and email, with no custom fields, so enrol by email.
- Server-rendered Vue must touch the browser SDK only inside
onMounted. - Changing an attribute on an already bound button does not rebind the SDK, so remount through
:keywhen the offer, promo or mode changes.
Vue and Kit (ConvertKit): common questions
- Does Vue integrate with Kit?
- Not as a direct sync. A Vue app opens a Plandalf checkout through the browser SDK, and Plandalf's native Kit steps tag the buyer afterwards.
- How do I connect a Vue checkout to ConvertKit?
- Add the SDK to index.html, bind
data-plandalf-presenton a button, connect Kit with a V4 key under Automation, and run Tag Subscriber from a Checkout Completed sequence. - Can Kit trigger a countdown in my Vue app?
- Yes. A Kit form or tag event starts a Plandalf sequence with Enroll in Promo, and a Vue component renders the countdown from the same promo slug.
Guides for this pair
- Plandalf with Vue
- Plandalf with Kit (ConvertKit)
- Vue setup guide
- Kit setup guide
- Browser SDK install
More from Vue and Kit (ConvertKit)
- Stripe + VueA Vue 3 component renders a button, the browser SDK opens the checkout, and your Stripe account takes the payment.
- PayPal + VueA Vue 3 button opens your Plandalf checkout, and PayPal shows up there as a payment option beside cards.
- Klaviyo + Kit (ConvertKit)Kit gets native Plandalf steps, Klaviyo gets a webhook call to its API, and one checkout can feed both.
- Next.js + Kit (ConvertKit)Next.js runs the product and the page, Plandalf runs checkout, and Kit tags and emails the buyer through native steps.
- PayPal + Kit (ConvertKit)PayPal buyers on a Plandalf checkout can be tagged in Kit and dropped into an email sequence, using the same steps as card buyers.
Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: Kit help: Send a Webhook app.