-
Notifications
You must be signed in to change notification settings - Fork 634
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
- Loading branch information
1 parent
e8c7868
commit 0a8f492
Showing
263 changed files
with
333 additions
and
321 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| <script setup lang="ts"> | ||
| const title = 'Vue Components' | ||
| const description = 'Explore 99+ customizable UI components for Vue and Nuxt built with Tailwind CSS and Reka UI.' | ||
| useSeoMeta({ | ||
| titleTemplate: `%s - Nuxt UI`, | ||
| title, | ||
| description, | ||
| ogTitle: `${title} - Nuxt UI`, | ||
| ogDescription: description | ||
| }) | ||
| defineOgImageComponent('Docs', { | ||
| headline: 'Documentation' | ||
| }) | ||
| const { data: components } = await useAsyncData('components', () => { | ||
| return queryCollection('content') | ||
| .where('path', 'LIKE', '/components/%') | ||
| .where('extension', '=', 'md') | ||
| .select('path', 'title', 'description', 'category', 'module') | ||
| .all() | ||
| }) | ||
| const componentsPerCategory = computed(() => { | ||
| return components.value!.reduce((acc, component) => { | ||
| acc[component.category!] = [...(acc[component.category!] || []), component] | ||
| return acc | ||
| }, {} as Record<string, any[]>) | ||
| }) | ||
| const categories = [{ | ||
| category: 'layout', | ||
| title: 'Layout', | ||
| description: 'Structural components for organizing content, including containers, grids, dividers, and responsive layout systems.' | ||
| }, { | ||
| category: 'form', | ||
| title: 'Form', | ||
| description: 'Interactive form elements including inputs, selects, checkboxes, radio buttons, and advanced form validation components.' | ||
| }, { | ||
| category: 'element', | ||
| title: 'Element', | ||
| description: 'Core UI building blocks like buttons, badges, icons, avatars, and other fundamental interface elements.' | ||
| }, { | ||
| category: 'data', | ||
| title: 'Data', | ||
| description: 'Components for displaying and managing data, including tables, lists, cards, data grids, and visualization elements.' | ||
| }, { | ||
| category: 'navigation', | ||
| title: 'Navigation', | ||
| description: 'Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, and navigation bars.' | ||
| }, { | ||
| category: 'overlay', | ||
| title: 'Overlay', | ||
| description: 'Floating UI elements like modals, dialogs, tooltips, popovers, and other components that overlay the main content.' | ||
| }] | ||
| </script> | ||
|
|
||
| <template> | ||
| <UMain> | ||
| <UPageHero | ||
| description="Build your Vue or Nuxt application faster with Nuxt UI and Nuxt UI Pro components. Powered by Tailwind CSS and Reka UI, delivering responsive and customizable components." | ||
| class="relative" | ||
| orientation="vertical" | ||
| :ui="{ title: 'text-balance' }" | ||
| > | ||
| <template #headline> | ||
| <UButton | ||
| to="https://tailwindcss.com" | ||
| label="Made with Tailwind CSS v4" | ||
| size="md" | ||
| variant="subtle" | ||
| color="neutral" | ||
| icon="i-logos-tailwindcss-icon" | ||
| class="rounded-full" | ||
| /> | ||
| </template> | ||
| <template #title> | ||
| Build beautiful UI with <span class="text-(--ui-primary)">{{ components!.length }}+</span> powerful components | ||
| </template> | ||
| <template #links> | ||
| <UButton | ||
| to="/getting-started/installation/vue" | ||
| label="Start with Vue" | ||
| icon="i-logos-vue" | ||
| color="neutral" | ||
| variant="outline" | ||
| size="xl" | ||
| /> | ||
| <UButton | ||
| to="/getting-started/installation/nuxt" | ||
| label="Start with Nuxt" | ||
| icon="i-logos-nuxt-icon" | ||
| color="neutral" | ||
| variant="outline" | ||
| size="xl" | ||
| /> | ||
| </template> | ||
| <template #top> | ||
| <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" /> | ||
| <StarsBg /> | ||
| </template> | ||
| </UPageHero> | ||
|
|
||
| <UContainer> | ||
| <template v-for="category in categories" :key="category.category"> | ||
| <UPageHeader :title="category.title" :description="category.description" class="mb-8" /> | ||
| <UPageGrid class="xl:grid-cols-4 pb-24"> | ||
| <UPageCard | ||
| v-for="(component, index) in componentsPerCategory[category.category]" | ||
| :key="component.path" | ||
| variant="naked" | ||
| :title="component.title" | ||
| :description="component.description" | ||
| :to="component.path" | ||
| :ui="{ wrapper: 'order-last', container: 'lg:flex' }" | ||
| > | ||
| <template #title> | ||
| <div class="flex items-center gap-1.5"> | ||
| <span>{{ component.title }}</span> | ||
| <UBadge v-if="component.module === 'ui-pro'" label="PRO" size="sm" variant="subtle" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <div class="group rounded-[calc(var(--ui-radius)*1.5)] border border-(--ui-border-muted) overflow-hidden aspect-[16/9]"> | ||
| <UColorModeImage | ||
| :light="`${component.path.replace('/components/', '/components/light/')}.png`" | ||
| :dark="`${component.path.replace('/components/', '/components/dark/')}.png`" | ||
| class="group-hover:scale-105 transition-transform size-full" | ||
| :loading="index >= 4 ? 'lazy' : 'eager'" | ||
| width="640" | ||
| height="360" | ||
| /> | ||
| </div> | ||
| </UPageCard> | ||
| </UPageGrid> | ||
| </template> | ||
| </UContainer> | ||
| </UMain> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.