1
- # Nuxt HTTP Client Hints
1
+ # Nuxt HTTP Client Hints Module
2
2
3
3
[ ![ npm version] [ npm-version-src ]] [ npm-version-href ]
4
4
[ ![ npm downloads] [ npm-downloads-src ]] [ npm-downloads-href ]
5
5
[ ![ License] [ license-src ]] [ license-href ]
6
6
[ ![ Nuxt] [ nuxt-src ]] [ nuxt-href ]
7
7
8
- My new Nuxt module for doing amazing things.
9
-
10
- - [ ✨   ; Release Notes] ( /CHANGELOG.md )
11
- <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
12
- <!-- - [📖 Documentation](https://example.com) -->
8
+ Access and use HTTP Client Hints in your Nuxt application. Detect the client browser and the operating system on your server.
13
9
14
10
## Features
15
11
16
- <!-- Highlight some of the features your module provide here -->
17
- - ⛰   ; Foo
18
- - 🚠   ; Bar
19
- - 🌲   ; Baz
12
+ - 🚀 Browser and Operating System detection: check [ detect-browser-es] ( https://www.npmjs.com/package/detect-browser-es ) for more information.
13
+ - 💥 [ Device Hints] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints ) detection
14
+ - ⚡ [ Network Hints] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints ) detection
15
+ - ✨ [ Critical Hints] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints ) detection
16
+
17
+ ## HTTP Client hints
18
+
19
+ The module includes support for the following HTTP Client hints:
20
+ - [ Device Hints] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints )
21
+ - [ Device-Memory] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Device-Memory )
22
+ - [ Network Hints] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints )
23
+ - [ Save-Data] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data )
24
+ - [ Downlink] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Downlink )
25
+ - [ ECT] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ECT )
26
+ - [ RTT] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/RTT )
27
+ - [ User Agent Hints] ( https://github.com/WICG/ua-client-hints )
28
+ - [ Sec-CH] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH )
29
+ - [ Sec-CH-UA] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA )
30
+ - [ Sec-CH-UA-Mobile] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile )
31
+ - [ Sec-CH-UA-Platform] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform )
32
+ - [ Sec-CH-UA-Arch] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Arch )
33
+ - [ Sec-CH-UA-Model] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Model )
34
+ - [ Sec-CH-UA-Platform-Version] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform-Version )
35
+ - [ Sec-CH-UA-Bitness] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Bitness )
36
+ - [ Critical Client Hints] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints )
37
+ - [ Sec-CH-Width] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Width )
38
+ - [ Sec-CH-DPR] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-DPR )
39
+ - [ Sec-CH-Viewport-Width] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Width )
40
+ - [ Sec-CH-Viewport-Height] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Height )
41
+ - [ Sec-CH-Prefers-Color-Scheme] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme )
42
+ - [ Sec-CH-Prefers-Reduced-Motion] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion )
43
+ - [ Sec-CH-Prefers-Reduced-Transparency] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Transparency )
44
+
45
+ [ ![ WARNING]]
46
+ > The [ HTTP Client hints headers] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints ) listed above are still in draft, and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.
20
47
21
48
## Quick Setup
22
49
23
50
Install the module to your Nuxt application with one command:
24
51
25
52
``` bash
26
- npx nuxi module add my-module
53
+ npx nuxi module add nuxt-http-client-hints
54
+ ```
55
+
56
+ Add your configuration to your Nuxt config file:
57
+
58
+ ``` js
59
+ httpClientHints: {
60
+ // Your configuration here
61
+ }
62
+ ```
63
+
64
+ Add your client and server plugins to your Nuxt application and register the corresponding hooks with your configuration:
65
+
66
+ ``` js
67
+ // my-plugin.client.js
68
+ export default defineNuxtPlugin ((nuxtApp ) => {
69
+ nuxtApp .hook (' http-client-hints:client-hints' , (httpClientHints ) => {
70
+ // Your client logic here
71
+ })
72
+ })
73
+ ```
74
+
75
+ ``` js
76
+ // my-plugin.server.js
77
+ export default defineNuxtPlugin ((nuxtApp ) => {
78
+ nuxtApp .hook (' http-client-hints:ssr-client-hints' , (httpClientHints ) => {
79
+ // Your server logic here
80
+ })
81
+ })
82
+ ```
83
+
84
+ You use the httpClientHints object in your application to access the configuration:
85
+
86
+ ``` html
87
+ <!-- SomeComponent.vue -->
88
+ <template >
89
+ <pre >{{ $httpClientHints }}"</pre >
90
+ </template >
91
+ ```
92
+
93
+ or in your modules:
94
+ ``` js
95
+ // my-module.js
96
+ const clientHints = useNuxtApp ().$httpClientHints
27
97
```
28
98
29
99
That's it! You can now use HTTP Client Hints in your Nuxt app ✨
30
100
101
+ You can check the source code or the [ JSDocs] ( https://www.jsdocs.io/package/nuxt-http-client-hints ) for more information.
31
102
32
103
## Contribution
33
104
@@ -36,40 +107,40 @@ That's it! You can now use HTTP Client Hints in your Nuxt app ✨
36
107
37
108
``` bash
38
109
# Install dependencies
39
- npm install
110
+ pnpm install
40
111
41
112
# Generate type stubs
42
- npm run dev:prepare
113
+ pnpm run dev:prepare
43
114
44
115
# Develop with the playground
45
- npm run dev
116
+ pnpm run dev
46
117
47
118
# Build the playground
48
- npm run dev:build
119
+ pnpm run dev:build
49
120
50
121
# Run ESLint
51
- npm run lint
122
+ pnpm run lint
52
123
53
124
# Run Vitest
54
- npm run test
55
- npm run test:watch
56
-
57
- # Release new version
58
- npm run release
125
+ pnpm run test
126
+ pnpm run test:watch
59
127
```
60
128
61
129
</details >
62
130
63
131
64
- <!-- Badges -->
65
- [ npm-version-src ] : https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
66
- [ npm-version-href ] : https://npmjs.com/package/my-module
132
+ ## License
67
133
68
- [ npm-downloads-src ] : https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
69
- [ npm-downloads-href ] : https://npmjs.com/package/my-module
134
+ [ MIT] ( ./LICENSE ) License © 2024-PRESENT [ Joaquín Sánchez] ( https://github.com/userquin )
135
+
136
+ <!-- Badges -->
70
137
71
- [ license-src ] : https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
72
- [ license-href ] : https://npmjs.com/package/my-module
138
+ [ npm-version-src ] : https://img.shields.io/npm/v/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
139
+ [ npm-version-href ] : https://npmjs.com/package/nuxt-http-client-hints
140
+ [ npm-downloads-src ] : https://img.shields.io/npm/dm/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
141
+ [ npm-downloads-href ] : https://npmjs.com/package/nuxt-http-client-hints
142
+ [ jsdocs-src ] : https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=18181B&colorB=F0DB4F
143
+ [ jsdocs-href ] : https://www.jsdocs.io/package/nuxt-http-client-hints
144
+ [ license-src ] : https://img.shields.io/github/license/userquin/nuxt-http-client-hints.svg?style=flat&colorA=18181B&colorB=F0DB4F
145
+ [ license-href ] : https://github.com/userquin/nuxt-http-client-hints/blob/main/LICENSE
73
146
74
- [ nuxt-src ] : https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
75
- [ nuxt-href ] : https://nuxt.com
0 commit comments