Vue.js - Prism code is not shown from a computed property

Question

For the purpose of learning Vue, I am trying to create a very simple app that will return highlighted code from the input in real-time. I went through a few Prism tutorials and examples, but can't get this to work. Any help or guidance will be appreciated, as I am just getting started with Vue and I have a feeling that I am mixing something up.

This is HelloWorld.vue :

<template>
  <div>
    <h1>Prism Demo</h1>
    <div id="editor">
      <textarea v-model="message"></textarea>
      <div>{{ highlighteddMessage }}</div>
    </div>
  </div>
</template>

<script>
import Prism from 'vue-prism-component'
export default {
  data() {
    return {
      message: `var myFunction = function() {
    statements
}`
};
  },
      computed: {
        highlighteddMessage: function () {
        return Prism.highlight(this.message, Prism.languages.js);
      }
    }
}
</script>

<style scoped>
...
</style>

And my main.js :

import Vue from 'vue'
import App from './App.vue'

import "prismjs";
import "prismjs/themes/prism-funky.css";
import "prismjs/components/prism-scss.min";
import "prismjs/plugins/autolinker/prism-autolinker.min";
import "prismjs/plugins/autolinker/prism-autolinker.css";
import Prism from "vue-prism-component";
Vue.component("prism", Prism);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

I think the problem is in how I am trying to use Prism in the computed property, but I am unable to fix it. WIll appreciate any hints on correctly using Prism in Vue.

Answer 1

You should add Prism to your components option components:{Prism} and then in the template wrap the code with that component and no need to create a computed property:

  <div>
    <h1>Prism Demo</h1>
    <div id="editor">
      <textarea v-model="message"></textarea>


  <prism language="javascript">{{ message  }}</prism>
    </div>
  </div>
</template>

<script>
import Prism from 'vue-prism-component'
export default {
  data() {
    return {
      message: `var myFunction = function() {
    statements
}`
};
  },
  components:{
     Prism
   }
}
</script>