I've just tried to use the vue-katex module https://www.npmjs.com/package/vue-katex.
I set up a simple example using vue-cli
$ vue init webpack-simple my-project
And then I added the vue-katex package, added the few lines of code to put some KaTeX mathematical stuff on the page and started my dev server. However, the mathematical notation is not displaying properly, and I'm getting a big black box displayed on my page.
Here's the relevant part of my package.json:
"dependencies": {
"vue": "^2.5.11",
"vue-katex": "^0.1.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
Here's my app code (I've tried to take the code directly from the vue-katex npm page above):
<template>
<div id="app">
<div v-katex:display="'\\frac{a_i}{1+x}'"></div>
<img src="./assets/logo.png">
...
</div>
</template>
<script>
import Vue from 'vue';
import VueKatex from 'vue-katex';
Vue.use(VueKatex);
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
And a screenshot of the result:
You can see the math doesn't render and I get this weird big black box. I've included the dev tools inspection to try to make it easier to diagnose.
I've tried to keep everything as simple as possible - if anyone could tell me what I'm doing wrong, I'd really appreciate it!
Many thanks in advance,
