Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

358
Views
I would like to know how to install and use mathlive in NuxtJS

please help me I'd like to know why it doesn't work or if I'm doing it wrong.

I npm i mathlive to get input. And following the implementation of the nuxt plugins in the documentation doesn't work.

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Nuxtnumer',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['./plugins/mathlive-vue.js'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['mathlive-vue']
  },
}

file mathlive-vue.js in directory plugins

import Vue from 'vue';
import * as Mathlive from 'mathlive';
import Mathfield from 'mathlive/dist/vue-mathlive.mjs'

Vue.use(Mathlive,Mathfield)

Error:

ERROR Failed to compile with 1 errors friendly-errors 19:26:11

ERROR in ./node_modules/mathlive/dist/vue-mathlive.mjs friendly-errors 19:26:11

Module parse failed: Unexpected token (2:342) friendly-errors 19:26:11
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /** MathLive 0.69.11 */

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I haven't used mathlive specifically, but I read your question and suspected that:

transpile: ['mathlive-vue']

Should be:

transpile: ['vue-mathlive']

becase the output complains about ./node_modules/mathlive/dist/vue-mathlive.mjs specifically.

I spun up a quick app and was able to recreate your error by copying your transpile config. Switching to vue-mathline resolved the error for me.

In case you (or anyone else who finds this question) are wondering what's going on- mathlive code uses ES modules, which cannot be executed in Node (the server side of your Nuxt app). Therefore you need to let Nuxt know that those files should be transpiled (made compatible with node) in order for them to work.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!