As Vue 3 has RC It will be a good idea to add support for Vue 3.

Currently, if we use this package with Vue 3 we are getting error. This is because render function API is changed:
https://v3.vuejs.org/guide/migration/render-function-api.html

Would you mind if I take a stab at it?

I will create a PR if it helps.

Is it possible to prepare an ESM version so I can use this in Vite? I'm not sure why I'm seeing issues like this...

SyntaxError: The requested module '/@fs/Users/lucaban/ghq/github.com/CyCraft/blitzar/node_modules/vue-prism-component/dist/vue-prism-component.common.js?v=d01fabea' does not provide an export named 'default'

Try to use this but don't provide any children

var code = ctx.props.code || ctx.children[0].text;

Fails since there are no children. Probably better to just fall back to '' in this case

How would you use plugins such as https://prismjs.com/plugins/line-numbers/ with this Vue implementation ?

Casual importing + using line-numbers class works initialy, but after model changes, line numbers disappear.

When I'm trying to use the component with language="php", I'm getting the following error:

Error in render: "TypeError: Prism.languages['markup-templating'] is undefined"

Here's what my component looks like:

<template>
  <prism language="php">{{ code }}</prism>
</template>

<script>
import "prismjs";
import "prismjs/components/prism-php";

import Prism from "vue-prism-component";

export default {
  data() {
    return {
      code: "<?= 'Hello world!' ?>"
    };
  },
  components: {
    Prism
  }
};
</script>

I'm not getting any errors with other languages (tried JSON, Bash, Ruby, JavaScript, Python, C#, Java, Go, Scala).

Example of working code:

<template>
  <prism language="ruby">{{ code }}</prism>
</template>

<script>
import "prismjs";
import "prismjs/components/prism-ruby";

import Prism from "vue-prism-component";

export default {
  data() {
    return {
      code: 'puts "Hello world!"'
    };
  },
  components: {
    Prism
  }
};
</script>

Willing to PR if I can help 🙂

Right now, <prism> component always renders blocks, but prism also supports inline highlighting.

Should be simple extension to https://github.com/egoist/vue-prism-component/blob/master/src/index.js to just not wrap the <code> in a <pre> if something like an inline=true prop is present.

How do I use this and add languages that are not included?

I'm trying to showcase this code via prism:

 code: `this.reasons.push({
        id: i,
       name: `Reason-${i}`
      });`

and in template:
<prism language="js">{{ code}}</prism>

When compiling I get an error:

Failed to compile.
./src/components/Reasons/Reason-8.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Reasons/Reason-8.vue?vue&type=script&lang=js&) 58:14
Module parse failed: Unexpected token (58:14)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
    this.reasons.push({
       id: i,
        name: \`Reason-${i}\`
     });
    }

How can I overcome this problem and use template literals with Prism?

Prism is currently implicitly depended on via global.

Can it be declared via "external" so that it's imported at UMD?

Component doesn't re-render after changing props

Hi, Thanks so much for adding support for Vue 3.

I wanted to know how can I use File Highlight plugin using this package.

Awaiting response.

Regards.

For example:

<template>
  <div>
    <prism language="javascript">query {
  post(id: 1) {
    id
    title
    body
  }
}</prism>
</div>
</template>

When I do this, the code is all put on one line.