Usage
This is only a basic example of what you can achieve with Nuxt UI Pro, you can tweak it to match your needs. The template uses several Nuxt modules underneath like @nuxt/content for the content and nuxt-og-image for social previews.
Writing content
You can just start writing .md or .yml files in the content/ directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
App Configuration
In addition to @nuxt/ui-pro configuration through the app.config.ts, this template lets you customize the Header, Footer and the Table of contents components.
Header
app.config.ts
export default defineAppConfig({
header: {
// Show or hide the color mode button
colorMode: true,
// Customize links
links: [{
'aria-label': 'GitHub',
'icon': 'i-simple-icons-github',
'target': '_blank',
'to': 'https://github.com/nuxt-ui-pro/docs'
}],
// Logo configuration
logo: {
alt: '',
// Dark mode
dark: '',
// Light mode
light: ''
},
// Show or hide the search bar
search: true,
title: '',
to: '/'
},
})
Footer
app.config.ts
export default defineAppConfig({
footer: {
// Show or hide the color mode button
colorMode: false,
// Update bottom left credits
credits: `Copyright © ${new Date().getFullYear()}`,
// Customize links
links: [{
'aria-label': 'Nuxt Website',
'icon': 'i-simple-icons-nuxtdotjs',
'target': '_blank',
'to': 'https://nuxt.com'
}, {
'aria-label': 'Nuxt UI on Discord',
'icon': 'i-simple-icons-discord',
'target': '_blank',
'to': 'https://discord.com/invite/ps2h6QT'
}, {
'aria-label': 'Nuxt on X',
'icon': 'i-simple-icons-x',
'target': '_blank',
'to': 'https://x.com/nuxt_js'
}, {
'aria-label': 'Nuxt UI on GitHub',
'icon': 'i-simple-icons-github',
'target': '_blank',
'to': 'https://github.com/nuxt/ui'
}]
},
})
Table of contents
app.config.ts
export default defineAppConfig({
toc: {
// Customize links
bottom: {
// URL of your repository content folder
edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
links: [{
icon: 'i-lucide-star',
label: 'Star on GitHub',
target: '_blank',
to: 'https://github.com/nuxt/ui'
}, {
icon: 'i-lucide-book-open',
label: 'Nuxt UI Pro docs',
target: '_blank',
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt'
}, {
icon: 'i-simple-icons-nuxtdotjs',
label: 'Purchase a license',
target: '_blank',
to: 'https://ui.nuxt.com/pro/purchase'
}],
// Title of the bottom table of contents
title: 'Community'
},
// Title of the main table of contents
title: 'Table of Contents'
}
})
