feat: use http-client-hints

package.json

@@ -17,7 +17,7 @@
     "Device Client Hints",
     "Network Client Hints",
     "Browser detection",
-    "nuxt module"
+    "Nuxt module"
   ],
   "sideEffects": false,
   "exports": {

playground/app.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const critical = useNuxtApp().$httpClientHints?.critical
 console.log(critical?.devicePixelRatio)
 </script>

playground/nuxt.config.ts

@@ -1,3 +1,5 @@
+import DevImage from './server/dev-image'
+
 export default defineNuxtConfig({
   compatibilityDate: '2024-10-11',
   devtools: { enabled: true },
@@ -14,6 +16,20 @@ export default defineNuxtConfig({
       viewportSize: true,
       prefersColorScheme: true,
     },
+    serverImages: true,
+  },
+
+  nitro: {
+    handlers: [
+      {
+        middleware: true,
+        handler: '~/server/image',
+      },
+    ],
+    devHandlers: [{
+      route: '',
+      handler: DevImage,
+    }],
   },
 
 })

playground/package.json

@@ -8,6 +8,11 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "nuxt": "^3.13.2"
+    "nuxt": "^3.13.2",
+    "nuxt-http-client-hints": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vue-tsc": "^2.1.6"
   }
 }

playground/plugins/hints.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin({
+  setup(nuxt) {
+    nuxt.hook('http-client-hints:client-hints', (ssrClientHints) => {
+      console.log('http-client-hints:client-hints', ssrClientHints)
+    })
+  },
+})

playground/plugins/plugin.server.ts → playground/plugins/hints.server.ts

@@ -1,7 +1,7 @@
 export default defineNuxtPlugin({
   setup(nuxt) {
     nuxt.hook('http-client-hints:ssr-client-hints', (ssrClientHints) => {
-      console.log(ssrClientHints)
+      console.log('http-client-hints:ssr-client-hints', ssrClientHints)
     })
   },
 })

playground/server/dev-image.ts

@@ -0,0 +1,7 @@
+import { eventHandler } from 'h3'
+
+export default eventHandler(async (event) => {
+  console.log('eventHandler:', event.path)
+  console.log('eventHandler:', event.context.httpClientHintsOptions)
+  console.log('eventHandler:', event.context.httpClientHints)
+})

playground/server/image.ts

@@ -0,0 +1,5 @@
+export default eventHandler(async (event) => {
+  console.log('eventHandler:', event.path)
+  console.log('eventHandler:', event.context.httpClientHintsOptions)
+  console.log('eventHandler:', event.context.httpClientHints)
+})