vicket
Get started
Support page / Nº 03

Install the support page

The Vicket CLI scaffolds owned components into your repo. There is no runtime SDK to import, no minified blob to load: the CLI writes plain TypeScript files (React components or Vue SFCs, matching your stack) that you commit, edit, and ship like any other component.

Run the init command

From the root of your Next.js, React, Nuxt or Vue project:

npx @vicket/cli init

The CLI inspects the project (framework, shadcn/ui, Tailwind, src/ layout) and asks you to confirm each answer; nothing is guessed silently. Then it writes the files.

Styling: three variants

The components come in the variant that matches your stack:

You haveYou get
shadcn/ui (React)Components built on your own ui/ primitives (Button, Dialog, ...)
Tailwind, no shadcnNative elements with neutral Tailwind classes
NeitherNative elements plus vicket-support.css (CSS variables for theming)

With shadcn, make sure the primitives exist: npx shadcn@latest add button checkbox dialog input label radio-group select textarea. On Vue and Nuxt the native variants apply; shadcn-vue support is planned.

Resulting file tree

For a Next.js App Router project:

src/
├── app/
│   └── support/
│       └── page.tsx                  # mounts the support page at /support
└── components/
    └── vicket/
        ├── support-client.ts         # typed client for the public API
        ├── support-page.tsx          # articles + FAQs + search + contact button
        ├── contact-support-modal.tsx # ticket form, driven by your templates
        ├── field-control.tsx         # one input per template field type
        └── vicket-support.css        # plain-CSS variant only

On Vue and Nuxt the same files land as SFCs (SupportPage.vue, ContactSupportModal.vue, FieldControl.vue plus support-client.ts); Nuxt also gets pages/support.vue, which its router picks up automatically (under app/ on a Nuxt 4 layout). On plain React or Vue there is no page file; the CLI prints the route snippet to paste into your router instead.

Existing files are never overwritten. Re-running init is safe: it only fills in what's missing.

What the components do

  • support-page.tsx renders the page: a heading, a search bar that filters articles, the most viewed articles, the FAQs, and a Contact Support button.
  • contact-support-modal.tsx opens on that button. It loads your site's ticket templates, renders the selected one as a form, and submits through the public API with an idempotency key.
  • support-client.ts is the only file that talks to the network. Three functions read (articles, FAQs, templates), one writes (tickets).

What's next