I am transitioning a Vue 3 website from Javascript to TypeScript. Mathjax is loaded from a CDN, and this field from a custom component which worked previously:
watch: {
note_content: function () {
this.$nextTick(MathJax.typesetPromise);
}
}
now generates a static error which should translate as:
Can not find name 'MathJax'.ts(2304)
How can I solve this ?
You'll need to install #types/mathjax
I want to use Mathjax on my website. I put in the <head> section of public/index.html:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
And, in my component :
<template>
<div v-html="note_content"></div>
</template>
<script>
import { typeset, dummy_typeset } from '../assets/js/text_processing.js';
import showdown from 'showdown';
const converter = new showdown.Converter({ tables: true });
export default {
data () {
return {
}
},
computed: {
note_content: function() {
return typeset(this.exchange_data);
}
},
props: ['exchange_data'],
watch: {
note_content: function() {
Mathjax.typesetPromise();
}
}
}
</script>
However on runtime, I get the error :
Uncaught (in promise) ReferenceError: Mathjax is not defined
What I do not understand is that the css which is located in the head of public/index.html is correctly loaded and rendered in the component. Also I read elsewhere that loading external javascript this way should make it available to all components. What is wrong ?
I think it is connected to webpack config, but i might be wrong. Anyway, have you tried this method?
How to add external JS scripts to VueJS Components?
It enforces the script to be loaded.
Contrarily to what is written at https://docs.mathjax.org/en/latest/web/typeset.html, the syntax for asynchronous rendering is not :
Mathjax.typesetPromise()
But (notice the case):
MathJax.typesetPromise()
The typo could be detected from the surrounding context.
Also not that to use typeset Mathjax in a Vue component, the virtual DOM should be processed before calling the typesetPromise method, so an example of working code would be:
watch: {
note_content: function() {
this.$nextTick(MathJax.typesetPromise);
}
}
For some reason, I have to write code like this:
import { something } from '/Users/my-user-name/my-working-dir/my-package/src/somefile.ts';
Rollup sees /Users thinks that's a node_modules, but not.
I can't find any rollup plugin related to this.
Now, I've written a rollup plugin to fix this, but I didn't write any plugin before, I don't know if I'm doing it right or wrong, but the output is exactly what I want:
function fixLocalImport() {
return {
name: 'fix-local-import', // this name will show up in warnings and errors
resolveId(source, importer) {
if (source.startsWith('/Users')) {
return source;
}
return null; // other ids should be handled as usually
},
load(id) {
return null; // other ids should be handled as usually
}
};
}
Am I doing anything wrong?
Rollup doesn't automatically handle absolute URLs, since they refer to different things depending on the context (either the root of your website server, or the root of your file system, or the root of your project). Writing a plugin is the best solution here, although you don't need to override the "load" hook.
function fixLocalImport() {
return {
name: 'fix-local-import',
resolveId(source, importer) {
if (source.startsWith('/Users')) {
return source;
}
return null;
},
};
}
My client sent me an HTML template that heavily relies on jQuery. The app itself runs on nuxt. I have a js file that contains a whole lot of $(function(){...}). Now I don't know how to run this file on each page transition.
So far, I have tried:
Creating a plugin inside plugins dir that looks like:
export default async ({ app }) => {
app.router.afterEach((to, from) => {
require('~/static/js/base-init.js');
})
}
here base-init.js has all those jquery code
Adding mounted (inside default.vue layout) but that doesn't work either.
Does anyone have a clue?
If you want to use your jquery file on nuxt just do this
Inside your nuxt.config.js add
npm i jquery
plugins: [
'~plugins/my-jquery-code.js'
]
And inside plugins/my-jquery-code.js
if (process.BROWSER_BUILD) {
const $ = require('jquery')
$(function() {
console.log('document ready!');
// do whatever you want with html and jquery
})
}
I'm refering to this link => https://github.com/nuxt/nuxt.js/issues/356
its work for me !
Good Lucks.
I am trying to use Choices.js within a Vue component. The component compiles successfully, but then an error is triggered:
[vue-router] Failed to resolve async component default:
ReferenceError: document is not defined
In the browser I see:
ReferenceError document is not defined
I think this has something to do with the SSR in Nuxt.js? I only need Choices.js to run on the client, because it's a client only aspect I guess.
nuxt.config.js
build: {
vendor: ['choices.js']
}
AppCountrySelect.vue
<script>
import Choices from 'choices.js'
export default {
name: 'CountrySelect',
created () {
console.log(this.$refs, Choices)
const choices = new Choices(this.$refs.select)
console.log(choices)
}
}
</script>
In classic Vue, this would work fine, so I'm very much still getting to grips with how I can get Nuxt.js to work this way.
Any ideas at all where I'm going wrong?
Thanks.
It's a common error when you start a Nuxt project ;-)
The Choices.js lib is available only for client-side! So Nuxt tried to renderer from server-side, but from Node.js window.document doesn't exist, then you have an error.
nb: window.document is only available from the browser renderer.
Since Nuxt 1.0.0 RC7, you can use <no-ssr> element to allow your component only for client-side.
<template>
<div>
<no-ssr placeholder="loading...">
<your-component>
</no-ssr>
</div>
</template>
take a look at the official example here: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue
Update:
Since Nuxt >= 2.9.0, you have to use the <client-only> element instead of <no-ssr>:
<template>
<div>
<client-only placeholder="loading...">
<your-component>
</client-only>
</div>
</template>
To know more, see nuxt docs: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component
The accepted answer (while correct) was too short for me to understand it and use it correctly, so I wrote a more detailed version. I was looking for a way to use plotly.js + nuxt.js, but it should be the same as the OP's problem of Choice.js + nuxt.js.
MyComponent.vue
<template>
<div>
<client-only>
<my-chart></my-chart>
</client-only>
</div>
</template>
<script>
export default {
components: {
// this different (webpack) import did the trick together with <no-ssr>:
'my-chart': () => import('#/components/MyChart.vue')
}
}
</script>
MyChart.vue
<template>
<div>
</div>
</template>
<script>
import Plotly from 'plotly.js/dist/plotly'
export default {
mounted () {
// exists only on client:
console.log(Plotly)
},
components: {
Plotly
}
}
</script>
Update: There is <client-only> tag instead of <<no-ssr> in Nuxt v>2.9.0, see #Kaz's comment.
You need to add it as a plugin and then disable SSR for it.
As the document and window are not defined on the server-side.
Your nuxt.config.js should look like below
plugins: [
{ src: '~/plugins/choices.js' } // both sides
{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side
],
I found that now the no-ssr is replace by , i am using echart and have the same problem but now it´s working!
<client-only>
<chart-component></chart-component>
</client-only>
I had this error with lightgallery.js adding mode: 'client'
seems helped
nuxt.config.js
plugins: [
{ src: '~/plugins/lightgallery.js', mode: 'client' }
],
plugins/lightgallery.js
import Vue from 'vue'
import lightGallery from 'lightgallery.js/dist/js/lightgallery.min.js'
import 'lightgallery.js/dist/css/lightgallery.min.css'
Vue.use(lightGallery)
ImageGallery.vue
<template>
<section class="image-gallery-container">
<div class="image-gallery-row">
<div
ref="lightgallery"
class="image-gallery"
>
<a
v-for="image in group.images"
:key="image.mediaItemUrl"
:href="image.mediaItemUrl"
class="image-gallery__link"
>
<img
:src="image.sourceUrl"
:alt="image.altText"
class="image-gallery__image"
>
</a>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'ImageGallery',
props: {
group: {
type: Object,
required: true
}
},
mounted() {
let vm = this;
if (this.group && vm.$refs.lightgallery !== 'undefined') {
window.lightGallery(this.$refs.lightgallery, {
cssEasing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'
});
}
}
}
</script>
<script>
import Choices from 'choices.js'
export default {
name: 'CountrySelect',
created () {
if(process.client) {
console.log(this.$refs, Choices)
const choices = new Choices(this.$refs.select)
console.log(choices)
}
}
}
</script>
I guess this should help, nuxt will touch insides of computed after it renders on server and window will be defined
This thread is a bit old, but I will leave my solution here so maybe someone finds it useful.
I had similar issue with vue-star-rating and few other plugins recently.
Below steps can be followed and adjusted depending on the plugin name, import / usage settings:
Go to your plugins folder and create new js file, in this case vue-star-rating.js, then edit it to setup the plugin:
import Vue from 'vue'
import VueStarRating from 'vue-star-rating'
Vue.component('vue-star-rating', VueStarRating); //<--- the name you used to register the plugin will be the same to use when in the component (vue-star-rating)
Go to your nuxt.config.js file and add plugin:
plugins: [{
src: '~/plugins/vue-star-rating', // <--- file name
mode: 'client'
},
//you can simply keep adding plugins like this:
{
src: '~/plugins/vue-slider-component',
mode: 'client'
}]
Now you are ready to use the plugin anywhere in the application. However, to do that you will need to wrap it in the container <client-only>. Example:
<client-only placeholder="loading...">
<vue-star-rating />
</client-only>
Notes:
You do not need to import anything locally to the component, simply using it like above should fix the problem.
Please make sure you are naming the plugin the same way in both places, step 1 and step 3. In this case it would be vue-star-rating.
if you still want to do it, document object can be taken this way:
const d = typeof document === 'undefined' ? null : document
For completeness, it's worth mentioning that instead of the object syntax in Yusuf Adeyemo answer (which I prefer as it separates out the file from how it is used), you can also set plugins to operate in client or server side only by naming the files like so:
export default {
plugins: [
'~/plugins/foo.client.js', // only in client side
'~/plugins/bar.server.js', // only in server side
'~/plugins/baz.js' // both client & server
]
}
src: https://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only
On top of all the answers here, you can also face some other packages that are not compatible with SSR out of the box (like in your case) and that will require some hacks to work properly. Here is my answer in details.
The TLDR is that you'll sometimes need to:
use process.client
use the <client-only> tag (be careful, it will not render but still execute the code inside)
use a dynamic import if needed later on, like const Ace = await import('ace-builds/src-noconflict/ace')
load a component conditionally components: { [process.client && 'VueEditor']: () => import('vue2-editor') }
With all of this, you're pretty much covered for every possible case.
I was trying to access document in created hook so when I moved the logic from created hook to mounted hook, my problem was solved.