Vue · Socle applicatif

App Shell

Disponible

Le squelette réutilisé par toutes les vues : Header + SideNav + Breadcrumb + zone de contenu (titre + Card) + Footer. Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular. Toutes les autres vues s'insèrent dans la zone de contenu.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

App Shell : squelette applicatif (données mock)

Sent Tech

Sent Forge

Actif

Zone de contenu de la page, remplacée par chaque vue spécifique.

Activité récente

14 actions enregistrées au cours des dernières 24 heures.

Tâches assignées

6 tâches ouvertes, dont 2 arrivent à échéance cette semaine.

Déploiements

Dernière mise en production : il y a 3 heures, statut sain.

Voir le code (Svelte)

<div class="as-shell">
  <Header
    title="Sent Tech"
    navItems={[{"label":"Tableau de bord","href":"#","active":true},{"label":"Projets","href":"#"},{"label":"Équipe","href":"#"},{"label":"Rapports","href":"#"},{"label":"Paramètres","href":"#"}]}
    account={{"name":"Fabien Antoine","email":"[email protected]"}}
  />
  <div class="as-body">
    <aside class="as-aside">
      <SideNav items={[{"label":"Tableau de bord","href":"#","active":true},{"label":"Projets","href":"#"},{"label":"Équipe","href":"#"},{"label":"Rapports","href":"#"},{"label":"Paramètres","href":"#"}]} />
    </aside>
    <main class="as-main">
      <Breadcrumb items={[{"label":"Accueil","href":"#"},{"label":"Projets","href":"#"},{"label":"Sent Forge","current":true}]} />
      <div class="as-page-head">
        <h2 class="as-page-title">Sent Forge</h2>
        <Badge tone="success">Actif</Badge>
      </div>
      <p class="as-page-lead">Zone de contenu de la page, remplacée par chaque vue spécifique.</p>
      <div class="as-cards">
        <Card>
          <h3 class="as-card-title">Activité récente</h3>
          <p class="as-card-body">14 actions enregistrées au cours des dernières 24 heures.</p>
        </Card>
        <Card>
          <h3 class="as-card-title">Tâches assignées</h3>
          <p class="as-card-body">6 tâches ouvertes, dont 2 arrivent à échéance cette semaine.</p>
        </Card>
        <Card>
          <h3 class="as-card-title">Déploiements</h3>
          <p class="as-card-body">Dernière mise en production : il y a 3 heures, statut sain.</p>
        </Card>
      </div>
    </main>
  </div>
  <Footer
    brand="Sent Tech"
    columns={[{"title":"Produit","links":[{"label":"Composants","href":"#"},{"label":"Tokens","href":"#"},{"label":"Documentation","href":"#"}]},{"title":"Entreprise","links":[{"label":"À propos","href":"#"},{"label":"Blog","href":"#"},{"label":"Contact","href":"#"}]}]}
    copyright="© 2026 Sent Tech. Tous droits réservés."
  />
</div>