Group - Masir Documentation

This section allows to group objects. This feature is useful managing large amount of objects.

Learn more on how to customize and structure a Nuxt UI Pro app!

Create

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.

This template relies on a catch-all route but you can achieve the same thing with the document-driven mode.

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: {
    // 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

app.config.ts

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'
    }]
  }
})

app.config.ts

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',
      }]
    }
  }
})

A dedicated interface is provided to edit those configurations on Nuxt Studio.

Introduction

Welcome to Nuxt UI Pro documentation template.

Drivers

This section enables you to manage drivers and assign them to vehicles. The Drivers section helps identify and track individuals operating vehicles. Driver details are visible in the vehicle details panel. Driver information is also included in reports.