Vue js how to use route from index.html to docs folder

UPDATE: There are a few issues in your new code:

1. The app site uses Vue 2, which requires VuePress 1.x, but you have VuePress 2.x installed. If you want the docs and app source in the same project root with different NPM dependencies, you'd need something like a monorepo. To otherwise share NPM dependencies, you'll have to upgrade your app project to Vue 3 or downgrade VuePress. For the sake of example, install VuePress 1.x instead:

   npm i -D vuepress@1
   

2. The VuePress port is not configured, so it starts at 8080 (until a free port is found). The docs link in your app is hard-coded to port 3000, so your VuePress should be configured to start there:

   // docs/.vuepress/config.js
   module.exports = {
     port: 3000
   }
   

3. The VuePress base URL is not configured, while your app assumes a base of /docs. Update your VuePress config to set the base URL acccordingly:

   // docs/.vuepress/config.js
   module.exports = {
     base: '/docs/'
   }
   

See GitHub PR

Answer to original question:

VuePress setup

1. Install vuepress in your project:

   $ npm i -D vuepress       # if using @vue/cli@4
   $ npm i -D vuepress@next  # if using @vue/cli@5
   

2. Add NPM scripts for Vuepress:

   // package.json
   {
     "scripts": {
       "docs:build": "vuepress build docs",
       "docs:dev": "vuepress dev docs"
     }
   }
   

3. Create docs/.vuepress/config.js, and export a config object:

   a. dest - Output the docs to your app's build output directory (dist for Vue CLI scaffolded projects).

   b. base - Set the base URL so that it matches the intended destination on the server (e.g., set base URL to docs if deploying docs to https://example.com/docs/).

   c. port - Set the port of the VuePress dev server (we'll configure Vue CLI's dev server to point there later).

   d. themeConfig.nav - Set the top navbar links.

   // docs/.vuepress/config.js
   module.exports = {
     dest: 'dist/docs',
     title: 'My Project Docs',
     base: '/docs/',
     port: 3000,
     themeConfig: {
       nav: [
         {
           text: 'Guide',
           link: '/guide/',
         },
         {
           text: 'Main Project',
           link: 'http://localhost:8080'
         }
       ],
     }
   }
   

4. Add a docs link to your app's navbar (e.g., in App.vue):

   <nav>
     <a href="/docs">Docs</a> 👈
     <router-link to="/">Home</router-link>
     ...
   </nav>
   

5. Create docs/README.md with the following contents:

   # Hello World
   

Building

Build your app before the docs (especially if the app's build command deletes the output directory beforehand, as it does with Vue CLI):

$ npm run build
$ npm run docs:build

Development

If using Vue CLI, configure the dev server to redirect /docs to the VuePress dev server:

1. Configure Vue CLI's devServer.before:

   // vue.config.js
   module.exports = {
     devServer: {
       before: app => {
         // point `/docs` to VuePress dev server, configured above
         app.get('/docs', (req, res) => {
           res.redirect('http://localhost:3000/docs')
         })
       }
     }
   }
   

2. Start the app's server and the docs server:

   $ npm run serve
   $ npm run docs:dev