Usage
Learn how to write and customize your documentation.
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, @nuxtjs/fontaine
and @nuxtjs/google-fonts
to change the font 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
export default defineAppConfig({
header: {
// Logo configuration
logo: {
// Light mode
light: {
src: '',
alt: '',
class: ''
},
// Dark mode
dark: {
src: '',
alt: '',
class: ''
}
},
// Show or hide the search bar
search: true,
// Show or hide the color mode button
colorMode: true,
// Customize links
links: [{
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt-ui-pro/docs',
target: '_blank',
'aria-label': 'Docs template on GitHub'
}]
}
})
Footer
export default defineAppConfig({
footer: {
// Update bottom left credits
credits: 'Copyright © 2023',
// Show or hide the color mode button
colorMode: false,
// Customize links
links: [{
icon: 'i-simple-icons-nuxtdotjs',
to: 'https://nuxt.com',
target: '_blank',
'aria-label': 'Nuxt Website'
}, {
icon: 'i-simple-icons-discord',
to: 'https://discord.com/invite/ps2h6QT',
target: '_blank',
'aria-label': 'Nuxt UI on Discord'
}, {
icon: 'i-simple-icons-x',
to: 'https://x.com/nuxt_js',
target: '_blank',
'aria-label': 'Nuxt on X'
}, {
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank',
'aria-label': 'Nuxt UI on GitHub'
}]
}
})
Table of contents
export default defineAppConfig({
toc: {
// Title of the main table of contents
title: 'Table of Contents',
// Bottom TOC configuration
bottom: {
// Title of the bottom table of contents
title: 'Community',
// URL of your repository content folder
edit: '',
// Customize links
links: [{
icon: 'i-heroicons-star',
label: 'Star on GitHub',
to: 'https://github.com/nuxt/ui',
target: '_blank',
}, {
icon: 'i-heroicons-book-open',
label: 'Nuxt UI Pro docs',
to: 'https://ui.nuxt.com/pro/guide',
target: '_blank',
}, {
icon: 'i-simple-icons-nuxtdotjs',
label: 'Purchase a license',
to: 'https://ui.nuxt.com/pro/purchase',
target: '_blank',
}]
}
}
})