{"id":15909,"library":"vue-katex","title":"Vue KaTeX Plugin","description":"vue-katex is a lightweight Vue plugin designed to integrate KaTeX, a fast math typesetting library, into Vue applications. The current stable version is 0.5.0, which notably adds support for KaTeX 0.12.0. The project's release cadence appears to be driven by updates to its peer dependency, KaTeX, ensuring compatibility with newer versions of the typesetting library. Key differentiators include its dual approach to usage, offering both a `v-katex` directive for inline or display-mode rendering and a `` component for more structured integration. It also supports KaTeX's auto-render functionality, simplifying the display of math expressions embedded directly in HTML. This package streamlines the process of rendering complex mathematical formulas within Vue ecosystems.","status":"maintenance","version":"0.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/lucpotage/vue-katex","tags":["javascript","Vue","KaTeX"],"install":[{"cmd":"npm install vue-katex","lang":"bash","label":"npm"},{"cmd":"yarn add vue-katex","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-katex","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by the Vue plugin.","package":"vue","optional":false},{"reason":"Peer dependency providing the core math typesetting functionality.","package":"katex","optional":false}],"imports":[{"note":"Essential peer dependency for initializing the Vue plugin.","wrong":"const Vue = require('vue')","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"The main plugin is a default export and is registered with `Vue.use()`.","wrong":"import { VueKatex } from 'vue-katex'","symbol":"VueKatex","correct":"import VueKatex from 'vue-katex'"},{"note":"Crucial stylesheet for correct KaTeX rendering; must be imported separately.","wrong":"require('katex/dist/katex.min.css')","symbol":"katex.min.css","correct":"import 'katex/dist/katex.min.css'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueKatex from 'vue-katex';\nimport 'katex/dist/katex.min.css';\n\nVue.use(VueKatex, {\n globalOptions: {\n displayMode: true, // Default to display mode globally\n throwOnError: false,\n errorColor: '#FF0000'\n }\n});\n\nnew Vue({\n el: '#app',\n data: {\n inlineMath: '\\\\frac{a_i}{1+x^2}',\n displayMath: '\\\\int_0^1 x^2 dx = \\\\frac{1}{3}',\n autoRenderContent: 'The quadratic formula is \\\\(x = \\\\frac{-b \\\\pm \\\\sqrt{b^2 - 4ac}}{2a}\\\\)\n and then some display math: $$ E=mc^2 $$'\n },\n template: `\n
\n

Vue KaTeX Example

\n\n

Using v-katex directive

\n

Inline:

\n

Display mode (local override):

\n

With options:

\n\n

Using v-katex:auto directive

\n
\n {{ autoRenderContent }}\n
\n\n

Using KatexElement component

\n \n \n\n

Check the console for any KaTeX errors if throwOnError is false.

\n
\n `\n});","lang":"javascript","description":"This quickstart demonstrates the setup of `vue-katex` by registering it globally with `Vue.use()`, including the necessary stylesheet. It then showcases both the `v-katex` directive for rendering inline and display math with options, including `auto-render` functionality, and the `` component for declarative TeX expression rendering."},"warnings":[{"fix":"Check `vue-katex` releases for specific KaTeX version compatibility and install the appropriate `katex` version (e.g., `npm i katex@^0.12.0`).","message":"Ensure KaTeX peer dependency matches `vue-katex` version support. `vue-katex@0.5.0` is specifically designed for KaTeX `0.12.0`.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Explicitly import the stylesheet in your entry point: `import 'katex/dist/katex.min.css';` or include it via an HTML `` tag.","message":"KaTeX's essential stylesheet (`katex.min.css`) is not automatically bundled or injected by `vue-katex`. Failure to import it will result in unstyled or incorrectly rendered math expressions.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use double backslashes for all TeX commands (e.g., `'\\\\frac{a_i}{1+x}'` instead of `'\\frac{a_i}{1+x}'`).","message":"When using the `v-katex` directive with string literals in Vue templates, remember to escape all backslashes (`\\`) in your TeX expressions, as single backslashes are interpreted as JavaScript escape sequences.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Be aware of the merging behavior when defining global and local options. For full control, provide complete option objects locally or manage global options carefully.","message":"Local KaTeX options provided to `v-katex` or `KatexElement` will override globally defined options, except for `object` or `array` type options, which are merged.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Double-check your TeX expression for syntax errors and ensure all backslashes are escaped (e.g., `v-katex=\"'\\\\frac{a}{b}'\"`).","cause":"Incorrect TeX syntax or unescaped backslashes in a template string.","error":"KaTeX parse error: Undefined control sequence: \\frac at position 1"},{"fix":"Ensure you have called `Vue.use(VueKatex)` in your application's entry point after importing `Vue` and `VueKatex`.","cause":"The `vue-katex` plugin (which registers `KatexElement` and `v-katex`) has not been registered with Vue.","error":"Failed to resolve component: katex-element"},{"fix":"Import `katex/dist/katex.min.css` in your main JavaScript file or include it via a `` tag in your `index.html`.","cause":"KaTeX stylesheet `katex.min.css` is not loaded in your application.","error":"Math expressions appear unstyled, in plain text, or with incorrect fonts."}],"ecosystem":"npm"}