MathJax been harnessed for rendering LaTeX in web browsers in

My attempt to implement the library mathjax in Nuxt 3 was unsuccessful.

<template>
  <div>
    <textarea v-model="formula"/>
    <vue-mathjax :formula="formula"/>
  </div>
</template>

...

/plugins

import VueMathjax from 'vue-mathjax-next';

export default defineNuxtPlugin(({ vueApp }) => {
    vueApp.use(VueMathjax)
})

- Client vnode: span 
- Server rendered DOM: <!---->  
  at <VueMathjax formula="$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$" > 
  at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  ...

I attempted to utilize the vue-mathjax-next library with Latex rendering, but encountered issues in Nuxt 3.


...

Answer â„–1

After examining a comment in the [associated repository for Vue2], it appears necessary to include the MathJax script, as the component does not load it by default.

With Nuxt 3, you are now able to embed a script in your component using the <Script> tag instead of the traditional <script>. Learn more about this approach on Stack Overflow

Kindly note that the Script component is no longer supported as of Nuxt 3.0.0-rc.14 and the recommended method is now to utilize useHead.

Check out the release notes for more details

To resolve the issue, update your Vue file as follows:

<template>
  <div>
    <textarea v-model="formula"/>
    <vue-mathjax :formula="formula"/>
  </div>
  <Script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></Script>
</template>

<script setup lang="ts">
const formula = ref('$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$');
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When updating the location.hash property via a click event, it appears to be set to

Check out the code snippet below: $(e).click(function() { console.log(this.href); location.hash = this.href; }); In this code snippet, e refers to a <li> element structured like this: <li href="#about">About</li> The location. ...

Summon the keyboard to appear

How do I make the keyboard appear on my website? I have a javascript function that recognizes keyboard input, but I am struggling to display the keyboard on my mobile device. Is there a way to simulate traditional input and generate key events? I should ...

The input button with type="image" is malfunctioning when used with href in Internet Explorer 11

<a href="javascript:OpenRuleEditor('@Url.Action("AddRule", "AdvancedRuleSearch", new { mode = "add" })','AddNewRule','Add New Rule')" style="text-decoration: none; display:inline-block"> < ...

Tips on transmitting JSON data from a Spring controller to JavaScript

Does anyone have experience with sending a JSON object from a spring controller to JavaScript and receiving it using AJAX? I would appreciate any guidance on how to accomplish this. ...

Adjust the color of an HTML table cell based on the selected value in a drop-down menu?

<!DOCTYPE html> <html> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .MRG{ background-color:#82E0AA; } .MRA{ background-color:#F5B041; } .MRR{ background-color: ...

What could be causing an external row to be inserted during the process of writing an excel file in Nodejs?

Currently, I am tackling the challenge of utilizing Nodejs to read and write Excel files with the "XLSX" npm module. While I have managed to successfully read and write data, an unexpected external row is being inserted in place of the first row with the c ...

Implementing the Jssor slider

Recently, I've been using the jssor slider on multiple pages without any issues. However, I am now facing some challenges. Ideally, I want the slider to be hidden initially and then displayed with another script. While I have managed to achieve this v ...

Error message indicates that the attribute in jQuery is not defined

I am currently stuck trying to make a piece of code work, and I feel like I'm just going around in circles. The goal is to halt the click event immediately, perform an action, and then resume. I've experimented with switching between window.ope ...

Is it possible to verify if a user is accessing a webpage through Electron?

If I were interested in creating a basic Electron application that notifies the user upon reaching example.com, is this achievable? If yes, then how can I determine if the user is on a particular webpage? ...

Deleting a specific row within a Material UI DataGrid in Reactjs: Tips and tricks

As I embark on this React project, things are progressing smoothly. However, a challenge has arisen. The functionality I aim for is as follows: When the checkbox in a row is clicked, I want that particular row to be deleted. For instance, selecting checkb ...

Creating an automated CRUD API using Node.js, Express, and Mongoose

In the realm of Python, we have often relied on tools like tastypie or Django-Rest-framework to build Rest APIs. After delving into Felix Geisendörfer's article Convincing the boss, one particular statement caught my attention: Node.js truly exce ...

Unusual JavaScript Bug: Uncaught TypeError - Unable to access property 'url' of null

I encountered a peculiar JavaScript error. The following message appears in the console: Uncaught TypeError: Cannot read property 'url' of null (Line 83) The code on Line 83 looks like this: var image = '<img class="news_image_options ...

Verifying a form submission using a personalized model popup

I have several delete forms in my application that I want to confirm using javascript/jQuery before proceeding. An easy way to do this is: $('form.confirm-form').submit(function(){ return confirm('Are you sure?'); }); This method ...

Combining JSON arrays into a single multidimensional array

I have received the following JSON data from an API, and unfortunately, I do not have control over its format. Hence, changing the format is not feasible for me. I am facing difficulty in combining this JSON data into a single JSON array. My goal is to pr ...

What are the consequences of altering meta tags once the DOM has fully loaded?

While delving into the A-Frame source code, I noticed that the library uses JavaScript to set various meta tags. It seems safe in the context of A-Frame as Mozilla recommends importing their library as a blocking, synchronously loaded script in the <he ...

Building a Multiple Choice Text Box with HTML

I am looking to create a section on my website where I can display text, and I have 9 buttons on the page that I want to stay within the same page without redirecting. The goal is for the text to update based on which button is clicked, with a fading ani ...

Prevent strange appearances when using slideDown animation

In my application, I am experiencing an undesirable side effect when using slideDown(). Upon clicking the element, a piece of content is appended to an ancestor. This causes the clicked button to shift to the right and the ones on the left to move slightly ...

Utilizing Jquery to Access the Third Tag

I am in need of assistance to trigger a third party tag on my website when a specific message, "Choisissez la finition," is displayed on a webpage. The div containing this message is: <div id="vw_dbs_ihdcc_TrimSelector" class="container containerColQu ...

Using Node.js for building a single-page web application

Currently, I am exploring the use of express.js for the backend and JavaScript on the client side for my single page web application. My main concern is about how routing works in express. Should routing be used to bridge the gap between the user interfac ...

Is it possible to include HTML elements like <href> in Vue data?

My collection of data strings looks something like this: data(){ return(){ {name:"example", title:"exampleTitle", desc:"exampleDescription exampleDescription ....."}, {name:"example2", title:"example2Title", desc:"exampleDescripti ...