Using vue-remark instead of transformer-remark

[Akramurridjal Rahman]

For this past week, I've been working on implementing vue-remark for my component style guide. In #5 you mention that you couldn't get vue-remark to work the way you wanted to.

Can you share your problem here?

[Sergio Compean]

Any luck on this?

[Akramurridjal Rahman]

Any luck on this?

I forgot how I successfully implement vue-remark, what I remember Is removing transformer-remark completely and use vue-remark instead. Here's how my gridsome.config.js look:

module.exports = {
plugins: [
    {
      use: "gridsome-plugin-tailwindcss",
      options: {
        tailwindConfig: "./tailwind.config.js",
        purgeConfig: {
          // Prevent purging of prism classes.
          whitelistPatternsChildren: [/token$/],
        },
      },
    },

    {
      use: "@gridsome/plugin-google-analytics",
      options: {
        id: process.env.GA_ID ? process.env.GA_ID : "XX-999999999-9",
      },
    },

    {
      use: "@gridsome/plugin-sitemap",
      options: {},
    },

    {
      use: "@gridsome/vue-remark",
      options: {
        typeName: "Documentation", // Required
        baseDir: "./content/docs", // Where .md files are located
        pathPrefix: "/docs", // Add route prefix. Optional
        template: "./src/templates/MarkdownPage.vue", // Optional
        plugins: ["@gridsome/remark-prismjs"],
      },
    },
  ],
}

Then I change the current MarkdownPage.vue template to adjust with vue-remark by adding <VueRemarkContent class="content" /> Here's my repo to learn more: https://github.com/xerod/lotus

[Sergio Compean]

@xerod Thanks. I did something similar and got it working!