feat(kno-12274): add guides in vue.js tutorial

[scotidodson]

KNO-12274: [Docs] Add guides in Vue tutorial

Summary

• Adds a new "community-sourced" tutorial for implementing Knock guides in Vue.js, based on the existing Notion doc a few customers have used.
• Adds a "Guide identifiers" section to the rendering guides doc (channel ID, guide key, guide type)
• Adds in-app guide as a destination channel type in the integrations overview and channels concept pages

Changes

• content/tutorials/guides-in-vue.mdx — new tutorial on implementing guides in Vue.js
• data/sidebars/tutorialsSidebar.ts — added sidebar entry for tutorial page
• components/ui/Callout.tsx — added community_sourced type with fixed title and body copy via COMMUNITY_CONTENT constant; idea is that this will always have the same copy every time it's used and we expect to use it again on other tutorials.
• components/ui/CodeBlock.tsx — registered vue as a syntax highlighting language (aliased to xml/hljs, which handles Vue SFC template syntax)
• content/in-app-ui/guides/render-guides.mdx — added "Guide identifiers" section explaining guide channel ID, guide key, and guide type based on some recent customer confusion
• content/integrations/overview.mdx — added in-app guide to the destination channels list
• content/concepts/channels.mdx — added in-app guide to the destination channels list

Notes

• TypeScript types for guide steps are loosely typed (unknown) in places where the exact exported types from @knocklabs/client are unclear — we may want to change that.
• Follow-up ticket filed for rethinking in-app channel coverage in the integrations section: KNO-12277

[linear]

KNO-12274 [Docs] Add Guides in Vue tutorial

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Apr 3, 2026 3:34pm

[cursor]

Risk HIGH: Adds a new Vue.js guides tutorial with modifications to shared UI components (Callout.tsx and CodeBlock.tsx), sidebar navigation, and content across multiple documentation sections.

Reasons

1. Shared component modified (Callout.tsx). Adds a new community_sourced callout type with a COMMUNITY_SOURCED constant containing hardcoded title/body, and refactors title/text rendering to use effectiveTitle/effectiveText — this affects all existing callout usage site-wide.
2. Shared component modified (CodeBlock.tsx). Registers vue as a new syntax highlighting language aliased to xml, which changes the set of recognized languages in all code blocks across the site.
3. New MDX page added. content/tutorials/guides-in-vue.mdx is a brand new 469-line tutorial file — new pages carry MEDIUM risk on their own (routing, SEO, sidebar integration).
4. Sidebar navigation modified. data/sidebars/tutorialsSidebar.ts adds a new entry, which affects the tutorials section navigation for all readers.
5. Changes span multiple documentation sections. Edits touch content/concepts/, content/integrations/, content/in-app-ui/, and content/tutorials/, increasing the surface area of potential issues.

Notes

• Callout.tsx rendering logic. The refactor from direct title/text props to effectiveTitle/effectiveText should be tested to confirm that existing callout types still render correctly when title or text is explicitly passed as undefined or null.
• CodeBlock.tsx language alias. Verify that aliasing vue to xml produces acceptable syntax highlighting for Vue SFC templates — .vue files contain <script>, <style>, and <template> blocks that may not all highlight correctly with plain XML grammar.
• TypeScript loose typing. The PR description notes that guide step types use unknown in several places — a reviewer should assess whether stronger typing is feasible with the current @knocklabs/client exports.
• New tutorial content quality. At 469 lines, this is a substantial tutorial. Review for adherence to the style guide (sentence case, active voice, no adverbs, Oxford comma, American spelling, link validity).

  

_{Sent by Cursor Automation: Docs PR classifier}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[JEverhart383]

Made a couple of tweaks/suggestions for naming, but this looks awesome, should help a lot of people

[JEverhart383]

Might callout why the polyfill is needed here

[JEverhart383]

Feels like this is actually useKnockGuides and maybe I would recommend calling this useKnockGuidesClient to make it more clear that this returns a client and not just guides. Totally take or leave though on naming, but would recommend calling out this layer here

[JEverhart383]

But when I look at the Guide Component example, more so think adding client to naming would help disambiguate what's happening

[JEverhart383]

useKnockGuideClient so that we're building on the actual class name

[JEverhart383]

Suggested change

	The [Knock React SDK](/in-app-ui/react/sdk/overview) uses a provider/hook pattern (`KnockProvider`, `KnockGuideProvider`, `useGuide`). In Vue.js, you replicate this with `provide`/`inject` and composables.
	The [Knock React SDK](/in-app-ui/react/sdk/overview) uses a provider/hook pattern (`KnockProvider`, `KnockGuideProvider`, `useGuide`). In Vue.js, you replicate this with `provide`/`inject` and composables. Here's a comparison of Knock's React components and their Vue equivalents.