Skip to content

Commit 6b57217

Browse files
atinuxatinux
committed
chore: update to Nuxt UI v3
1 parent e77d19b commit 6b57217

File tree

9 files changed

+3403
-3240
lines changed

9 files changed

+3403
-3240
lines changed

‎app/app.config.ts‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
export default defineAppConfig({
22
ui: {
3-
primary: 'emerald',
3+
colors: {
4+
primary: 'emerald'
5+
},
46
container: {
5-
constrained: 'max-w-2xl'
7+
base: 'max-w-2xl'
68
},
79
card: {
8-
header: {
9-
base: 'flex flex-wrap items-center justify-between'
10+
slots: {
11+
header: 'flex flex-wrap items-center justify-between'
1012
},
11-
body: {
12-
base: 'space-y-4'
13-
}
14-
},
15-
dropdown: {
16-
width: 'w-full',
17-
popper: {
18-
strategy: 'absolute'
19-
}
13+
body: 'space-y-4'
2014
}
2115
}
2216
})

‎app/app.vue‎

Lines changed: 87 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { DropdownItem } from '#ui/types'
2+
import type { DropdownMenuItem } from '#ui/types'
33
44
const { loggedIn, user, clear } = useUserSession()
55
const colorMode = useColorMode()
@@ -35,108 +35,109 @@ const items = [
3535
[
3636
{
3737
label: 'Logout',
38-
icon: 'i-heroicons-arrow-left-on-rectangle',
39-
click: clear
38+
icon: 'i-lucide-log-out',
39+
onSelect: clear
4040
}
4141
]
42-
] satisfies DropdownItem[][]
42+
] satisfies DropdownMenuItem[][]
4343
</script>
4444

4545
<template>
46-
<UContainer class="min-h-screen flex flex-col my-4">
47-
<div class="mb-2 text-right">
48-
<UButton
49-
square
50-
variant="ghost"
51-
color="black"
52-
:icon="
53-
$colorMode.preference === 'dark' || $colorMode.preference === 'system'
54-
? 'i-heroicons-moon'
55-
: 'i-heroicons-sun'
56-
"
57-
@click="isDarkMode = !isDarkMode"
58-
/>
59-
</div>
60-
61-
<UCard>
62-
<template #header>
63-
<h3 class="text-lg font-semibold leading-6">
64-
<NuxtLink to="/">
65-
Atidone
66-
</NuxtLink>
67-
</h3>
46+
<UApp>
47+
<UContainer class="min-h-screen flex flex-col my-4">
48+
<div class="mb-2 text-right">
6849
<UButton
69-
v-if="!loggedIn"
70-
to="/api/auth/github"
71-
icon="i-simple-icons-github"
72-
label="Login with GitHub"
73-
color="black"
74-
size="xs"
75-
external
50+
square
51+
variant="ghost"
52+
color="neutral"
53+
:icon="
54+
$colorMode.preference === 'dark' || $colorMode.preference === 'system'
55+
? 'i-lucide-moon'
56+
: 'i-lucide-sun'
57+
"
58+
@click="isDarkMode = !isDarkMode"
7659
/>
77-
<div
78-
v-else
79-
class="flex flex-wrap -mx-2 sm:mx-0"
80-
>
81-
<UButton
82-
to="/todos"
83-
icon="i-heroicons-list-bullet"
84-
label="Todos"
85-
:color="$route.path === '/todos' ? 'primary' : 'gray'"
86-
variant="ghost"
87-
/>
60+
</div>
61+
62+
<UCard variant="subtle">
63+
<template #header>
64+
<h3 class="text-lg font-semibold leading-6">
65+
<NuxtLink to="/">
66+
Atidone
67+
</NuxtLink>
68+
</h3>
8869
<UButton
89-
to="/optimistic-todos"
90-
icon="i-heroicons-sparkles"
91-
label="Optimistic Todos"
92-
:color="$route.path === '/optimistic-todos' ? 'primary' : 'gray'"
93-
variant="ghost"
70+
v-if="!loggedIn"
71+
to="/api/auth/github"
72+
icon="i-simple-icons-github"
73+
label="Login with GitHub"
74+
color="neutral"
75+
size="xs"
76+
external
9477
/>
95-
<UDropdown
96-
v-if="user"
97-
:items="items"
78+
<div
79+
v-else
80+
class="flex flex-wrap -mx-2 sm:mx-0"
9881
>
9982
<UButton
100-
color="gray"
83+
to="/todos"
84+
icon="i-lucide-list"
85+
label="Todos"
86+
:color="$route.path === '/todos' ? 'primary' : 'neutral'"
10187
variant="ghost"
102-
trailing-icon="i-heroicons-chevron-down-20-solid"
88+
/>
89+
<UButton
90+
to="/optimistic-todos"
91+
icon="i-lucide-sparkles"
92+
label="Optimistic Todos"
93+
:color="$route.path === '/optimistic-todos' ? 'primary' : 'neutral'"
94+
variant="ghost"
95+
/>
96+
<UDropdownMenu
97+
v-if="user"
98+
:items="items"
10399
>
104-
<UAvatar
105-
:src="`https://github.com/${user.login}.png`"
106-
:alt="user.login"
107-
size="3xs"
108-
/>
109-
{{ user.login }}
110-
</UButton>
111-
</UDropdown>
112-
</div>
113-
</template>
114-
<NuxtPage />
115-
</UCard>
100+
<UButton
101+
color="neutral"
102+
variant="ghost"
103+
trailing-icon="i-lucide-chevron-down"
104+
>
105+
<UAvatar
106+
:src="`https://github.com/${user.login}.png`"
107+
:alt="user.login"
108+
size="3xs"
109+
/>
110+
{{ user.login }}
111+
</UButton>
112+
</UDropdownMenu>
113+
</div>
114+
</template>
115+
<NuxtPage />
116+
</UCard>
116117

117-
<footer class="text-center mt-2">
118-
<NuxtLink
119-
href="https://github.com/atinux/atidone"
120-
target="_blank"
121-
class="text-sm text-gray-500 hover:text-gray-700"
122-
>
123-
GitHub
124-
</NuxtLink>
125-
·
126-
<NuxtLink
127-
href="https://twitter.com/atinux"
128-
target="_blank"
129-
class="text-sm text-gray-500 hover:text-gray-700"
130-
>
131-
Twitter
132-
</NuxtLink>
133-
</footer>
134-
</UContainer>
135-
<UNotifications />
118+
<footer class="text-center mt-2">
119+
<NuxtLink
120+
href="https://github.com/atinux/atidone"
121+
target="_blank"
122+
class="text-sm text-neutral-500 hover:text-neutral-700"
123+
>
124+
GitHub
125+
</NuxtLink>
126+
·
127+
<NuxtLink
128+
href="https://twitter.com/atinux"
129+
target="_blank"
130+
class="text-sm text-neutral-500 hover:text-neutral-700"
131+
>
132+
Twitter
133+
</NuxtLink>
134+
</footer>
135+
</UContainer>
136+
</UApp>
136137
</template>
137138

138139
<style lang="postcss">
139140
body {
140-
@apply font-sans text-gray-950 bg-gray-50 dark:bg-gray-950 dark:text-gray-50;
141+
@apply font-sans text-neutral-950 bg-neutral-50 dark:bg-neutral-950 dark:text-neutral-50;
141142
}
142143
</style>

‎app/assets/main.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "tailwindcss";
2+
@import "@nuxt/ui";
3+
4+
@theme static {
5+
--font-sans: 'Public Sans', sans-serif;
6+
}

‎app/pages/index.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,30 @@
77
A <a
88
href="https://nuxt.com"
99
target="_blank"
10-
class="text-primary-500"
10+
class="text-(--ui-primary)"
1111
rel="noopener"
1212
>Nuxt</a> demo hosted on <a
1313
href="https://pages.cloudflare.com"
1414
target="_blank"
1515
rel="noopener"
16-
class="text-primary-500"
16+
class="text-(--ui-primary)"
1717
>Cloudflare Pages</a> with server-side rendering on the edge and using <NuxtLink
1818
href="https://developers.cloudflare.com/d1/"
1919
target="_blank"
2020
rel="noopener"
21-
class="text-primary-500"
21+
class="text-(--ui-primary)"
2222
>
2323
Cloudflare D1 database
2424
</NuxtLink>.
2525
</p>
2626
<p>
2727
It is made using <a
2828
href="https://hub.nuxt.com"
29-
class="text-primary-500"
29+
class="text-(--ui-primary)"
3030
>NuxtHub</a> for a zero-config development & deployment experience on Cloudflare.
3131
</p>
32-
<hr class="dark:border-gray-700">
33-
<p class="text-sm text-gray-700 dark:text-gray-300 italic">
32+
<USeparator />
33+
<p class="text-sm text-(--ui-text-muted) italic">
3434
No personal information regarding your GitHub account are stored in database.<br>
3535
We store only the todos created linked with your GitHub ID.
3636
</p>

‎app/pages/optimistic-todos.vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ const { mutate: addTodo } = useMutation({
6565
if (todoIndex >= 0) {
6666
queryCache.setQueryData(['todos'], todoList.toSpliced(todoIndex, 1, todo))
6767
}
68-
toast.add({ title: `Todo "${todo.title}" created.` })
6968
},
7069
7170
onSettled() {
@@ -86,11 +85,11 @@ const { mutate: addTodo } = useMutation({
8685
const title = (err as any).data.data.issues
8786
.map((issue: { message: string }) => issue.message)
8887
.join('\n')
89-
toast.add({ title, color: 'red' })
88+
toast.add({ title, color: 'error' })
9089
}
9190
else {
9291
console.error(err)
93-
toast.add({ title: 'Unexpected Error', color: 'red' })
92+
toast.add({ title: 'Unexpected Error', color: 'error' })
9493
}
9594
}
9695
})
@@ -133,17 +132,13 @@ const { mutate: toggleTodo } = useMutation({
133132
}
134133
135134
console.error(err)
136-
toast.add({ title: 'Unexpected Error', color: 'red' })
135+
toast.add({ title: 'Unexpected Error', color: 'error' })
137136
}
138137
})
139138
140139
const { mutate: deleteTodo } = useMutation({
141140
mutation: (todo: Todo) => $fetch(`/api/todos/${todo.id}`, { method: 'DELETE' }),
142141
143-
onSuccess(_result, todo) {
144-
toast.add({ title: `Todo "${todo.title}" deleted.` })
145-
},
146-
147142
onMutate(todo) {
148143
const oldTodos = queryCache.getQueryData<Todo[]>(['todos']) || []
149144
const todoIndex = oldTodos.findIndex(t => t.id === todo.id)
@@ -170,7 +165,7 @@ const { mutate: deleteTodo } = useMutation({
170165
}
171166
172167
console.error(err)
173-
toast.add({ title: 'Unexpected Error', color: 'red' })
168+
toast.add({ title: 'Unexpected Error', color: 'error' })
174169
}
175170
})
176171
</script>
@@ -193,7 +188,7 @@ const { mutate: deleteTodo } = useMutation({
193188

194189
<UButton
195190
type="submit"
196-
icon="i-heroicons-plus-20-solid"
191+
icon="i-lucide-plus"
197192
:disabled="newTodo.trim().length === 0"
198193
/>
199194
</div>
@@ -212,17 +207,17 @@ const { mutate: deleteTodo } = useMutation({
212207
}"
213208
>{{ todo.title }}</span>
214209

215-
<UToggle
210+
<USwitch
216211
:model-value="Boolean(todo.completed)"
217212
:disabled="todo.id < 0"
218213
@update:model-value="toggleTodo(todo)"
219214
/>
220215

221216
<UButton
222-
color="red"
217+
color="error"
223218
variant="soft"
224-
size="2xs"
225-
icon="i-heroicons-x-mark-20-solid"
219+
size="xs"
220+
icon="i-lucide-x"
226221
:disabled="todo.id < 0"
227222
@click="deleteTodo(todo)"
228223
/>

‎app/pages/todos.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const { mutate: deleteTodo } = useMutation({
108108

109109
<UButton
110110
type="submit"
111-
icon="i-heroicons-plus-20-solid"
111+
icon="i-lucide-plus"
112112
:loading="loading"
113113
:disabled="newTodo.trim().length === 0"
114114
/>
@@ -125,16 +125,16 @@ const { mutate: deleteTodo } = useMutation({
125125
:class="[todo.completed ? 'line-through text-gray-500' : '']"
126126
>{{ todo.title }}</span>
127127

128-
<UToggle
128+
<USwitch
129129
:model-value="Boolean(todo.completed)"
130130
@update:model-value="toggleTodo(todo)"
131131
/>
132132

133133
<UButton
134-
color="red"
134+
color="error"
135135
variant="soft"
136-
size="2xs"
137-
icon="i-heroicons-x-mark-20-solid"
136+
size="xs"
137+
icon="i-lucide-x"
138138
@click="deleteTodo(todo)"
139139
/>
140140
</li>

0 commit comments

Comments
 (0)