feat: Setup Nuxt UI

wp-content/themes/headless/.vscode/settings.json

@@ -1,35 +1,34 @@
 {
   "[css]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[javascript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[json]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[jsonc]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[postcss]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[scss]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[typescript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "[vue]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode",
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": "always"
+    "source.fixAll": "always",
   },
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
   "editor.quickSuggestions": {
-    "strings": "on"
+    "strings": "on",
   },
-  "eslint.enable": false
 }

wp-content/themes/headless/app/app.vue

@@ -1,8 +1,12 @@
+<script setup lang="ts">
+import { fr } from "@nuxt/ui/locale";
+</script>
+
 <template>
-  <div>
+  <UApp :locale="fr">
     <NuxtRouteAnnouncer />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-  </div>
+  </UApp>
 </template>

wp-content/themes/headless/app/assets/css/_main.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@import "./containers.css";
+@import "./theme.css";
+@import "./typography.css";

wp-content/themes/headless/app/assets/css/containers.css

@@ -0,0 +1,67 @@
+:root {
+  --ui-container: var(--breakpoint-2xl);
+}
+
+/* Container padding */
+@utility px-container {
+  @apply px-4 sm:px-6 lg:px-8;
+}
+
+/* Container sizes */
+@utility container {
+  @apply mx-auto max-w-(--breakpoint-2xl) px-container;
+}
+@utility container-xl {
+  @apply container max-w-(--breakpoint-xl);
+}
+@utility container-lg {
+  @apply container max-w-(--breakpoint-lg);
+}
+@utility container-md {
+  @apply container max-w-(--breakpoint-md);
+}
+@utility container-sm {
+  @apply container max-w-(--breakpoint-sm);
+}
+@utility container-fluid {
+  @apply container max-w-screen;
+}
+@utility container-none {
+  @apply w-full max-w-screen;
+}
+
+/* Split containers */
+:root {
+  --container-outside-margin: 0;
+  --container-width: 100vw;
+  @variant sm {
+    --container-outside-margin: calc(50vw - theme("screens.sm") / 2);
+    --container-width: theme("screens.sm");
+  }
+  @variant md {
+    --container-outside-margin: calc(50vw - theme("screens.md") / 2);
+    --container-width: theme("screens.md");
+  }
+  @variant lg {
+    --container-outside-margin: calc(50vw - theme("screens.lg") / 2);
+    --container-width: theme("screens.lg");
+  }
+  @variant xl {
+    --container-outside-margin: calc(50vw - theme("screens.xl") / 2);
+    --container-width: theme("screens.xl");
+  }
+  @variant 2xl {
+    --container-outside-margin: calc(50vw - theme("screens.2xl") / 2);
+    --container-width: theme("screens.2xl");
+  }
+}
+
+@utility container-left {
+  @apply ml-(--container-outside-margin) px-container;
+}
+@utility container-right {
+  @apply mr-(--container-outside-margin) px-container;
+}
+@utility container-half {
+  width: calc(var(--container-width) / 2);
+}

wp-content/themes/headless/app/assets/css/typography.css

@@ -0,0 +1,21 @@
+/* Heading styles */
+@utility heading-base {
+  @apply font-bold tracking-tight;
+}
+@utility heading-1 {
+  @apply heading-base text-4xl;
+}
+@utility heading-2 {
+  @apply heading-base text-3xl;
+}
+@utility heading-3 {
+  @apply heading-base text-2xl;
+}
+@utility heading-4 {
+  @apply heading-base text-xl;
+}
+
+/* Paragraph styles */
+@utility paragraph-lead {
+  @apply text-2xl;
+}

wp-content/themes/headless/app/assets/svg/site-logo.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" viewBox="0 0 490.3 86.763" xmlns="http://www.w3.org/2000/svg">
+  <path d="m10.344 1.5312a10.208 10.208 0 0 0-9.0195 15.207l36.1 64.801a10.2 10.2 0 0 0 13.9 3.9004 10.415 10.415 0 0 0 4-14l-36.201-64.701a10.208 10.208 0 0 0-8.7793-5.207zm221.33 12.51v51.84h11.52v-2.8789a16.277 16.277 0 0 0 11.232 3.959c9.576 0 17.641-7.7004 17.641-19.152 0-11.376-8.0656-19.152-17.641-19.152a16.277 16.277 0 0 0-11.232 3.9609v-18.576h-11.52zm206 0v51.84h11.52v-51.84h-11.52zm-127.3 0.070312v11.145h11.521v-11.145h-11.521zm-21.229 14.535c-8.6942-0.004836-14.866 4.5403-15.109 11.721-0.193 5.685 3.5014 9.4123 10.15 10.863l7.291 1.6875c2.645 0.594 3.5488 1.5612 3.5078 2.7852-0.054 1.583-1.7534 2.8227-4.7754 2.7207-3.094-0.105-5.8618-1.3519-6.2598-4.4629l-11.305 1.9199c0.972 7.453 8.133 10.795 16.625 11.084 9.5 0.322 16.549-3.6186 16.82-11.602 0.181-5.325-2.8478-9.5341-9.6348-11.205l-8.4316-2.0137c-2.286-0.582-2.6824-1.6003-2.6484-2.6113 0.044-1.295 1.0992-2.773 4.1992-2.668 3.526 0.12 5.6164 2.2082 5.9004 4.4512l10.574-1.7363c-1.227-6.309-7.0597-10.613-16.055-10.918-0.28559-0.009687-0.56915-0.015469-0.84961-0.015625zm-79.43 0.009766c-10.512 0-19.152 7.7764-19.152 19.152 0 11.448 8.6401 19.152 19.08 19.152 8.28 0 14.832-3.6728 17.928-11.301l-10.225-2.0879c-1.944 3.528-5.0392 4.1758-7.6992 4.1758-3.888 0-6.8414-2.6624-7.7774-6.9824h26.5v-2.957h-0.00781c-0.216-11.808-8.4225-19.152-18.646-19.152zm140.62 0a13.682 13.682 0 0 0-10.656 4.3926v-3.3125h-11.52v36.145h11.52v-17.711c0-6.048 2.7361-9.1445 6.9121-9.1445 3.456 0 6.1191 2.5912 6.1191 6.6992v20.156h11.521v-17.711c0-6.048 2.8067-9.1445 7.0547-9.1445 3.384 0 6.0488 2.5912 6.0488 6.6992v20.156h11.447v-22.607c0-8.784-6.1202-14.617-13.824-14.617a15.58 15.58 0 0 0-12.814 6.1211c-2.448-3.96-6.7686-6.1211-11.809-6.1211zm66.391 0a16.277 16.277 0 0 0-11.232 3.9609v-2.8809h-11.52v48.385h11.52v-15.119a16.277 16.277 0 0 0 11.232 3.959c9.576 0 17.639-7.7004 17.639-19.152 0-11.376-8.0627-19.152-17.639-19.152zm54.936 0c-10.512 0-19.15 7.7764-19.15 19.152 0 11.448 8.6381 19.152 19.078 19.152 8.28 0 14.834-3.6728 17.93-11.301l-10.225-2.0879c-1.944 3.528-5.0392 4.1758-7.6992 4.1758-3.888 0-6.8414-2.6624-7.7774-6.9824h26.5v-2.957h-0.00781c-0.216-11.808-8.4244-19.152-18.648-19.152zm-336.16 1.0801 11.592 36.217h10.008l6.5527-19.584 6.4805 19.584h10.008l11.576-36.217h-11.301l-5.9004 19.512-6.8398-19.512h-8.1367l-6.8398 19.441-5.8984-19.441h-11.301zm174.88 0v36.145h11.521v-36.145h-11.521zm-100.66 8.2812a7.221 7.221 0 0 1 7.2715 5.6875h-14.9a7.918 7.918 0 0 1 7.6289-5.6875zm261.94 0a7.221 7.221 0 0 1 7.2715 5.6875h-14.9a7.918 7.918 0 0 1 7.6289-5.6875zm-219.6 0.43164c5.04 0 8.7109 3.8154 8.7109 9.3594 0 5.616-3.6709 9.3613-8.7109 9.3613a8.972 8.972 0 0 1-8.8574-9.3613 9.016 9.016 0 0 1 8.8574-9.3594zm162.29 0c5.04 0 8.7129 3.8154 8.7129 9.3594 0 5.616-3.6729 9.3613-8.7129 9.3613a8.972 8.972 0 0 1-8.8555-9.3613 9.016 9.016 0 0 1 8.8555-9.3594z" fill="#212121"/>
+  <path d="m123.02 1.939-.7-.5a9.735 9.735 0 0 0-13.4 3.2l-29.1 47.3a2.253 2.253 0 0 1-3.9-.1l-11.3-20.3a9.82 9.82 0 0 0-13.3-3.8l-.8.4a9.82 9.82 0 0 0-3.8 13.3l21.8 39a9.983 9.983 0 0 0 8.3 5 9.83 9.83 0 0 0 9.1-4.6l40.4-65.6a9.668 9.668 0 0 0-3.3-13.3" fill="#0ad2b7" data-name="Tracé 22516"/>
+</svg>

wp-content/themes/headless/app/components/site/SiteHeader.vue

@@ -0,0 +1,9 @@
+<template>
+  <UHeader mode="slideover">
+    <template #left>
+      <NuxtLink to="/">
+        <SvgSiteLogo class="h-10 w-auto" />
+      </NuxtLink>
+    </template>
+  </UHeader>
+</template>

wp-content/themes/headless/app/components/site/page/PageHeader.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ title?: string }>();
+</script>
+
+<template>
+  <header v-if="title" class="py-3">
+    <div class="container">
+      <h1 class="heading-1">{{ title }}</h1>
+    </div>
+  </header>
+</template>

wp-content/themes/headless/app/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="layout-default">
+    <SiteHeader />
     <slot />
   </div>
 </template>

wp-content/themes/headless/app/pages/[...uri].vue

@@ -1,3 +1,5 @@
 <template>
-  <div id="page-node-from-uri">TODO: [...uri].vue</div>
+  <div id="page-node-from-uri">
+    <PageHeader title="TODO" />
+  </div>
 </template>

wp-content/themes/headless/nuxt.config.ts

@@ -1,5 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  modules: ["@nuxt/ui", "nuxt-svgo"],
+
   compatibilityDate: "2026-03-18",
   devtools: { enabled: true },
+
+  ui: { colorMode: false },
+  css: ["~/assets/css/_main.css"],
+  components: { dirs: [{ path: "~/components", pathPrefix: false }] },
+
+  svgo: {
+    autoImportPath: "~/assets/svg/",
+    componentPrefix: "Svg",
+    defaultImport: "component",
+  },
 });

wp-content/themes/headless/package.json

@@ -16,7 +16,10 @@
     "release": "oxlint . && oxfmt --check . && nuxt typecheck && changelogen --noAuthors --release --push"
   },
   "dependencies": {
+    "@nuxt/ui": "^4.5.1",
     "nuxt": "^4.4.2",
+    "nuxt-svgo": "^4.2.6",
+    "tailwindcss": "^4.2.2",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   },