vicket
Commencer
Page de support / Nº 03

Installer la page de support

Le CLI Vicket génère des composants qui vous appartiennent dans votre repo. Pas de SDK runtime à importer, pas de blob minifié à charger : le CLI écrit des fichiers TypeScript (composants React ou SFC Vue, selon votre stack) que vous commitez, modifiez et livrez comme n'importe quel composant.

Lancez la commande init

À la racine de votre projet Next.js, React, Nuxt ou Vue :

npx @vicket/cli init

Le CLI inspecte le projet (framework, shadcn/ui, Tailwind, présence de src/) et vous fait confirmer chaque réponse ; rien n'est deviné en silence. Puis il écrit les fichiers.

Trois variantes de style

Les composants arrivent dans la variante qui correspond à votre stack :

Vous avezVous obtenez
shadcn/ui (React)Des composants construits sur vos primitives ui/ (Button, Dialog, ...)
Tailwind, sans shadcnDes éléments natifs avec des classes Tailwind neutres
Ni l'un ni l'autreDes éléments natifs plus vicket-support.css (variables CSS de theming)

Avec shadcn, vérifiez que les primitives existent : npx shadcn@latest add button checkbox dialog input label radio-group select textarea. Sur Vue et Nuxt, ce sont les variantes natives qui s'appliquent ; le support de shadcn-vue est prévu.

Arborescence résultante

Pour un projet Next.js App Router :

src/
├── app/
│   └── support/
│       └── page.tsx                  # monte la page de support sur /support
└── components/
    └── vicket/
        ├── support-client.ts         # client typé de l'API publique
        ├── support-page.tsx          # articles + FAQ + recherche + bouton contact
        ├── contact-support-modal.tsx # formulaire de ticket, piloté par vos templates
        ├── field-control.tsx         # un input par type de champ de template
        └── vicket-support.css        # variante CSS uniquement

Sur Vue et Nuxt, les mêmes fichiers arrivent en SFC (SupportPage.vue, ContactSupportModal.vue, FieldControl.vue plus support-client.ts) ; Nuxt reçoit aussi pages/support.vue, que son routeur prend en charge automatiquement (sous app/ sur un layout Nuxt 4). Sur React ou Vue pur, pas de fichier de page : le CLI affiche le snippet de route à coller dans votre routeur.

Les fichiers existants ne sont jamais écrasés. Relancer init est sans risque : il ne complète que ce qui manque.

Ce que font les composants

  • support-page.tsx rend la page : un titre, une barre de recherche qui filtre les articles, les articles les plus consultés, les FAQ et un bouton Contact Support.
  • contact-support-modal.tsx s'ouvre sur ce bouton. Il charge les templates de ticket de votre site, rend celui sélectionné sous forme de formulaire, et soumet via l'API publique avec une clé d'idempotence.
  • support-client.ts est le seul fichier qui parle au réseau. Trois fonctions lisent (articles, FAQ, templates), une écrit (tickets).

La suite