PageSection
Usage
The PageSection component wraps your content in a Container while maintaining full-width flexibility making it easy to add background colors, images or patterns. It provides a flexible way to display content with an illustration in the default slot.
Beautiful Vue UI components
Use it after a PageHero component:
<template>
<UPageHero />
<UPageSection />
</template>
Title
Use the title prop to set the title of the section.
Beautiful Vue UI components
<template>
<UPageSection title="Beautiful Vue UI components" />
</template>
Description
Use the description prop to set the description of the section.
Beautiful Vue UI components
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
/>
</template>
Headline
Use the headline prop to set the headline of the section.
Beautiful Vue UI components
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
headline="Features"
/>
</template>
Icon
Use the icon prop to set the icon of the section.
Beautiful Vue UI components
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
icon="i-lucide-rocket"
/>
</template>
Features
Use the features prop to display a list of PageFeature under the description as an array of objects with the following properties:
title?: stringdescription?: stringicon?: stringorientation?: 'horizontal' | 'vertical'
You can pass any property from the Link component such as to, target, etc.
Beautiful Vue UI components
<script setup lang="ts">
const features = ref([
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons'
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts'
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode'
}
])
</script>
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
:features="features"
/>
</template>
Links
Use the links prop to display a list of Button under the description.
Beautiful Vue UI components
<script setup lang="ts">
const links = ref([
{
label: 'Get started',
to: '/docs/getting-started',
icon: 'i-lucide-square-play',
color: 'neutral'
},
{
label: 'Explore components',
to: '/docs/components/app',
color: 'neutral',
variant: 'subtle',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
:links="links"
/>
</template>
Orientation
Use the orientation prop to change the orientation with the default slot. Defaults to vertical.
Beautiful Vue UI components
<script setup lang="ts">
const features = ref([
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons'
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts'
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode'
}
])
const links = ref([
{
label: 'Explore components',
to: '/docs/components/app',
color: 'neutral',
variant: 'subtle',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
icon="i-lucide-rocket"
orientation="horizontal"
:features="features"
:links="links"
>
<img
src="https://picsum.photos/704/1294"
width="352"
height="647"
alt="Illustration"
class="w-full rounded-lg"
/>
</UPageSection>
</template>
Reverse
Use the reverse prop to reverse the orientation of the default slot.
Beautiful Vue UI components
<script setup lang="ts">
const features = ref([
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons'
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts'
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode'
}
])
const links = ref([
{
label: 'Explore components',
to: '/docs/components/app',
color: 'neutral',
variant: 'subtle',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<UPageSection
title="Beautiful Vue UI components"
description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
icon="i-lucide-rocket"
orientation="horizontal"
reverse
:features="features"
:links="links"
>
<img
src="https://picsum.photos/704/1294"
width="352"
height="647"
alt="Illustration"
class="w-full rounded-lg"
/>
</UPageSection>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
headline |
The headline displayed above the title. | |
icon |
The icon displayed above the title. | |
title |
| |
description |
| |
links |
Display a list of Button under the description.
| |
features |
Display a list of PageFeature under the description.
| |
orientation |
|
The orientation of the section. |
reverse |
|
Reverse the order of the default slot. |
ui |
|
Slots
| Slot | Type |
|---|---|
top |
|
header |
|
leading |
|
headline |
|
title |
|
description |
|
body |
|
features |
|
footer |
|
links |
|
default |
|
bottom |
|
Theme
export default defineAppConfig({
ui: {
pageSection: {
slots: {
root: 'relative isolate',
container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
wrapper: '',
header: '',
leading: 'flex items-center mb-6',
leadingIcon: 'size-10 shrink-0 text-primary',
headline: 'mb-3',
title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
description: 'text-base sm:text-lg text-muted',
body: 'mt-8',
features: 'grid',
footer: 'mt-8',
links: 'flex flex-wrap gap-x-6 gap-y-3'
},
variants: {
orientation: {
horizontal: {
container: 'lg:grid-cols-2 lg:items-center',
description: 'text-pretty',
features: 'gap-4'
},
vertical: {
container: '',
headline: 'justify-center',
leading: 'justify-center',
title: 'text-center',
description: 'text-center text-balance',
links: 'justify-center',
features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
}
},
reverse: {
true: {
wrapper: 'lg:order-last'
}
},
headline: {
true: {
headline: 'font-semibold text-primary flex items-center gap-1.5'
}
},
title: {
true: {
description: 'mt-6'
}
},
description: {
true: ''
},
body: {
true: ''
}
},
compoundVariants: [
{
orientation: 'vertical',
title: true,
class: {
body: 'mt-16'
}
},
{
orientation: 'vertical',
description: true,
class: {
body: 'mt-16'
}
},
{
orientation: 'vertical',
body: true,
class: {
footer: 'mt-16'
}
}
]
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pageSection: {
slots: {
root: 'relative isolate',
container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
wrapper: '',
header: '',
leading: 'flex items-center mb-6',
leadingIcon: 'size-10 shrink-0 text-primary',
headline: 'mb-3',
title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
description: 'text-base sm:text-lg text-muted',
body: 'mt-8',
features: 'grid',
footer: 'mt-8',
links: 'flex flex-wrap gap-x-6 gap-y-3'
},
variants: {
orientation: {
horizontal: {
container: 'lg:grid-cols-2 lg:items-center',
description: 'text-pretty',
features: 'gap-4'
},
vertical: {
container: '',
headline: 'justify-center',
leading: 'justify-center',
title: 'text-center',
description: 'text-center text-balance',
links: 'justify-center',
features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
}
},
reverse: {
true: {
wrapper: 'lg:order-last'
}
},
headline: {
true: {
headline: 'font-semibold text-primary flex items-center gap-1.5'
}
},
title: {
true: {
description: 'mt-6'
}
},
description: {
true: ''
},
body: {
true: ''
}
},
compoundVariants: [
{
orientation: 'vertical',
title: true,
class: {
body: 'mt-16'
}
},
{
orientation: 'vertical',
description: true,
class: {
body: 'mt-16'
}
},
{
orientation: 'vertical',
body: true,
class: {
footer: 'mt-16'
}
}
]
}
}
})
]
})