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>