{"id":13846155,"url":"https://github.com/highlightjs/vue-plugin","last_synced_at":"2025-08-16T11:39:05.832Z","repository":{"id":39800883,"uuid":"350499090","full_name":"highlightjs/vue-plugin","owner":"highlightjs","description":"Highlight.js Vue Plugin","archived":false,"fork":false,"pushed_at":"2024-11-24T04:36:05.000Z","size":37,"stargazers_count":221,"open_issues_count":15,"forks_count":28,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-04T02:05:53.245Z","etag":null,"topics":["highlight","vue-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/highlightjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-22T21:48:27.000Z","updated_at":"2025-04-02T17:56:00.000Z","dependencies_parsed_at":"2024-01-30T00:02:45.655Z","dependency_job_id":"96f84d1a-153a-4224-b8fe-641a2f9f2687","html_url":"https://github.com/highlightjs/vue-plugin","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highlightjs%2Fvue-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highlightjs%2Fvue-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highlightjs%2Fvue-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highlightjs%2Fvue-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/highlightjs","download_url":"https://codeload.github.com/highlightjs/vue-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248636921,"owners_count":21137527,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlight","vue-plugin"],"created_at":"2024-08-04T17:04:31.582Z","updated_at":"2025-04-12T21:34:07.883Z","avatar_url":"https://github.com/highlightjs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Highlight.js plugin for Vue.js\n\n[![latest version](https://badgen.net/npm/v/@highlightjs/vue-plugin/latest?label=latest)](https://www.npmjs.com/package/@highlightjs/vue-plugin)\n[![latest version](https://badgen.net/npm/v/@highlightjs/vue-plugin/next?label=next)](https://www.npmjs.com/package/@highlightjs/vue-plugin)\n![vue 3](https://badgen.net/badge/vue/3/green)\n![vue 2](https://badgen.net/badge/vue/2/green)\n[![license](https://badgen.net/github/license/highlightjs/vue-plugin?color=cyan)](https://github.com/highlightjs/vue-plugin/blob/main/LICENSE)\n\n[![publish size](https://badgen.net/packagephobia/publish/@highlightjs/vue-plugin?label=size)](https://packagephobia.com/result?p=@highlightjs/vue-plugin)\n[![gzipped size](https://badgen.net/bundlephobia/minzip/@highlightjs/vue-plugin?label=gzipped)](https://bundlephobia.com/result?p=@highlightjs/vue-plugin)\n[![slack](https://badgen.net/badge/icon/slack?icon=slack\u0026label\u0026color=pink)](https://join.slack.com/t/highlightjs/shared_invite/zt-mj0utgqp-TNFf4VQICnDnPg4zMHChFw)\n\n\nThis plugin provides a `highlightjs` component for use in your Vue.js 3 applications:\n\n```html\n\u003cdiv id=\"app\"\u003e\n    \u003c!-- bind to a data property named `code` --\u003e\n    \u003chighlightjs autodetect :code=\"code\" /\u003e\n    \u003c!-- or literal code works as well --\u003e\n    \u003chighlightjs language='javascript' code=\"var x = 5;\" /\u003e\n\u003c/div\u003e\n```\n\nNote: For Vue.js version 2 support see the [1-stable](https://github.com/highlightjs/vue-plugin/tree/1-stable) branch here on GitHub.  Version 1.x.x is compatible with Vue.js v2; version 2.x.x with Vue.js v3.\n\n## Installation\n\n```shell\nnpm add @highlightjs/vue-plugin\n```\n\n## Using ES6 modules / bundling\n\nAs a [Vue Plugin](https://vuejs.org/guide/reusability/plugins.html):\n\n```js\nimport 'highlight.js/styles/stackoverflow-light.css'\nimport hljs from 'highlight.js/lib/core';\nimport javascript from 'highlight.js/lib/languages/javascript';\nimport hljsVuePlugin from \"@highlightjs/vue-plugin\";\n\nhljs.registerLanguage('javascript', javascript);\n\nconst app = createApp(App)\napp.use(hljsVuePlugin)\napp.mount('#app')\n```\n\nNote: The plugin imports `highlight.js/lib/core` internally (but no languages).  Thanks to the magic of ES6 modules you can import Highlight.js anywhere to register languages or configure the library.  Any import of Highlight.js refers to the same singleton instance of the library, so configuring the library anywhere configures it everywhere.\n\nYou can also simply load all \"common\" languages at once (as of v11):\n\n```js\nimport 'highlight.js/styles/stackoverflow-light.css'\nimport 'highlight.js/lib/common';\nimport hljsVuePlugin from \"@highlightjs/vue-plugin\";\n\nconst app = createApp(App)\napp.use(hljsVuePlugin)\napp.mount('#app')\n```\n\nNote that the `highlight.js/lib/common` import does not import the `hljs` object because it registers common languages internally and modern web bundlers like `webpack` will optimize out unused imported names. If you want to customize the `hljs` object, you can import it like the [previous example](#using-es6-modules--bundling).\n\n## Using component locally\n\nThe component can also be imported locally.  However, you still have to import the css styles somewhere.\n\n```vue\n\u003ctemplate\u003e\n    \u003chighlightjs\n        language=\"js\"\n        code=\"console.log('Hello World');\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport 'highlight.js/lib/common';\nimport hljsVuePlugin from \"@highlightjs/vue-plugin\";\n\nexport default {\n    components: {\n        highlightjs: hljsVuePlugin.component\n    }\n}\n\u003c/script\u003e\n```\n\n## Using the pre-built libraries\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/path/to/styles/default.css\"\u003e\n\u003cscript src=\"/path/to/highlight.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/highlight-vue.min.js\"\u003e\u003c/script\u003e\n```\n\nThen simply register the plugin with Vue:\n\n```js\nconst app = createApp(App)\napp.use(hljsVuePlugin)\n```\n\n## Building the pre-built library from source\n\nWe use rollup to build the `dist` distributable.\n\n```\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhighlightjs%2Fvue-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhighlightjs%2Fvue-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhighlightjs%2Fvue-plugin/lists"}