Is this plugin must be registered globally?

[wwwossai]

i read the docs for vue2, and can't find the locally regisered example, only the globally registered example. so i try it out, and failed. So is this plugin can only be registered globablly, or am i miss something?

i read the issue #1 , it seems related, but i'm using one single version of highlightjs 10.7.2, so i'm not quite clear whether or not this plugin supports locally register.

thanks.

NODE_MODULES

+---@highlightjs
|   \---vue-plugin
|       +---dist
|       \---src
|           \---lib
+---highlight.js
|   +---lib
|   |   \---languages
|   +---scss
|   +---styles
|   \---types

GOOD version (Globally registered）:

<template>
  <div>
    <highlightjs language="javascript" code="var x = 5;" />
  </div>
</template>

<script>
import Vue from 'vue'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/styles/a11y-dark.css'

import hljsVuePlugin from '@highlightjs/vue-plugin'

hljs.registerLanguage('javascript', javascript)
Vue.use(hljsVuePlugin)
export default {
  components: {}
}
</script>

BAD version (Registered in single file component）:

<template>
  <div>
    <highlightjs language="javascript" code="var x = 5;" />
  </div>
</template>

<script>
import Vue from 'vue'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/styles/a11y-dark.css'

import hljsVuePlugin from '@highlightjs/vue-plugin'

hljs.registerLanguage('javascript', javascript)
// Vue.use(hljsVuePlugin)
export default {
  components: { hljsVuePlugin }
}
</script>

errors in chrome console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <highlightjs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TestTarget> at src/views/WebView/SourceCodeViewer.vue
       <TestPage> at src/pages/TestPage.vue
         <App> at src/App.vue
           <Root>

if i give a name，the error message change, but still cannot render the 'var x = 5'

export default {
  components: { 'highlightjs': hljsVuePlugin }
}

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Highlightjs>
       <TestTarget> at src/views/WebView/SourceCodeViewer.vue
         <TestPage> at src/pages/TestPage.vue
           <App> at src/App.vue
             <Root>

[wwwossai]

it seems that the project name 'vue-plugin' already indicate that this is a vue plugin not component, which can only be installed using Vue.use and use global registration, according to the vue.js docs here。

[joshgoebel]

The vue2 version exports component also, though Vue 3 version does not. Perhaps that would work?

export default {
  components: { 'highlightjs': hljsVuePlugin.component }
}

[wwwossai]

@joshgoebel yes it works! thanks for the help~~

[joshgoebel]

@Trinovantes Is there a reason this export was removed from the Vue 3 version?

[Trinovantes]

Just an oversight on my part. It should be fine to export for a local component

[joshgoebel]

Would mind resolving maybe? 🙃