prismjs not working between different routes using vuerouter in vuejs

Question

I've imported prism.js globally in main.js file.
Code block syntax highlighting working fine in Home components, but after routing to another page using vue-router, there is no effect.

in main.js

// Global Import
import 'prismjs/prism.js'
import 'prismjs/components/prism-swift.min.js' // swift lang
import './theme/prism-swift-theme.css'

in my about page component...

<pre><code class="language-swift">
  private func setupSubviews() {
   let value = "Loading code block";
  }
</code></pre> 

Unable to understand what's wrong here. Is there any way I can import node_modules prismjs files globally? I thought keeping main.js will work fine, but it's not adding globally between routes...

Answer 1

Once you install it with npm the best approach is to import it whenever it is used in each component seperately with import Prism from 'prismjs'. Just make sure to use the Prism.highlightAll() method in the component where you're using prism after the DOM is rendered whether in mount() hook or in the updated Vuejs hook using nextTick method to make sure all the DOM is rendered before using prism. So in your case you should use it this way:

import Prism from "prismjs"

updated: function () {
  this.$nextTick(function () {
    Prism.highlightAll();
  })
}

make sure you call highlightAll in yor components seperately and not globaly.