- Nuxt UI v3 launch offer ends in: -
- -+ Copyright © {{ new Date().getFullYear() }} +
+ + +{{ description }} diff --git a/docs/app/components/og-image/OgImageDocs.vue b/docs/app/components/og-image/OgImageDocs.vue index a9b25d54eb..e84780109e 100644 --- a/docs/app/components/og-image/OgImageDocs.vue +++ b/docs/app/components/og-image/OgImageDocs.vue @@ -4,10 +4,8 @@ withDefaults(defineProps<{ description: string headline: string framework?: string - module?: string }>(), { - framework: 'nuxt', - module: '' + framework: 'nuxt' }) @@ -54,7 +52,6 @@ withDefaults(defineProps<{
{{ description }}
diff --git a/docs/app/composables/useContentNavigation.ts b/docs/app/composables/useContentNavigation.ts
index 579a2b4041..a1d3be7963 100644
--- a/docs/app/composables/useContentNavigation.ts
+++ b/docs/app/composables/useContentNavigation.ts
@@ -7,19 +7,19 @@ function processNavigationItem(item: ContentNavigationItem, parent?: ContentNavi
return {
...item,
- title: parent?.title && parent.title !== 'Pro' ? parent.title : item.title,
+ title: parent?.title ? parent.title : item.title,
badge: parent?.badge || item.badge,
- class: [item.framework && `${item.framework}-only`, item.module && `${item.module}-only`].filter(Boolean),
+ class: [item.framework && `${item.framework}-only`].filter(Boolean),
children: item.children?.length ? item.children?.flatMap(child => processNavigationItem(child)) : undefined
}
}
function processNavigationItemIcon(item: ContentNavigationItem) {
let icon = item.icon
- if (item.path.startsWith('/components')) {
- icon = item.module === 'ui-pro' ? 'i-lucide-panels-top-left' : 'i-lucide-box'
+ if (item.path.startsWith('/docs/components')) {
+ icon = 'i-lucide-square-code'
}
- if (item.path.startsWith('/composables')) {
+ if (item.path.startsWith('/docs/composables')) {
icon = 'i-lucide-square-function'
}
return {
@@ -29,34 +29,28 @@ function processNavigationItemIcon(item: ContentNavigationItem) {
}
export const useContentNavigation = (navigation: Ref
- {{ category.description }}
-
-
-
-
- {{ category.title }}
-
-
Focused on structure and layout, these responsive components are designed to be the perfect building blocks for your next idea.
-
-
-
-
-
-
**In September, we're launching Nuxt UI v4**: a free, open-source library that unifies Nuxt UI and Nuxt UI Pro, offering 100+ components and a complete free Figma Kit for everyone."
- orientation: horizontal
- button:
- label: Read the announcement
- to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel'
- target: _blank
- color: 'neutral'
- trailingIcon: 'i-lucide-arrow-right'
- ui:
- trailingIcon: 'ms-0'
- devPlan:
- title: Free in development
- description: Try Nuxt UI Pro for free in development, no credit card required. Upgrade when ready to deploy.
- orientation: horizontal
- button:
- label: Get started for Free
- to: '/getting-started/installation/pro/nuxt'
- color: 'neutral'
- variant: 'subtle'
- trailingIcon: 'i-lucide-arrow-right'
- ui:
- trailingIcon: 'ms-0'
- figma:
- title: Figma Kit Pro
- description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.
- orientation: horizontal
- price: $149
- # discount: $119
- billing_period: one-time payment
- billing_cycle: plus local taxes
- terms: Solo & Team licenses available.
- features:
- - 1700+ components & variants from Nuxt UI & UI Pro
- - 'Variables: primary, neutral, fonts, rounded, shadows, etc.'
- - Light & dark mode support
- - 'Templates: Starter, Landing, Docs, SaaS and Dashboard'
- - Auto-layout & responsive ready
- - Tailwind CSS assets & icons included
- - Free [preview available](https://www.figma.com/design/mxXR9binOSLU3rYKZZRPXs/PREVIEW---NuxtUIPro-V3-BETA?m=auto&t=c4598Wr0rZwKPs5M-1)
- - Includes Nuxt UI [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
- button:
- label: Buy Figma Kit
- to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
- color: 'neutral'
- plans:
- - title: Solo
- description: Tailored for indie hackers, freelancers and solo founders.
- price: $249
- # discount: $199
- billing_period: one-time payment
- billing_cycle: plus local taxes
- features:
- - One developer
- - Unlimited projects
- - Access to the GitHub repository
- - Unlimited minor & patch updates
- - Lifetime access
- button:
- label: Buy now
- to: https://nuxt.lemonsqueezy.com/buy/057dacb2-87ba-4dc1-9256-59ee5b3bd394
- - title: Startup
- description: Best suited for small teams, startups and agencies.
- price: $499
- # discount: $399
- billing_period: one-time payment
- billing_cycle: plus local taxes
- features:
- - Up to 5 developers
- - Unlimited projects
- - Access to the GitHub repository
- - Unlimited minor & patch updates
- - Lifetime access
- button:
- label: Buy now
- to: https://nuxt.lemonsqueezy.com/buy/2e042a33-7e76-4dda-bd68-e353c182e571
- highlight: true
- - title: Organization
- description: Ideal for larger teams and organizations.
- price: $999
- # discount: $799
- billing_period: one-time payment
- billing_cycle: plus local taxes
- features:
- - Up to 20 developers
- - Unlimited projects
- - Everything in Startup
- - Prioritized feature requests
- - Unlimited minor & patch updates
- - Lifetime access
- button:
- label: Buy now
- to: https://nuxt.lemonsqueezy.com/buy/2979099c-b7a0-4ba1-90e0-a0d60509b92d
-logos:
- - src: /pro/logos/springfieldclinic.svg
- alt: Springfield Clinic
- - src: /pro/logos/churnkey.svg
- alt: Churnkey
- - src: /pro/logos/bosch.svg
- alt: BOSCH
- - src: /pro/logos/blizzard.svg
- alt: Blizzard
- - src: /pro/logos/bodet.svg
- alt: Bodet
- - src: /pro/logos/win.svg
- alt: WinReality
- - src: /pro/logos/tower.svg
- alt: Tower Research
- - src: /pro/logos/liegeairport.svg
- alt: Liege Airport
- - src: /pro/logos/wuniversity.svg
- alt: University of Washington
- - src: /pro/logos/funda.svg
- alt: Funda
- - src: /pro/logos/exxonmobil.svg
- alt: ExxonMobil
- - src: /pro/logos/mainpost.svg
- alt: Main Post
- - src: /pro/logos/insep.svg
- alt: INSEP
- - src: /pro/logos/applause.svg
- alt: Applause
- - src: /pro/logos/instadapp.svg
- alt: Instadapp
-testimonials:
- title: What people are saying
- description: Nuxt UI Pro is already trusted by 2,000+ users and teams around the world.
- items:
- - quote: "We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform."
- user:
- name: 'Anthony Bettini'
- description: 'CEO and founder of VulnCheck'
- to: 'https://www.linkedin.com/in/anthonybettini/'
- target: _blank
- avatar:
- src: 'https://media.licdn.com/dms/image/v2/C4E03AQEY3pmXsH8hDg/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1519741249442?e=1746057600&v=beta&t=dvQfBT9ah03MPNy9cnly30ugreeCdxG4nrxV3lwKAC8'
- - quote: "Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!"
- user:
- name: 'Yaz Jallad'
- description: 'Founder Ninjaparade Digital'
- to: 'https://x.com/ninjaparade/'
- target: _blank
- avatar:
- src: 'https://pbs.twimg.com/profile_images/1824690890222485504/lQ7v1AGt_400x400.jpg'
- - quote: "Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device."
- user:
- name: 'Kevin Olson'
- description: 'Founder of Fume.app'
- to: 'https://github.com/acidjazz'
- target: _blank
- avatar:
- src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/acidjazz'
- srcset: 'https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/acidjazz 2x'
- - quote: "I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products."
- user:
- name: 'Michael Hoffmann'
- description: 'Senior Frontend Developer'
- to: 'https://mokkapps.de/'
- target: _blank
- avatar:
- src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/mokkapps'
- srcset: 'https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/mokkapps 2x'
- - quote: "Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job."
- user:
- name: 'Harlan Wilton'
- description: 'Nuxt core team member'
- to: 'https://github.com/harlan-zw'
- target: _blank
- avatar:
- src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/harlan-zw'
- srcset: 'https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/harlan-zw 2x'
- - quote: "I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time."
- user:
- name: 'Thomas Sanlis'
- description: 'Founder of Uneed'
- to: 'https://x.com/T_Zahil'
- target: _blank
- avatar:
- src: 'https://pbs.twimg.com/profile_images/1374040164180299791/ACw4G3nZ_400x400.jpg'
- - quote: "Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team."
- user:
- name: 'Benjamin Code'
- description: 'YouTuber and SaaS builder'
- to: 'https://x.com/benjamincode'
- target: _blank
- avatar:
- src: 'https://pbs.twimg.com/profile_images/1607353032420769793/I8qQSUfQ_400x400.jpg'
- - quote: "Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down."
- user:
- name: 'Estéban Soubiran'
- description: 'Software engineer'
- to: 'https://x.com/soubiran_'
- target: _blank
- avatar:
- src: 'https://pbs.twimg.com/profile_images/1801649350319218689/aS_X_iTm_400x400.jpg'
- - quote: "I used to code all my components from scratch, but since I started using Nuxt UI Pro, I just can’t work without it. It has all the components I need: for landing pages, for dashboards and even for blog content! This is a no-brainer investment to ship faster, and I’ve already made my money back 10x in time saved!"
- user:
- name: 'Nico Jeannen'
- description: 'Founder of Ads Template'
- to: 'https://x.com/nico_jeannen'
- target: _blank
- avatar:
- src: 'https://pbs.twimg.com/profile_images/1754025659180187649/AAG78n19_400x400.jpg'
- - quote: "As someone who builds a lot of projects, Nuxt UI Pro has been a game-changer. It's not just about saving time – it's about having components that are thoughtfully designed and just work. The developer experience is exceptional, and I can focus on building features instead of tweaking UI components."
- user:
- name: 'Hugo Richard'
- description: 'Founder of Shelve'
- to: 'https://x.com/hugorcd__'
- target: _blank
- avatar:
- src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/hugorcd'
- srcset: 'https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/hugorcd 2x'
-faq:
- title: Frequently Asked Questions
- description: If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
- items:
- - label: What is the difference between Nuxt UI Pro and Nuxt UI?
- content: Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of Nuxt UI. It includes advanced responsive components ([Header](/components/header), [PageHero](/components/page-hero), [PricingPlan](/components/pricing-plan), [BlogPost](/components/blog-post), etc.) designed ot help you build web applications faster.
- defaultOpen: true
- - label: Do you have a free trial?
- content: We have much better than a free trial, you can use Nuxt UI Pro for free in development mode. Once you are ready to deploy your application, you can purchase a license.
- - label: What do I get with my license?
- content: Once you purchase a license, you will receive a license key to [activate](/pro/activate) by inviting the team members to our private GitHub repository. On top of having access to the source code and private roadmap, the license key will allow you to [build your project to production](/getting-started/license#build) with the `nuxt build` command.
- - label: Can I use Nuxt UI Pro for Open Source projects?
- content: Yes, you can use Nuxt UI Pro for your open source projects as well as your commercial projects as long as you don't sell Nuxt UI Pro as a product and that you don't share your license key.
- - label: What does “Unlimited minor & patch updates” include?
- content: We add new components and improvements to Nuxt UI Pro as we get new ideas and feedback, you will receive these updates for the major version you purchased. :br **Your license key will work forever for the major version.** We may release a major version including more advanced components and features in the future, you will be able to upgrade to this version with a generous discount.
- - label: I purchased Nuxt UI Pro previous versions, do I need to purchase the version 3?
- content: '**The version 3 is a free upgrade**, so the license you bought on previous versions will be valid for v3.'
- - label: What does “lifetime access” means?
- content: Nuxt UI Pro is a one-time purchase, with no recurring subscription. You will have access to all assets of Nuxt UI Pro forever.
- - label: Do you have discounts for students or non-profits?
- content: Yes, we offer a 50% discount for students using Nuxt UI Pro purely for educational purposes. Contact us at ui-pro@nuxt.com with your details and we'll send you a discount code.
- - label: Do you offer technical support?
- content: Once you sign up you get access to our private GitHub repository, where you can ask questions, report bugs or feature requests and get help from other customers. If you require more specialised support or consultancy, contact us at ui-pro@nuxt.com.
- - label: What is your refund policy?
- content: If you are not satisfied with Nuxt UI Pro, let us know within 14 days of your purchase at ui-pro@nuxt.com and we'll refund your money.
diff --git a/docs/app/pages/pro/.content/pro.yml b/docs/app/pages/pro/.content/pro.yml
deleted file mode 100644
index 20bb10c032..0000000000
--- a/docs/app/pages/pro/.content/pro.yml
+++ /dev/null
@@ -1,164 +0,0 @@
-title: Build faster with Nuxt UI Pro.
-description: A collection of premium Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your application.
-hero:
- title: Build faster with Nuxt UI [Pro]{class="text-primary"}.
- description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these [responsive components]{class="text-default"} are designed to be the perfect [building blocks for your next idea]{class="text-default"}.
- links:
- - label: Buy a license
- size: xl
- to: /pro/pricing
- - label: Try for free
- trailing: true
- color: neutral
- variant: outline
- to: /getting-started/installation/pro/nuxt
- size: xl
- trailingIcon: i-lucide-arrow-right
-features:
- title: Create stunning Vue applications faster.
- description: Nuxt UI Pro comes packed with powerful features to help you build modern, performant, accessible and responsive Nuxt applications at record speed. From pre-built UI sections to Figma design kits, every detail is crafted to speed up your development and deliver a polished user experience.
- features:
- - title: 40+ Ready-to-use Sections
- description: Pre-built UI components for landing pages, documentation, blogs, dashboards, and more—ready to use out of the box.
- icon: i-lucide-layout-grid
- - title: Auto Dark Mode
- description: Seamlessly adapts to user preferences with a built-in dark mode switch—no extra configuration needed.
- icon: i-lucide-moon
- - title: Blazing-fast Performance
- description: Optimized for Nuxt 3 with minimal bundle size, lightning-fast rendering, and best practices in performance.
- icon: i-lucide-zap
- - title: SEO & Accessibility Ready
- description: Built with proper semantic HTML, structured data, and accessibility in mind for better rankings and usability.
- icon: i-lucide-search-check
- - title: Fully Customizable UI
- description: Modify colors, fonts, spacing, and layouts with Tailwind CSS and Nuxt UI’s design tokens to match your brand identity.
- icon: i-lucide-settings-2
- - title: Nuxt Content Support
- description: Write content with Markdown and MDC, making it easy to build documentation, blogs, and knowledge bases.
- icon: i-simple-icons-markdown
- - title: Vue-only mode
- description: Enjoy the benefits of Nuxt UI Pro without Nuxt. Integrate it seamlessly into your Vue 3 + Vite projects and build modern UIs with ease.
- icon: i-simple-icons-vuedotjs
- - title: Built-in Internationalization (i18n)
- description: Easily localize your site with built-in support for multiple languages and right-to-left (RTL) layouts.
- icon: i-lucide-globe
- - title: Figma Design Kits
- description: Match your development workflow with Nuxt UI & UI Pro Figma UI kits, ensuring a fast transition from design to code.
- icon: i-simple-icons-figma
-testimonial:
- quote: Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
- user:
- name: Benjamin Code
- description: YouTuber and Founder
- to: https://x.com/benjamincode
- avatar:
- src: https://pbs.twimg.com/profile_images/1607353032420769793/I8qQSUfQ_400x400.jpg
-# authorQuote:
-# quote: Nuxt UI, born from a desire to improve Vue component development, is the go-to library for building modern web interfaces. We aim to provide you with a comprehensive set of tools to create and customize your next UI while maintaining the best developer experience.
-# user:
-# name: Benjamin Canac
-# description: Author of Nuxt UI
-# to: https://github.com/benjamincanac
-# avatar:
-# src: https://github.com/benjamincanac.png
-mainSection:
- title: Meet the [Pro Components]{class="text-primary"}.
- description: Code with 50+ components and sections of Nuxt UI Pro to build your next application by reducing the amount of code you need to write.
-sections:
- - title: The freedom to build anything
- description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
- id: features
- reverse: true
- features:
- - name: Fully customizable
- description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
- icon: i-lucide-pencil-ruler
- - name: Slots for everything
- description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
- icon: i-lucide-code
- - name: Responsive by design
- description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
- icon: i-lucide-layout
- links:
- - label: Explore components
- to: /components
- trailingIcon: i-lucide-arrow-right
- code: |
- ```vue [app.vue]
-
-
-
-
-
-
-
-
--name
` element's `width` and `height` are automatically set based on the `s
### Icon
-Use the `icon` prop to display a fallback [Icon](/components/icon).
+Use the `icon` prop to display a fallback [Icon](/docs/components/icon).
::component-code
---
@@ -105,7 +105,7 @@ props:
### With tooltip
-You can use a [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
+You can use a [Tooltip](/docs/components/tooltip) component to display a tooltip when hovering the Avatar.
:component-example{name="avatar-tooltip-example"}
diff --git a/docs/content/3.components/badge.md b/docs/content/docs/2.components/badge.md
similarity index 88%
rename from docs/content/3.components/badge.md
rename to docs/content/docs/2.components/badge.md
index 96a21dc956..4ac9f667d1 100644
--- a/docs/content/3.components/badge.md
+++ b/docs/content/docs/2.components/badge.md
@@ -4,7 +4,7 @@ category: element
links:
- label: GitHub
icon: i-simple-icons-github
- to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Badge.vue
+ to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Badge.vue
---
## Usage
@@ -71,7 +71,7 @@ slots:
### Icon
-Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.
+Use the `icon` prop to show an [Icon](/docs/components/icon) inside the Badge.
::component-code
---
@@ -99,7 +99,7 @@ slots:
### Avatar
-Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Badge.
+Use the `avatar` prop to show an [Avatar](/docs/components/avatar) inside the Badge.
::component-code
---
diff --git a/docs/content/docs/2.components/banner.md b/docs/content/docs/2.components/banner.md
new file mode 100644
index 0000000000..9751250067
--- /dev/null
+++ b/docs/content/docs/2.components/banner.md
@@ -0,0 +1,225 @@
+---
+title: Banner
+description: 'Display a banner at the top of your website to inform users about important information.'
+category: element
+links:
+ - label: GitHub
+ icon: i-simple-icons-github
+ to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Banner.vue
+---
+
+## Usage
+
+### Title
+
+Use the `title` prop to display a title on the Banner.
+
+::component-code
+---
+prettier: true
+class: '!p-0'
+props:
+ title: 'This is a banner with an important message.'
+---
+::
+
+### Icon
+
+Use the `icon` prop to display an icon on the Banner.
+
+::component-code
+---
+prettier: true
+class: '!p-0'
+ignore:
+ - title
+props:
+ icon: i-lucide-info
+ title: 'This is a banner with an icon.'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the Banner.
+
+::component-code
+---
+prettier: true
+class: '!p-0'
+ignore:
+ - icon
+ - title
+props:
+ color: 'neutral'
+ icon: i-lucide-info
+ title: 'This is a banner with an icon.'
+---
+::
+
+### Close
+
+Use the `close` prop to display a [Button](/docs/components/button) to dismiss the Banner. Defaults to `false`.
+
+::tip
+A `close` event will be emitted when the close button is clicked.
+::
+
+::component-example
+---
+iframe:
+ style: 'height: 48px;'
+overflowHidden: true
+name: 'banner-example'
+---
+#code
+
+```vue
+
+