> Open a Plandalf checkout from a Vue 3 app and tag the paying user in Kit with native steps. The browser SDK is the only Plandalf code in your Vue project. Source: https://plandalf.com/apps/vue-app/integrations/convertkit Last modified: 2026-10-26 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. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) 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 VuePlandalf Checkout embed 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 PlandalfKit 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 KitPlandalf 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 KitPlandalf 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 PlandalfVue 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. 1. ### Add the queue snippet and SDK to index.html In a Vite project, put the small `plandalf` queue function before your app entry script, then your account's SDK script tag. Load it once per document. 2. ### Build the button component Bind the offer slug with `:data-plandalf-present` and include the offer in the element's `:key`. The SDK reads attributes when it first attaches, so a changed slug needs a fresh element. 3. ### 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. 4. ### 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. 5. ### 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) ### 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. ### 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 `:key` when 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-present` on 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](https://plandalf.com/platforms/vue-app) - [Plandalf with Kit (ConvertKit)](https://plandalf.com/platforms/convertkit) - [Vue setup guide](https://plandalf.com/docs/platforms/vue-app) - [Kit setup guide](https://plandalf.com/docs/integrations/kit) - [Browser SDK install](https://plandalf.com/docs/sdk/install) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Vue and Kit (ConvertKit) - [**Stripe + Vue**A Vue 3 component renders a button, the browser SDK opens the checkout, and your Stripe account takes the payment.](https://plandalf.com/apps/stripe/integrations/vue-app) - [**PayPal + Vue**A Vue 3 button opens your Plandalf checkout, and PayPal shows up there as a payment option beside cards.](https://plandalf.com/apps/paypal/integrations/vue-app) - [**Klaviyo + Kit (ConvertKit)**Kit gets native Plandalf steps, Klaviyo gets a webhook call to its API, and one checkout can feed both.](https://plandalf.com/apps/klaviyo/integrations/convertkit) - [**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.](https://plandalf.com/apps/nextjs/integrations/convertkit) - [**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.](https://plandalf.com/apps/paypal/integrations/convertkit) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [Kit help: Send a Webhook app](https://help.kit.com/en/articles/13643156-send-a-webhook-app).