Layer Nuxt - About & Versioning

Ce layer Nuxt permet d'extraire, de centraliser et d'afficher de manière élégante les informations de versioning de votre application (version du package, versions des frameworks, versions de Node.js au build et au runtime, ainsi que la date de build).

Il fournit un composant de carte d'information (UCard basé sur @nuxt/ui) et un endpoint API pour récupérer dynamiquement la version de Node active sur le serveur.

🚀 Configuration Requise

Pour que ce layer fonctionne correctement et injecte les bonnes variables dans le useRuntimeConfig(), vous devez adapter vos fichiers de projet globaux.

1. Configuration du package.json global

Assurez-vous que votre projet possède une clé "version". C'est cette valeur qui sera lue et injectée pour représenter la version actuelle de l'application. Ajoutez aussi "engines" pour fixer la version de node.

{
  "name": "daen-web",
  "private": true,
  "type": "module",
  "version": "0.0.3",
  "engines": {
    "node": "24.11.1"
  },
  "scripts": {
    "postinstall": "nuxt prepare",
    "release": "npm version patch && git push origin --follow-tags"
  },
  "dependencies": {
    "nuxt": "^4.4.8",
    "@nuxt/ui": "^4.9.0"
  }
}

2. Configuration du nuxt.config.ts global

Vous devez importer la version depuis votre package.json et configurer le bloc runtimeConfig.public.

// nuxt.config.ts global
import { version as appVersion } from "./package.json";
import pkgNuxt from "nuxt/package.json";
import pkgNuxtUi from "@nuxt/ui/package.json";

export default defineNuxtConfig({
  // Important pour l'auto-import partagé des layers dans l'architecture Nuxt 4 structure
  future: {
    compatibilityVersion: 4,
  },
  extends: [ '@franck35/nuxt-version-page' ],

  runtimeConfig: {
    public: {
      // Injection de la version récupérée du package.json global
      appVersion,

      // Date de build capturée au moment du démarrage de l'application / build
      buildDate: new Date().toISOString(),

      // Versions des dépendances clés extraites dynamiquement
      nuxtVersion: pkgNuxt.version,
      nuxtUiVersion: pkgNuxtUi.version,
    },
  },

  // Déclaration du layer (adapter le chemin selon votre structure)
  extends: ["./layers/about"],
});

Si vous mettez en place Content-Security-Policy, ajoutez https://nodejs.org et https://registry.npmjs.org à la propriété connect-src

 routeRules: {
            // Applique à toutes les routes
            '/**': {
                headers: {
                    'Content-Security-Policy': " \
                        connect-src 'self' https://nodejs.org https://registry.npmjs.org; \
                        ",
                }
            },
 }

🛠️ Structure du Layer

Le layer contient les éléments clés suivants :

L'API Route : server/api/runtime-info.get.ts

Ce point de terminaison capture la version de Node au moment de l'initialisation (buildNodeVersion) ainsi que la version en temps réel lors de l'appel (runtimeNodeVersion).

Le Composant Vue : components/AboutCard.vue

Un composant prêt à l'emploi qui utilise @nuxt/ui pour mettre en valeur :

• La version de l'application (appVersion)
• La date de build formatée en local français (fr-FR)
• La version de Nuxt & Nuxt UI
• Les versions de Node (Build et Runtime)

📖 Utilisation

Une fois le layer enregistré dans votre nuxt.config.ts, vous pouvez simplement appeler et afficher le composant dans l'une de vos pages (ex: pages/version.vue) :

<template>
  <div class="flex min-h-screen items-center justify-center">
    <!-- Le composant est auto-importé grâce au layer -->
    <AboutCard />
  </div>
</template>