Vuepress: Data files and dynamic page generation support

[avishnyakov]

Hey guys, thanks for this amazing project. That fact that it comes with a built-in support for technical documentation is pure gold.

Looking into doco, could not find anything on how to bring custom datasets into VuePress workflow. For example, there is a bunch of YAML/JSON files somewhere in the folder which will later be used to generate some bits of contents or whole pages. There are two scenario here:

• generating content on the page leveraging Vue inside markdown
• generating whole pages dynamically based on incoming data

For example, here is how Middleman handles this. It exposed a global "data" object which can be used within templates.

https://middlemanapp.com/advanced/data-files/

I saw that this.$site and this.$page provides access to page metadata and front matter, but still not sure how to address custom data files access in the right way.

Could you please provide guidance on this? Updating documentation on how to handle these cases would be awesome as well.

[ulivz]

This could be something for the roadmap after we've finalized how the plugin system should work.

[avishnyakov]

@ulivz, sounds good.

Would you like to suggest a light option for making it happen? I am after the first case, accessing data files in the vue templates. Have examples and other files stored separately from the markdown. A few suggestion how to organize stuff will do, such as:

• Put your files in a folder here
• Read them with this code into a variable or whatever
• Use this variable in the templates to render stuff

A high level idea will do, I'll figure out the coding and details.

[avishnyakov]

Folks, I'd really appreciate a few tips here. Looking into storing some data in ".vuepress" folder, a bunch of json/yaml files, then reading and making them available globally across pages and vue components. If you could suggest which way to go and what to read up that is really appreciated.

[falkben]

I'm curious about this too -- what did you decide to do?

[ulivz]

It has been supported at the plugin API, we'll release it ASAP.

[colwilson]

In the meantime, is this what you had in mind?

https://vuepress-examples.netlify.com/demos/local/

[ulivz]

1. Data files is frontmatter, you can access it via this.$page.frontmatter.
2. Dynamic page generation support has been supported at Next

[aaronlippold]

1. Data files is frontmatter, you can access it via this.$page.frontmatter.
2. Dynamic page generation support has been supported at Next

Is there an example of the Dynamic page generation support?

[rufuspollock]

For anyone else looking for this, this is now very much possible thanks to additionalPages API:

https://vuepress.vuejs.org/plugin/option-api.html#additionalpages

e.g. in your config.js you can have stuff like:

const path = require('path')

module.exports = {
  additionalPages: [
    {
     path: '/readme/',
     filePath: path.resolve(__dirname, '../../README.md')
    }
  ]
}

// or ...

module.exports = {
  async additionalPages () {
    // Note that VuePress doesn't have request library built-in
    // you need to install it yourself.
    const rp = require('request-promise')
    const content = await rp('https://raw.githubusercontent.com/vuejs/vuepress/master/CHANGELOG.md')
    return [
      {
        path: '/changelog/',
        content
      }
    ]
  }
}