Customize the Title

Set up your very own website title in app.config.ts. Simply assign a new value to the string variable title (see below).

export default defineAppConfig({
  exactproDocs: {
    title: 'Exactpro Docs'
  }
})

Header

Logo

Set up your very own logo with an image of your choice in two ways:

1. Place an image named logo.{some-extension} in the assets/theme folder
2. Redefine the vue component components/exactpro-docs/Logo.vue

Background

Set up your very own header background with an image of your choice by placing an image file named header-bg.{some-extension} in the assets/theme folder.

Documentation body

Previous and Next buttons

Each page of the documentation has buttons that allow you to navigate to the previous and next pages. These buttons are placed right after article content.

These cards are customizable in app.config.ts by key exactproDocs.prevNextCards (see below).

export default defineAppConfig({
  exactproDocs: {
    prevNextCards: {
      /**
       * Display options for the description of the page in prev/next cards
       */
      description: {
        /**
         * Choose display type for the description of the page in prev/next cards.
         * 
         * 'full' - display full description
         * 'limited' - display first n lines of description
         * 'hidden' - hide description
         * 
         * @default "full"
         */
        display: 'full',
        /**
         * Limit of lines for the description of the page in prev/next cards
         * It will be used if display type is "limited"
         * 
         * @default 2
         */
        limit: 2
      }
    }
  }
})

Footer

Social Media Links

Set up your very own social media links in app.config.ts. Simply define required options for:

• social.github
• social.facebook
• social.twitter
• social.linkedin
• social.youtube

export default defineAppConfig({
  exactproDocs: {
    social: {
      github: {
        url: 'https://github.com/exactpro', // Custom URL
        customIcon: 'fa6-brands:square-github', // Icon name from https://icones.js.org/
        disabled: false // Hide social media link
      },
      // Other social media links have the same structure
      facebook: {},
      twitter: {},
      linkedin: {},
      youtube: {}
    }
  }
})

Contact us section

Toolkit has the set of default contacts. If you need to use project-specific contacts, specify items with a following syntax to contacts array at app.config.ts file of your docs website:

export default defineAppConfig({
  exactproDocs: {
    contacts: [
      {
        contact: 'info@exactpro.com',
        type: 'email'
      },
      {
        contact: '+4402033191644',
        type: 'phone'
      }
    ]
  }
})

Configuring a base url

This option might be required when hosting your website on GitHub Pages or GitLab Pages.

1. Customize the baseURL in the nuxt.config.ts file.
2. Create the string variable baseURL within the app object and assign a value. In the example below, we have assigned the value /my-project to the baseURL variable.

export default defineNuxtConfig({
  app: {
    baseURL: "/my-project",
    // other config options
  }
})

Read official Nuxt 3 documentation here.

Replacing Favicon

Set up your very own favicon with an image of your choice, by placing an image named favicon.ico into the public directory (public\favicon.ico).

Tailwind Customization

Tailwind CSS has been used customize this template.

Color Palette

A color palette comprising of the 4 main Exactpro corporate colors can be found in the tailwind.config.js file. Each color comes in 10 shades.

The color palette is:

• primary : Navy Blue
• secondary : Danube
• accent : Turquois
• error : Chestnut

You may use tailwind shades to create your own color palettes.