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).

Stickpin

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/

Dissolvent

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');
});

Skiver

Little out of my depth here, but it seems the difference between this answer and some of the others, is that you install Vuepress in the Laravel folder, and do not create another install-set (yarn, npm, etc) int the docs folder. This seems a lot cleaner. Not a JS developer/so I am inferring a lot here, but what do the experts say? – Sedimentation

Also, this answer is loosely based upon the Vuepress docs, see here: vuepress.vuejs.org/guide/… – Sedimentation