Vue dynamic components - watch for mounted

Question

I'm using Webpack dynamic imports and Vue dynamic components to lazy-load a rather large Vue markdown-parsing component.

Now, I want to add syntax highlighting with Prism.js. I'm currently using the mounted() lifecycle hook of the parent component to install syntax highlighting, but this is only working some of the time, since the syntax highlighting depends on the Markdown component to be loaded first (when I manually execute Prism.highlightAll() from the console after page load, it works every time).

Relevant source code:

<template>
<vue-markdown>
    # Hello
    ```javascript
    import { hello } from "world"
    ```
</vue-markdown>
</template>
<script>
export default {
  components: {
    "vue-markdown": () => import("vue-markdown/src/VueMarkdown"),
  },
  mounted() {
    import("prismjs/themes/prism-tomorrow.css")
      .then(() => import("prismjs").then(p => Prism.highlightAll()))
  }
}
</script>

So how do I wait for a dynamic component to load? I almost want something like this:

<vue-markdown v-on:mounted="syntaxHighlighting()"></vue-markdown>

J Winnie J Winnie · Accepted Answer · 2019-01-09T04:14:03

I solved the problem by creating my own component which extends the VueMarkdown component, but with a mounted() hook that activates syntax highlighting. It looks like this:

<script>
import VueMarkdown from "vue-markdown/src/VueMarkdown"
import "prismjs/themes/prism-tomorrow.css"
import Prism from "prismjs"

export default {
    extends: VueMarkdown,
    mounted() {
        Prism.highlightAll()
    }
}
</script>

Then, I dynamically import this component into the parent component.

Not sure if this is the best solution, though...

Vue dynamic components - watch for mounted

1 Answers