Dublin Library

The Publishing Project

Configuring Vuepress default theme

  • 3 min. read

 

In the last post we discussed the basic setup of a barebones Vuepress site.

This post will cover some basic details of the theme: the navigation menu and the sidebar.

To create the configuration you need to create the directory where Vuepress stores its data. From the root of the site create a .vuepress directory.

mkdir -p /docs/.vuepress/

Inside the .vuepress directory, create a config.js file. The rest of the work will be done in this file.

The first part of the module export declaration defines some basic metadata for the site.

The head array will contain a list of values that we want to put on the head of our final HTML documents.

The evergreen attribute tells Vuepress whether we want to only work with modern evergreen browsers. For this project I've chosen to work with Evergreen browsers as this reduced the amount of work we need to do to support older browsers; the discussion of advantages and disadvantages of doing this is far longer and more detailed than I have space for in this post; maybe a separate post for it makes sense.

module.exports = {
  //Basic Metadata about the site
  title: 'Hello VuePress',
  description: 'Just playing around',
  head: [],
  evergreen: true,

The next and, in my opinion, most important part of the configuration is the theme-related portions of it.

Using the theme attribute we tell Vuepress what theme we want to use. In this case, this is the default theme provided with Vuepress.

themeConfig contains additional configuration. In this case the top navigation (on the right side of the page) and the sidebar.

nav takes an array of objects containing the text and the link for the individual menu items.

sidebar contains an array of paths for the elements we want to put on the sidebar.

  // Theme information and configuration
  theme: '@vuepress/theme-default',
  themeConfig: {
    // Top-right navigation
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'Projects', link: '/projects/' },
      { text: 'Github', link: 'https://github.com' },
    ],
    // Sidebar
    sidebar: [
      '/',
      '/guide/',
      '/projects/'
    ]
  },
}

Vuepress will do a lot of work behind the scenes to display the headers for the documents and create navigation between the documents.

See Vuepress Config Reference for additional configuration and extensibility options.

Edit on Github