How to change content of VuePress page via Plugin

Question

I am trying to set up a plugin to change the content of a VuePress markdown file on the dev server and production build. According to documentation, I should be able to use the _content and _strippedContent that is available to me with the extendPageData

The following code is what I have set up in a plugin to do this.

module.exports = (options = {}, context) => ({
  extendPageData($page) {
    const {
      _filePath, // file's absolute path
      _computed, // access the client global computed mixins at build time, e.g _computed.$localePath.
      _content, // file's raw content string
      _strippedContent, // file's content string without frontmatter
      key, // page's unique hash key
      frontmatter, // page's frontmatter object
      regularPath, // current page's default link (follow the file hierarchy)
      path, // current page's real link (use regularPath when permalink does not exist)
    } = $page

    $page._content = "replaced"
    $page._strippedContent = "replaced"
  }
})

The best I can tell is that this code should work as it updates the $page._content however it is not showing testing but rather the original content.

I know that I am getting into this code as I can console.log from the file and it shows in the console.

I fear that $page._content is immutable and wonder if there is a way to do this kind of content swapping during dev or build

score 4 · Accepted Answer · answered Aug 12 '19 at 01:58

The information in those page objects is used after the markdown has been compiled and during the Vue component rendering. The content is more there for reference and modifying it won't have the effect you are after.

This tripped me up as well.

All the markdown files are processed for inoformation, but then the actual compilation occurs through webpack. The general flow is:

.md -> markdown-loader -> vue-loader -> ...

My recommendation and what I have done is to create a custom webpack loader to modify the content before it goes through the VuePress markdown loader. I used this approach to run my markdown files through Nunjucks for templating pre-markdown compilation. It's increadibly easy to do this after you figure out the correct approach :) Here is a working approach:

config.js:

chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use(path.resolve(__dirname, './nunjucks'))
        .loader(path.resolve(__dirname, './nunjucks'))
        .end()
},

And then a simple loader can look like this(abridged):

module.exports = function(source) {   
    const rendered = nunjucks.renderString(source, config)
    return rendered
}

This is well explained & works, so it should be the accepted answer IMHO. — Daniel Veihelmann, Sep 16 '19 at 14:48

score 0 · Answer 2 · answered Jul 19 '19 at 12:41

0

I think that You should do this with use of extendMarkdown https://v1.vuepress.vuejs.org/config/#markdown-extendmarkdown.

Try like this

// index.js

module.exports = () => ({
  name: 'vuepress-plugin-foo-bar',
  extendMarkdown: md => {
    const render = md.render;

    md.render = (...args) => {
      // original content
      const html = render.call(md, ...args);

      return 'new content';
    };
  },
});

answered Jul 19 '19 at 12:41

r4fx

652
5
12

While this looks fair, it does unfortunately not work. See Greg's explanation and answer – Daniel Veihelmann Sep 16 '19 at 14:51

score 0 · Answer 3 · answered May 30 '20 at 13:10

You can to modify your .vuepress/config.js. For example, if you want to replace '---my text---' with 'MY TEXT

' (with uppercase, for example) in all yours files markdown, you have to add the next code to .vuepress/config.js, into chainWebpack section where I use a regex expression:

// File: .vuepress/config.js
module.exports = {
...,
chainWebpack: config => {
    // Each loader in the chain applies transformations to the processed resource:
    config.module
      .rule('md')
      .test(/\.md$/)
      .use("string-replace-loader")
      .loader("string-replace-loader")
      .options({
        multiple: [{
            search: '---(.*?)---',
            replace: (match, p1, offset, string, groups) => `<div><p class="myclass">${p1.toUpperCase()}</p></div>`,
            flags: 'ig'
          },
          {
            search: ' ... ',
            replace: (match, p1, p2, ..., pn, offset, string) => ` ... `,
            flags: 'ig'
          }
        ],
      }, )
      .end()

  },
};

I forgot to say that It's neccesary to install string-replace-loader: npm install --save-dev string-replace-loader — Arturo martin romero, May 30 '20 at 14:38

How to change content of VuePress page via Plugin

3 Answers3