Skip to content

Commit abef817

Browse files
johannschopplichjohannschopplich
committed
feat(nuxt)!: upgrade to Nuxt 4
1 parent d681e94 commit abef817

File tree

7 files changed

+139
-15
lines changed

7 files changed

+139
-15
lines changed

‎packages/nuxt/package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@unlazy/nuxt",
33
"type": "module",
44
"version": "0.12.4",
5-
"packageManager": "pnpm@10.12.2",
5+
"packageManager": "pnpm@10.15.1",
66
"description": "Nuxt lazy loading module for placeholder images",
77
"author": "Johann Schopplich <hello@johannschopplich.com>",
88
"license": "MIT",
@@ -39,21 +39,21 @@
3939
],
4040
"scripts": {
4141
"prepack": "nuxt-module-build build",
42-
"dev": "nuxi dev playground",
43-
"dev:build": "nuxi build playground",
44-
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
45-
"test:types": "vue-tsc --noEmit"
42+
"dev": "nuxt dev playground",
43+
"dev:build": "nuxt build playground",
44+
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
45+
"test:types": "vue-tsc -b --noEmit"
4646
},
4747
"dependencies": {
48-
"@nuxt/kit": "^3.17.5",
48+
"@nuxt/kit": "^4.1.1",
4949
"defu": "^6.1.4",
5050
"unlazy": "workspace:*"
5151
},
5252
"devDependencies": {
53-
"@nuxt/module-builder": "^1.0.1",
54-
"@types/node": "^22.15.32",
55-
"@unocss/nuxt": "^66.2.3",
56-
"@unocss/reset": "^66.2.3",
57-
"nuxt": "^3.17.5"
53+
"@nuxt/module-builder": "^1.0.2",
54+
"@types/node": "^24.3.1",
55+
"@unocss/nuxt": "^66.5.1",
56+
"@unocss/reset": "^66.5.1",
57+
"nuxt": "^4.1.1"
5858
}
5959
}

‎packages/nuxt/playground/app/app.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script setup lang="ts">
2+
import { PlaygroundDivider, UnLazyImage } from '#components'
3+
import { ref } from '#imports'
4+
import '@unocss/reset/tailwind.css'
5+
6+
const blurhash = 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH'
7+
const thumbhash = '1QcSHQRnh493V4dIh4eXh1h4kJUI'
8+
const logoUrl = new URL('../../../docs/public/logo.svg', import.meta.url).href
9+
10+
const shouldLoadImage = ref(false)
11+
12+
function loadImage() {
13+
shouldLoadImage.value = true
14+
}
15+
</script>
16+
17+
<template>
18+
<Head>
19+
<Title>@unlazy/nuxt</Title>
20+
<Link rel="icon" :href="logoUrl" type="image/svg+xml" />
21+
</Head>
22+
23+
<main class="mx-auto max-w-prose px-4 py-12 sm:px-6 lg:px-8">
24+
<div class="space-y-12">
25+
<div class="grid grid-cols-2 gap-6">
26+
<div class="space-y-2">
27+
<PlaygroundDivider><strong>SSR</strong>-decoded BlurHash</PlaygroundDivider>
28+
<UnLazyImage
29+
:blurhash="blurhash"
30+
src-set="image-320w.jpg 320w, image-640w.jpg 640w"
31+
width="640"
32+
height="320"
33+
style="aspect-ratio: 1/1;"
34+
/>
35+
<p class="text-sm text-gray-500">
36+
The image above is inlined as a PNG data URI.
37+
</p>
38+
</div>
39+
<div class="space-y-2">
40+
<PlaygroundDivider><strong>Client-side</strong> decoded BlurHash</PlaygroundDivider>
41+
<UnLazyImage
42+
:ssr="false"
43+
:blurhash="blurhash"
44+
src-set="image-320w.jpg 320w, image-640w.jpg 640w"
45+
width="640"
46+
height="320"
47+
style="aspect-ratio: 1/1;"
48+
/>
49+
<p class="text-sm text-gray-500">
50+
The client-side decoded BlurHash will infer the image dimensions from the <code>width</code> and <code>height</code> attributes.
51+
</p>
52+
</div>
53+
</div>
54+
55+
<div class="grid grid-cols-2 gap-6">
56+
<div class="space-y-2">
57+
<PlaygroundDivider><strong>SSR</strong>-decoded ThumbHash</PlaygroundDivider>
58+
<UnLazyImage
59+
:thumbhash="thumbhash"
60+
src="/images/sunrise-evan-wallace.jpg"
61+
width="480"
62+
height="640"
63+
style="aspect-ratio: 3/4;"
64+
/>
65+
<p class="text-sm text-gray-500">
66+
The image above is inlined as a PNG data URI.
67+
</p>
68+
</div>
69+
70+
<div class="space-y-2">
71+
<PlaygroundDivider><strong>Client-side</strong> decoded ThumbHash</PlaygroundDivider>
72+
<UnLazyImage
73+
:ssr="false"
74+
:thumbhash="thumbhash"
75+
src="/images/sunrise-evan-wallace.jpg"
76+
width="480"
77+
height="640"
78+
style="aspect-ratio: 3/4;"
79+
/>
80+
</div>
81+
</div>
82+
83+
<div class="grid grid-cols-2 gap-6">
84+
<div class="space-y-2">
85+
<PlaygroundDivider>Lazy load on click</PlaygroundDivider>
86+
<UnLazyImage
87+
thumbhash="HBkSHYSIeHiPiHh8eJd4eTN0EEQG"
88+
:lazy-load="shouldLoadImage"
89+
src="/images/fall-evan-wallace.jpg"
90+
width="480"
91+
height="640"
92+
style="aspect-ratio: 3/2;"
93+
@click="loadImage"
94+
/>
95+
<p class="text-sm text-gray-500">
96+
Lazy loading will only be triggered when the image is clicked.
97+
</p>
98+
</div>
99+
</div>
100+
</div>
101+
</main>
102+
</template>

‎packages/nuxt/playground/app/components/Playground/Divider.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<div class="relative">
3+
<div class="absolute inset-0 flex items-center" aria-hidden="true">
4+
<div class="w-full border-t border-gray-300" />
5+
</div>
6+
<div class="relative flex justify-start">
7+
<span class="bg-white pr-2 text-sm text-gray-500"><slot /></span>
8+
</div>
9+
</div>
10+
</template>

‎packages/nuxt/playground/nuxt.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const currentDir = fileURLToPath(new URL('.', import.meta.url))
77
export default defineNuxtConfig({
88
modules: ['@unocss/nuxt', '../src/module'],
99

10-
compatibilityDate: '2025-01-01',
10+
compatibilityDate: '2025-09-01',
1111

1212
vite: {
1313
// Custom alias for unlazy until Jiti issue is resolved

‎packages/nuxt/playground/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
{
22
"version": "0.12.4",
3-
"private": true
3+
"private": true,
4+
"scripts": {
5+
"dev": "nuxt dev",
6+
"build": "nuxt build",
7+
"generate": "nuxt generate"
8+
}
9+
410
}

‎packages/nuxt/playground/tsconfig.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
{
2-
"extends": "./.nuxt/tsconfig.json"
2+
"references": [
3+
{ "path": "./.nuxt/tsconfig.app.json" },
4+
{ "path": "./.nuxt/tsconfig.server.json" },
5+
{ "path": "./.nuxt/tsconfig.shared.json" },
6+
{ "path": "./.nuxt/tsconfig.node.json" }
7+
],
8+
"files": []
39
}

‎packages/nuxt/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"extends": "./.nuxt/tsconfig.json",
3-
"include": ["src"]
3+
"include": ["dist", "playground"]
44
}

0 commit comments

Comments
 (0)