How to add Vuepress on a Nuxt project in a proper way?

Question

I have my Nuxt app and I'm trying to add Vuepress on it. I did yarn add vuepress@next -D then created the docs folder and a readme.md file in there.

The problem: The project only shows the sidebar and navbar if the .vuepress folder is outside of the docs folder; If it's inside, it won't work - Not respecting the config.js rules.

Also, it's recognising the readme.md from the Nuxt app (outside from docs folder too), not the one inside docs folder.

Can anyone help me with that?

Another question, if this above works, Am I be able to access through localhost:3000/docs instead of localhost:3000 for the Nuxt project and localhost:8080 for the docs?

That's my current folder structure (no sidebar showing - not respecting the config.js inside the .vuepress folder):

docs
  |__.vuepress
  |     |__config.js
  |
  |__guides

The config.js file:

module.exports = {
  title: 'Documentation',
  description: 'Documentation',
  themeConfig: {
    sidebar: 'auto',
    nav: [{
        text: 'Home',
        link: '/'
      },
      {
        text: 'Guides A',
        link: '/guides/apis/'
      },
      {
        text: 'item with subitems',
        items: [{
            text: 'Subitem 01',
            link: '/'
          },
          {
            text: 'SubItem 02',
            link: '/'
          }
        ]
      },
      {
        text: 'External',
        link: 'https://google.com'
      },
    ]
  }
}

Vuepress version 1.0.2

Thanks.

Answer 1

Why you need to use both of these? If you using Nuxt you don't actually need VuePress. Check the official VuePress documentation.

Nuxt

Nuxt is capable of doing what VuePress does, but it is designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.