Skip to content

Commit 82e0655

Browse files
HugoRCDbenjamincanac
HugoRCD
and
benjamincanac
authored
feat: migrate to @nuxt/ui-pro and @nuxt/content v3 (#86)
Co-authored-by: Benjamin Canac <[email protected]>
1 parent 37216ab commit 82e0655

38 files changed

+3188
-3278
lines changed

‎app/app.config.ts‎

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,8 @@
11
export default defineAppConfig({
22
ui: {
3-
primary: 'sky',
4-
gray: 'cool',
5-
button: {
6-
rounded: 'rounded-full',
7-
default: {
8-
size: 'md'
9-
}
10-
},
11-
input: {
12-
default: {
13-
size: 'md'
14-
}
15-
},
16-
card: {
17-
rounded: 'rounded-xl'
18-
},
19-
footer: {
20-
top: {
21-
wrapper: 'border-t border-gray-200 dark:border-gray-800',
22-
container: 'py-8 lg:py-16'
23-
},
24-
bottom: {
25-
wrapper: 'border-t border-gray-200 dark:border-gray-800'
26-
}
27-
},
28-
page: {
29-
hero: {
30-
wrapper: 'lg:py-24'
31-
}
3+
colors: {
4+
primary: 'blue',
5+
neutral: 'slate'
326
}
337
}
348
})

‎app/app.vue‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,47 @@ useSeoMeta({
2323
twitterImage: 'https://saas-template.nuxt.dev/social-card.png',
2424
twitterCard: 'summary_large_image'
2525
})
26+
27+
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
28+
transform: data => data.find(item => item.path === '/docs')?.children || []
29+
})
30+
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
31+
server: false
32+
})
33+
34+
const links = [{
35+
label: 'Docs',
36+
icon: 'i-lucide-book',
37+
to: '/docs/getting-started'
38+
}, {
39+
label: 'Pricing',
40+
icon: 'i-lucide-credit-card',
41+
to: '/pricing'
42+
}, {
43+
label: 'Blog',
44+
icon: 'i-lucide-pencil',
45+
to: '/blog'
46+
}]
47+
48+
provide('navigation', navigation)
2649
</script>
2750

2851
<template>
29-
<div>
52+
<UApp>
3053
<NuxtLoadingIndicator />
3154

3255
<NuxtLayout>
3356
<NuxtPage />
3457
</NuxtLayout>
3558

36-
<UNotifications />
37-
</div>
59+
<ClientOnly>
60+
<LazyUContentSearch
61+
:files="files"
62+
shortcut="meta_k"
63+
:navigation="navigation"
64+
:links="links"
65+
:fuse="{ resultLimit: 42 }"
66+
/>
67+
</ClientOnly>
68+
</UApp>
3869
</template>

‎app/assets/css/main.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "tailwindcss";
2+
@import "@nuxt/ui-pro";
3+
4+
@source "../../../content";
5+
6+
@theme {
7+
--font-sans: 'Public Sans', sans-serif;
8+
9+
--color-green-50: #EFFDF5;
10+
--color-green-100: #D9FBE8;
11+
--color-green-200: #B3F5D1;
12+
--color-green-300: #75EDAE;
13+
--color-green-400: #00DC82;
14+
--color-green-500: #00C16A;
15+
--color-green-600: #00A155;
16+
--color-green-700: #007F45;
17+
--color-green-800: #016538;
18+
--color-green-900: #0A5331;
19+
--color-green-950: #052E16;
20+
}
21+
22+
.dark {
23+
--ui-bg: var(--ui-color-neutral-950);
24+
}

‎app/components/AppFooter.vue‎

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
const links = [{
2+
const columns = [{
33
label: 'Resources',
44
children: [{
55
label: 'Help center'
@@ -42,69 +42,66 @@ const loading = ref(false)
4242
function onSubmit() {
4343
loading.value = true
4444
45-
setTimeout(() => {
46-
toast.add({
47-
title: 'Subscribed!',
48-
description: 'You\'ve been subscribed to our newsletter.'
49-
})
50-
51-
loading.value = false
52-
}, 1000)
45+
toast.add({
46+
title: 'Subscribed!',
47+
description: 'You\'ve been subscribed to our newsletter.'
48+
})
5349
}
5450
</script>
5551

5652
<template>
57-
<UFooter>
53+
<USeparator
54+
icon="i-simple-icons-nuxtdotjs"
55+
class="h-px"
56+
/>
57+
<UFooter :ui="{ top: 'border-b border-[var(--ui-border)]' }">
5858
<template #top>
59-
<UFooterColumns :links="links">
60-
<template #right>
61-
<form @submit.prevent="onSubmit">
62-
<UFormGroup
63-
label="Subscribe to our newsletter"
64-
:ui="{ container: 'mt-3' }"
65-
>
66-
<UInput
67-
v-model="email"
68-
type="email"
69-
placeholder="Enter your email"
70-
:ui="{ icon: { trailing: { pointer: '' } } }"
71-
required
72-
size="xl"
73-
autocomplete="off"
74-
class="max-w-sm"
75-
input-class="rounded-full"
59+
<UContainer>
60+
<UFooterColumns :columns="columns">
61+
<template #right>
62+
<form @submit.prevent="onSubmit">
63+
<UFormField
64+
name="email"
65+
label="Subscribe to our newsletter"
66+
size="lg"
7667
>
77-
<template #trailing>
78-
<UButton
79-
type="submit"
80-
size="xs"
81-
color="primary"
82-
:label="loading ? 'Subscribing' : 'Subscribe'"
83-
:loading="loading"
84-
/>
85-
</template>
86-
</UInput>
87-
</UFormGroup>
88-
</form>
89-
</template>
90-
</UFooterColumns>
68+
<UInput
69+
v-model="email"
70+
type="email"
71+
class="w-full"
72+
placeholder="Enter your email"
73+
>
74+
<template #trailing>
75+
<UButton
76+
type="submit"
77+
size="xs"
78+
color="neutral"
79+
label="Subscribe"
80+
/>
81+
</template>
82+
</UInput>
83+
</UFormField>
84+
</form>
85+
</template>
86+
</UFooterColumns>
87+
</UContainer>
9188
</template>
9289

9390
<template #left>
94-
<p class="text-gray-500 dark:text-gray-400 text-sm">
91+
<p class="text-(--ui-text-muted) text-sm">
9592
Copyright © {{ new Date().getFullYear() }}. All rights reserved.
9693
</p>
9794
</template>
9895

9996
<template #right>
100-
<UColorModeButton size="sm" />
97+
<UColorModeButton />
10198

10299
<UButton
103100
to="https://github.com/nuxt-ui-pro/saas"
104101
target="_blank"
105102
icon="i-simple-icons-github"
106103
aria-label="GitHub"
107-
color="gray"
104+
color="neutral"
108105
variant="ghost"
109106
/>
110107
</template>

‎app/components/AppHeader.vue‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,72 @@
11
<script setup lang="ts">
2-
import type { NavItem } from '@nuxt/content'
2+
const route = useRoute()
33
4-
const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
5-
6-
const links = [{
4+
const items = computed(() => [{
75
label: 'Docs',
8-
to: '/docs'
6+
to: '/docs',
7+
active: route.path.startsWith('/docs')
98
}, {
109
label: 'Pricing',
1110
to: '/pricing'
1211
}, {
1312
label: 'Blog',
1413
to: '/blog'
15-
}]
14+
}])
1615
</script>
1716

1817
<template>
19-
<UHeader :links="links">
20-
<template #logo>
21-
Nuxt UI Pro <UBadge
22-
label="SaaS"
23-
variant="subtle"
24-
class="mb-0.5"
25-
/>
18+
<UHeader>
19+
<template #left>
20+
<NuxtLink to="/">
21+
<LogoPro class="w-auto h-6 shrink-0" />
22+
</NuxtLink>
23+
<TemplateMenu />
2624
</template>
2725

26+
<UNavigationMenu
27+
:items="items"
28+
variant="link"
29+
/>
30+
2831
<template #right>
32+
<UColorModeButton />
2933
<UButton
3034
label="Sign in"
31-
color="gray"
35+
color="neutral"
36+
variant="ghost"
3237
to="/login"
3338
/>
3439
<UButton
3540
label="Sign up"
36-
icon="i-heroicons-arrow-right-20-solid"
37-
trailing
38-
color="black"
39-
to="/signup"
41+
color="neutral"
42+
trailing-icon="i-lucide-arrow-right"
4043
class="hidden lg:flex"
44+
to="/signup"
4145
/>
4246
</template>
4347

44-
<template #panel>
45-
<UNavigationTree
46-
:links="mapContentNavigation(navigation)"
47-
default-open
48+
<template #body>
49+
<UNavigationMenu
50+
:items="items"
51+
orientation="vertical"
52+
class="-mx-2.5"
53+
/>
54+
55+
<USeparator class="my-6" />
56+
57+
<UButton
58+
label="Sign in"
59+
color="neutral"
60+
variant="subtle"
61+
to="/login"
62+
block
63+
class="mb-3"
64+
/>
65+
<UButton
66+
label="Sign up"
67+
color="neutral"
68+
to="/signup"
69+
block
4870
/>
4971
</template>
5072
</UHeader>

‎app/components/ImagePlaceholder.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<template>
2-
<div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
3-
<div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10">
2+
<UPageCard
3+
variant="subtle"
4+
>
5+
<div class="relative overflow-hidden rounded-(--ui-radius) border border-dashed border-(--ui-border-accented) opacity-75 px-4 flex items-center justify-center aspect-video">
46
<svg
5-
class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10"
7+
class="absolute inset-0 h-full w-full stroke-(--ui-border-inverted)/10"
68
fill="none"
79
>
810
<defs>
@@ -24,6 +26,8 @@
2426
height="100%"
2527
/>
2628
</svg>
29+
30+
<slot />
2731
</div>
28-
</div>
32+
</UPageCard>
2933
</template>

0 commit comments

Comments
 (0)