vue-katex - Simple plugin for math typsetting using KaTeX in Vue.js

vue-katex

KaTeX enables fast math typesetting for the web. vue-katex is a lightweight plugin introduces a simple way to use KaTeX in your Vue app. Enjoy! 🙂

Installation

Install vue-katex with katex as a peer dependency

# With NPM
npm i vue-katex katex -P

# With Yarn
yarn add vue-katex katex

As explained in the KaTeX documentation, you must also add the related stylesheet.

<style>
  @import "../node_modules/katex/dist/katex.min.css";
</style>

or

import 'katex/dist/katex.min.css';

Getting started

In your script entry point:

import Vue from 'vue';
import VueKatex from 'vue-katex';
import 'katex/dist/katex.min.css';

Vue.use(VueKatex, {
  globalOptions: {
    //... Define globally applied KaTeX options here
  }
});

Now you are all setup to use the plugin.

Usage

There are two ways to use vue-katex, using the KatexElement component or using the v-katex directive.

Global Options

Options applied globally through the plugin will be merged with any options applied locally to the v-katex directive or KatexElement. Locally applied options have a higher precedence and will override globally applied options, the exception to this is any KaTeX option of the type object or array. These will be merged with the resultant option containing all global and local keys or elements.

Using the katex directive

In your template (don't forget to escape all backslashes):

<div v-katex="'\\frac{a_i}{1+x}'"></div>

To render the math in display mode:

<div v-katex:display="'\\frac{a_i}{1+x}'"></div>

To add KaTeX options, use an object literal instead:

<div v-katex="{ expression: '\\frac{a_i}{1+x}', options: { throwOnError: false }}"></div>

Using the katex directive with auto-render

<div v-katex:auto>
  \(\frac{a_i}{1+x}\)
</div>

Options can be applied as follows

<div v-katex:auto="{ options }">
  \(\frac{a_i}{1+x}\)
</div>

See KaTeX documentation for auto-render for more information.

Using the KatexElement component

<katex-element expression="'\\frac{a_i}{1+x}'"/>

Through props KatexElement supports all of the same options that KaTeX supports.

See also: KaTeX Documentation

License

vue-katex is released under the MIT license.