Skip to content

Commit ab9a83a

Browse files
pascalwengerterlarbish
pascalwengerter
and
larbish
authored
refactor(demo): replace @nuxthq/ui with @nuxt/ui (#409)
Co-authored-by: Baptiste Leproux <[email protected]>
1 parent ccdf4e5 commit ab9a83a

11 files changed

+5732
-6829
lines changed

‎demo/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,15 @@ SUPABASE_KEY="<your_key>"
4747
Start the development server on http://localhost:3000
4848

4949
```bash
50-
npm run dev
50+
pnpm dev
5151
```
5252

5353
## Production
5454

5555
Build the application for production:
5656

5757
```bash
58-
npm run build
58+
pnpm build
5959
```
6060

6161
Checkout the [deployment documentation](https://nuxt.com/deploy).

‎demo/app.config.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default defineAppConfig({
2+
ui: {
3+
primary: 'green',
4+
},
5+
})

‎demo/components/AppContainer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="min-h-screen u-bg-black">
2+
<div class="min-h-screen">
33
<slot />
44
</div>
55
</template>

‎demo/components/AppHeader.vue

+8-5
Original file line numberDiff line numberDiff line change
@@ -22,29 +22,32 @@ const logout = async () => {
2222
<div class="hidden md:block">
2323
<UButton
2424
label="Source"
25-
variant="transparent"
25+
variant="link"
26+
color="gray"
2627
target="_blank"
2728
to="https://github.com/nuxt-modules/supabase/tree/main/demo"
2829
icon="i-heroicons-outline-external-link"
2930
/>
3031
<UButton
3132
label="Hosted on Netlify"
32-
variant="transparent"
33+
variant="link"
34+
color="gray"
3335
target="_blank"
3436
to="https://netlify.com"
3537
icon="i-heroicons-outline-external-link"
3638
/>
3739
</div>
3840
<div class="flex items-center">
3941
<UButton
40-
variant="transparent"
42+
variant="link"
43+
color="gray"
4144
:icon="colorModeIcon"
4245
@click="toggleDark"
4346
/>
4447
<UButton
4548
v-if="user"
46-
class="u-text-white"
47-
variant="transparent"
49+
variant="link"
50+
color="gray"
4851
@click="logout"
4952
>
5053
Logout

‎demo/components/LoginCard.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<div class="sm:mx-auto sm:w-full sm:max-w-md">
3-
<div class="u-bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
3+
<div class="py-8 px-4 shadow sm:rounded-lg sm:px-10">
44
<div>
55
<div class="relative">
66
<div class="absolute inset-0 flex items-center">
77
<div class="w-full border-t border-gray-300" />
88
</div>
99
<div class="relative flex justify-center text-sm">
10-
<span class="px-2 u-bg-white text-gray-500"> Connect with </span>
10+
<span class="px-2 text-gray-500 bg-white dark:bg-stone-900"> Connect with </span>
1111
</div>
1212
</div>
1313
<slot />

‎demo/nuxt.config.ts

+6-10
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,22 @@ export default defineNuxtConfig({
22
modules: [
33
// https://github.com/nuxt-modules/supabase
44
'@nuxtjs/supabase',
5-
// UI lib (will be soon open sourced)
6-
'@nuxthq/ui',
7-
// https://github.com/nuxt-modules/color-mode
8-
'@nuxtjs/color-mode',
5+
// https://github.com/nuxt/ui
6+
'@nuxt/ui',
97
],
8+
109
runtimeConfig: {
1110
public: {
1211
baseUrl: process.env.BASE_URL || 'http://localhost:3000',
1312
},
1413
},
15-
ui: {
16-
colors: {
17-
primary: 'green',
18-
},
19-
icons: ['mdi', 'heroicons', 'heroicons-outline'],
20-
},
14+
2115
supabase: {
2216
redirectOptions: {
2317
login: '/',
2418
callback: '/confirm',
2519
},
2620
},
21+
22+
compatibilityDate: '2024-09-01',
2723
})

‎demo/package.json

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"engines": {
4-
"node": ">=20.10.0"
4+
"node": ">=20.9.0"
55
},
66
"scripts": {
77
"dev": "nuxi dev",
@@ -11,16 +11,15 @@
1111
"lint:fix": "eslint . --fix"
1212
},
1313
"devDependencies": {
14-
"@iconify-json/heroicons": "^1.1.20",
15-
"@iconify-json/heroicons-outline": "^1.1.10",
16-
"@iconify-json/mdi": "^1.1.66",
17-
"@nuxthq/ui": "^1.2.10",
18-
"@nuxtjs/color-mode": "^3.4.0",
19-
"@nuxtjs/supabase": "^1.2.0",
20-
"nuxt": "^3.11.2",
21-
"typescript": "^5.4.5"
14+
"@iconify-json/heroicons": "^1.2.0",
15+
"@iconify-json/heroicons-outline": "^1.2.0",
16+
"@iconify-json/mdi": "^1.2.0",
17+
"@nuxt/ui": "2.18.4",
18+
"@nuxtjs/supabase": "^1.4.0",
19+
"nuxt": "^3.13.1",
20+
"typescript": "^5.5.4"
2221
},
2322
"resolutions": {
24-
"consola": "^3.0.0"
23+
"@nuxt/icon": "^1.5.1"
2524
}
2625
}

‎demo/pages/confirm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ watch(user, () => {
1010

1111
<template>
1212
<div>
13-
<p class="u-text-black">
13+
<p>
1414
Redirecting...
1515
</p>
1616
</div>

‎demo/pages/index.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ watchEffect(() => {
1313

1414
<template>
1515
<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
16-
<h2 class="my-6 text-center text-3xl font-extrabold u-text-white">
16+
<h2 class="my-6 text-center text-3xl font-extrabold">
1717
Sign in to your account
1818
</h2>
1919
<LoginCard>
@@ -22,7 +22,8 @@ watchEffect(() => {
2222
icon="i-mdi-github"
2323
block
2424
label="Github"
25-
variant="black"
25+
color="gray"
26+
variant="solid"
2627
@click="auth.signInWithOAuth({ provider: 'github', options: { redirectTo } })"
2728
/>
2829
</LoginCard>

‎demo/pages/tasks.vue

+26-23
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const fetchTasksFromServerRoute = async () => {
5353

5454
<template>
5555
<div class="w-full my-[50px]">
56-
<h1 class="mb-12 text-6xl font-bold u-text-white">
56+
<h1 class="mb-12 text-6xl font-bold">
5757
Todo List.
5858
</h1>
5959
<form
@@ -65,7 +65,7 @@ const fetchTasksFromServerRoute = async () => {
6565
:loading="loading"
6666
class="w-full"
6767
size="xl"
68-
variant="white"
68+
variant="outline"
6969
type="text"
7070
name="newTask"
7171
placeholder="Make a coffee"
@@ -74,14 +74,14 @@ const fetchTasksFromServerRoute = async () => {
7474
/>
7575
<UButton
7676
type="submit"
77-
variant="white"
77+
variant="outline"
7878
>
7979
Add
8080
</UButton>
8181
</form>
8282
<UCard
8383
v-if="tasks?.length > 0"
84-
body-class="px-6 py-2 overflow-hidden"
84+
class="px-6 py-2 overflow-hidden"
8585
>
8686
<ul>
8787
<li
@@ -94,7 +94,7 @@ const fetchTasksFromServerRoute = async () => {
9494
:label-class="`block font-medium ${task.completed ? 'line-through u-text-gray-500' : 'u-text-gray-700'}`"
9595
:label="task.title"
9696
:name="String(task.id)"
97-
wrapper-class="flex items-center justify-between w-full"
97+
class="flex items-center justify-between w-full"
9898
>
9999
<div class="flex items-center justify-between">
100100
<div @click="completeTask(task)">
@@ -108,7 +108,8 @@ const fetchTasksFromServerRoute = async () => {
108108
<UButton
109109
class="ml-3 text-red-600"
110110
size="sm"
111-
variant="transparent"
111+
color="red"
112+
variant="ghost"
112113
icon="i-heroicons-outline-trash"
113114
@click="removeTask(task)"
114115
/>
@@ -124,23 +125,25 @@ const fetchTasksFromServerRoute = async () => {
124125
@click="fetchTasksFromServerRoute"
125126
/>
126127
<UModal v-model="isModalOpen">
127-
<h2 class="mb-4">
128-
Tasks fetched from
129-
<a
130-
href="https://nuxt.com/docs/guide/directory-structure/server"
131-
target="_blank"
132-
class="text-primary-500 underline"
133-
>Nuxt Server route</a>
134-
with the use of the
135-
<a
136-
href="https://supabase.nuxtjs.org/usage/services/server-supabase-client"
137-
target="_blank"
138-
class="text-primary-500 underline"
139-
>serverSupabaseClient</a>:
140-
</h2>
141-
<pre>
142-
{{ tasksFromServer }}
143-
</pre>
128+
<UCard>
129+
<h2 class="mb-4">
130+
Tasks fetched from
131+
<a
132+
href="https://nuxt.com/docs/guide/directory-structure/server"
133+
target="_blank"
134+
class="text-primary-500 underline"
135+
>Nuxt Server route</a>
136+
with the use of the
137+
<a
138+
href="https://supabase.nuxtjs.org/usage/services/serversupabaseclient"
139+
target="_blank"
140+
class="text-primary-500 underline"
141+
>serverSupabaseClient</a>:
142+
</h2>
143+
<pre>
144+
{{ tasksFromServer }}
145+
</pre>
146+
</UCard>
144147
</UModal>
145148
</div>
146149
</template>

0 commit comments

Comments
 (0)