VuePress Sidebar incorrectly rendering

Question

I was looking for a solution to automatic generation of the VuePress sidebar and found this module which was recommended in this tutorial - solution2

I'm trying to get it working as described however the sidebar displays the actual folder path to the html rather than just the name as can be seen below, i've tried a different folder structure, adding and removing MD files but i cannot get the sidebar to display correctly. Would anyone know how I can fix this / what i've done wrong?

Config.js:

const getConfig = require("vuepress-bar"); 
module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around',
    themeConfig: {
      ...getConfig(`${__dirname}/..`)
            }
}

Sidebar result :

Answer 1

I fixed this by adding the correct front matter to my MD files, title and permalink