@m3ui-vue/nuxt 0.2.4 → 0.3.0

package/README.md

@@ -75,6 +75,7 @@ The composables are prefixed so they can't clash with other modules (`useDevice`
 | Library | Auto-imported as |
 |---|---|
 | `useTheme` | `useM3Theme` |
+| `useThemeTokens` | `useM3ThemeTokens` |
 | `useColorPalette` | `useM3ColorPalette` |
 | `useToast` | `useM3Toast` |
 | `useNotification` | `useM3Notification` |
@@ -83,7 +84,7 @@ The composables are prefixed so they can't clash with other modules (`useDevice`
 | `useWindowSizeClass` | `useM3WindowSizeClass` |
 | `useConfetti` | `useM3Confetti` |
 | `useContainerTransform` | `useM3ContainerTransform` |
-| `useFieldBg`, `useDebounce`, `usePageProgress`, `useSpring` | `useM3FieldBg`, `useM3Debounce`, `useM3PageProgress`, `useM3Spring` |
+| `useFieldBg`, `useDebounce`, `useAutoGrow`, `usePageProgress`, `useSpring`, `useScrollReveal` | `useM3FieldBg`, `useM3Debounce`, `useM3AutoGrow`, `useM3PageProgress`, `useM3Spring`, `useM3ScrollReveal` |
 | `useMap`, `useMapLayers`, `useMapFilter` (with `maplibre-gl`) | `useM3Map`, `useM3MapLayers`, `useM3MapFilter` |
 
 Anything else (types, `palettes`, `motionSprings`…) is imported from `@m3ui-vue/m3ui-vue` as usual.
@@ -100,6 +101,7 @@ Everything `createM3UI()` takes, plus what the module itself does:
 | `composables` | `{ prefix: 'M3' }` | Auto-import the composables with this prefix; `false` to import them yourself |
 | `css` | `true` | Add `@m3ui-vue/m3ui-vue/styles` |
 | `cookies` | `true` | Keep the theme, palette and contrast in cookies too, so the server renders with them |
+| `viewportHints` | `false` | Ask Chromium for the window's exact size with client hints, so the adaptive layouts render at it on a first visit too (that visit's request is repeated once) |
 | `themeScript` | `true` | Inline `themeInitScript()` in `<head>` |
 
 ## With @nuxtjs/i18n
@@ -148,7 +150,11 @@ a theme saved in the user's account, for instance.
 The adaptive layouts (`MNavigationSuite`, `MListDetail`, `MSupportingPane`) measure their own size, which the server
 can't. With `cookies`, the window's size is kept in a cookie too (`m3-viewport`), so from the second visit on they
 render on the server for the user's screen (one in a narrower column corrects itself on the client). On a first visit
-they render their compact layout and adapt once the page is interactive.
+there's no cookie yet: with `@m3ui-vue/m3ui-vue` 1.2.0 or later the server renders for a size standing for the kind of
+device (a phone, a tablet or a desktop, from `Sec-CH-UA-Mobile` and the user agent), and the layout settles on the exact
+one once the page is interactive; before 1.2.0, the compact layout. With `viewportHints`, Chromium sends the exact size
+on a first visit too: the server asks for it (`Accept-CH` / `Critical-CH: Sec-CH-Viewport-Width,
+Sec-CH-Viewport-Height`) and Chromium repeats that first request once with it.
 
 A `seed` default can't be generated before the app loads: on the first visit the page shows the baseline palette
 until it does (later visits use the cached scheme).

package/dist/module.d.mts

@@ -38,6 +38,13 @@ interface ModuleOptions extends Omit<M3UIOptions, 'locale'> {
      * `MListDetail`, `MSupportingPane`) render for the user's screen instead of compact. Default `true`.
      */
     cookies?: boolean;
+    /**
+     * Ask Chromium for the window's exact size with client hints (`Accept-CH` / `Critical-CH: Sec-CH-Viewport-Width,
+     * Sec-CH-Viewport-Height`), so the adaptive layouts render at it even on a first visit. It costs that first
+     * visit one repeated request in Chromium; later visits have the size in a cookie anyway. Without it, a first
+     * visit renders at a size guessed from the kind of device (phone, tablet, desktop). Needs `cookies`. Default `false`.
+     */
+    viewportHints?: boolean;
     /**
      * Inline `themeInitScript()` in `<head>`, so dark mode, the palette and the contrast level the user picked are
      * on the server-rendered page before the first paint. Default `true`.

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.2.4",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -25,12 +25,13 @@ const module$1 = defineNuxtModule({
     composables: { prefix: "M3" },
     css: true,
     cookies: true,
+    viewportHints: false,
     themeScript: true
   },
   async setup(options, nuxt) {
     const logger = useLogger("@m3ui-vue/nuxt");
     const resolver = createResolver(import.meta.url);
-    const { components, composables, css, cookies, themeScript, locale, ...plugin } = options;
+    const { components, composables, css, cookies, viewportHints, themeScript, locale, ...plugin } = options;
     const entry = await resolvePath(LIB, { extensions: [".js", ".mjs"] });
     let api;
     try {
@@ -79,6 +80,7 @@ const module$1 = defineNuxtModule({
         `export const autoLocale = ${auto}`,
         `export const localePresets = ${auto ? `{ ${Object.entries(LOCALE_PRESETS).map(([code, name]) => `${code}: presets.${name}`).join(", ")} }` : "{}"}`,
         `export const cookies = ${JSON.stringify(cookies)}`,
+        `export const viewportHints = ${JSON.stringify(!!viewportHints)}`,
         `export const themeScript = ${JSON.stringify(themeScript)}`
       ].join("\n")
     });
@@ -91,6 +93,7 @@ const module$1 = defineNuxtModule({
         `  export const autoLocale: boolean`,
         `  export const localePresets: Record<string, Partial<import('${LIB}').M3Locale>>`,
         `  export const cookies: boolean`,
+        `  export const viewportHints: boolean`,
         `  export const themeScript: boolean`,
         `}`
       ].join("\n")

package/dist/runtime/plugin.js

@@ -1,18 +1,34 @@
 import { computed } from "vue";
+import * as m3 from "@m3ui-vue/m3ui-vue";
 import { createM3UI, themeInitScript } from "@m3ui-vue/m3ui-vue";
-import { defineNuxtPlugin, useCookie, useHead } from "#app";
-import { autoLocale, cookies, locale, localePresets, options, themeScript } from "#build/m3ui.options.mjs";
+import { defineNuxtPlugin, useCookie, useHead, useRequestEvent, useRequestHeaders, useState } from "#app";
+import { autoLocale, cookies, locale, localePresets, options, themeScript, viewportHints } from "#build/m3ui.options.mjs";
+const fromHeaders = m3.viewportFromHeaders;
+const HINTS = "Sec-CH-Viewport-Width, Sec-CH-Viewport-Height";
 export default defineNuxtPlugin({
   name: "m3ui",
   enforce: "pre",
   setup(nuxtApp) {
     const read = (name) => useCookie(name, { decode: decodeURIComponent, readonly: true }).value;
-    const [width, height] = (read("m3-viewport") ?? "").split("x").map(Number);
+    const viewport = useState("m3ui-viewport", () => {
+      if (import.meta.server && fromHeaders) return fromHeaders(useRequestHeaders()) ?? null;
+      const [width, height] = (read("m3-viewport") ?? "").split("x").map(Number);
+      return width && height ? { width, height } : null;
+    });
+    if (import.meta.server && cookies && viewportHints) {
+      const res = useRequestEvent()?.node.res;
+      if (res && !res.headersSent) {
+        res.setHeader("Accept-CH", HINTS);
+        res.setHeader("Critical-CH", HINTS);
+        const vary = [res.getHeader("Vary")].flat().filter(Boolean).join(", ");
+        res.setHeader("Vary", vary ? `${vary}, ${HINTS}` : HINTS);
+      }
+    }
     const initialState = cookies ? {
       theme: read("m3-theme"),
       palette: read("m3-palette"),
       contrast: read("m3-contrast"),
-      viewport: width && height ? { width, height } : void 0
+      viewport: viewport.value ?? void 0
     } : void 0;
     const appLocale = autoLocale ? computed(() => {
       const i18n = nuxtApp.$i18n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3ui-vue/nuxt",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Nuxt module for m3ui-vue, the Material Design 3 component library for Vue 3 + Tailwind CSS v4",
   "keywords": [
     "nuxt",
@@ -53,7 +53,7 @@
     "@m3ui-vue/m3ui-vue": "^1.1.3"
   },
   "devDependencies": {
-    "@m3ui-vue/m3ui-vue": "^1.1.3",
+    "@m3ui-vue/m3ui-vue": "^1.2.0",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.6.2",
     "@nuxt/test-utils": "^4.3.4",