VuePress, markdown, Vue components and generate

Posted on June 28, 2020

Recently I had to mix markdown content with Vue components in a VuePress project to create a static website with the awesomeness of Vue reactivity.

Here a sample of what I'm talking about:

## Some title

Some text

<myVueComp />

Other regular text

the above markdown can be converted in a HTML static file (the SSR thing) preserving the interactivity of a Vue component.

VuePress compiles all that stuff out of the box unless the component needs to access to some browser specifics (such as the window object).

The build function fails in my case because the SSR cannot access the browser and my component requires an exernal components that requires the window object.

The workaround is well documented and this is the slightly modified code that I've used to overcome the limitation:

<template>
    <ClientOnly>
    <myVueComp/>
  </ClientOnly>
</template>

<script>
import Vue from 'vue'
export default {
  mounted () {
    import('./myVueComp.vue').then(module => {
      Vue.component('my-vue-comp', module)
    })
  }
}
</script>