Using Vuepress within a Laravel project

Question

I'm actually running a Laravel website in which I would like to run a Vuepress documentation section.

Installing Vuepress is quite straightforward thanks to the instructions and so is the development server.

However, when it comes to integrating it as a static site, I'm kind of lost with the interactions with the Laravel.

All my documentation is located in a docs folder located on the root of the my Laravel App.

I managed to set up Vuepress' config.js to build the static site into another folder.

base: '/docs/',
dest:'./public/docs',

Doing the above, exposes the documentation is entirely exposed to the web (in the public folder).

However, what I'm looking for is to integrate it more precisely in Laravel (with the middleware and routes I created).

Answer 1

Method 1

1. Install vuepress in /docs in your laravel directory

2. Configure vuepress with the correct base and dest

/docs/.vuepress/config.js

module.exports = {
  dest: 'public/docs',
  base: 'docs/',
};

3. Enable laravel views to include files from the /public directory

/app/config/view.php

...
'paths' => [
    resource_path('views'),
    base_path('public'), // now blade's @include will also look in /public
],
...

4. Create a laravel route for vuepress that allows .html extension

/routes/web.php

use View;
Route::get('/docs', function() {
  View::addExtension('html', 'php'); // allows .html
  return view('docs.index'); // loads /public/docs/index.html
});

Method 2

Or for more control for assets through Laravel, you can try this tutorial here: https://serversideup.net/vuepress-within-a-laravel-application/

Answer 2

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir docs

# create a markdown file
echo '# Hello VuePress' > docs/README.md

package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

/docs/.vuepress/config.js

module.exports = {
  dest: 'public/docs',
  base: '/docs/',
};

npm run docs:build

/routes/web.php

Route::get('/docs', function() {
    return File::get(public_path() . '/docs/index.html');
});