Vue.js
Share
Flag
Related
How to render math in Vue or Nuxt?
There are several ways to write and render beautiful math on web. However, some methods can't be directly applied to Vue.js/Nuxt.js. In this article, we will explain how to use katex and mathjax to render math in Vue.js/Nuxt.js.KatexTo automatically render all math in all the pages, you need to use CDN to load katex :<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/poem-studio-favicon-black.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<title>Manitori</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>If you are using Nuxt.js, then you need to change your nuxt.config.ts ://nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{rel:'stylesheet', href:"https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css", integrity:"sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww", crossorigin:"anonymous"}
],
script: [
{
defer:true,
src:"https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js",
integrity:"sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd",
crossorigin:"anonymous"
},
{
defer:true,
src:"https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js",
integrity:"sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk",
crossorigin:"anonymous",
onload:"renderMathInElement(document.body);"
},
]
}
}
})If you want to specify the options of the renderMathInElement function, you could call renderMathInElement in another <script> :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/poem-studio-favicon-black.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
<title>Manitori</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Note that you'd better change document.body to a specific area document.getElementById(Id), otherwise, it may cause some fatal error, see Vue - TypeError: Cannot read properties of null (reading 'insertBefore'). To render math in a specific area, you need to call renderMathInElement separately in each page. For example:<script lang="ts" setup>
onMounted(()=>{
nextTick(()=>{
var node = document.getElementById(Id)
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(node, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
})
})
</script>In Vue.js, you may need to asynchronously render math, so you can follow this example:<script lang="ts" setup>
var node = document.getElementById(Id)
Promise.resolve()
.then(()=>{
nextTick(()=>{
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(node, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
})
})
</script>MathjaxIt is easy to automatically render all math using mathjax. Like katex, you'd better use CDN to load mathjax :<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/poem-studio-favicon-black.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.6/tex-chtml.js">
</script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<title>Manitori</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>If you are using Nuxt.js, then change your nuxt.config.ts like this://nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
type: "text/javascript",
id: "MathJax-script",
async: true,
src: "https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.6/tex-chtml.js",
},
{
innerHTML:
"MathJax = {tex: {inlineMath: [['$', '$'],['$$', '$$']]}};",
},
]
})However, in Vue.js you also need to asynchronously render math using mathjax, otherwise, The rendered math formula will revert back to original text. You can call MathJax.typesetPromise() to achieve this. For example:<script lang="ts" setup>
Promise.resolve()
.then(()=>{
nextTick(() => {
MathJax.typesetPromise();
});
})
</script>Or you could use setTimeout instead of nextTick:setTimeout(() => {
MathJax.typesetPromise();
}, 3000);Following our methods, you can easily integrate Vue.js/Nuxt.js with katex and mathjax😄!
2024-06-06 16:13:27Keep user logged in using Django and Vue 3
The request.session object will automatically generate a cookie with the default name sessionid, which stores the session's session key value. When the session expires, the cookie will automatically removed. Only when the cookie is cleared can the logged in user log in again.Set the expiration time of the session through the backend, and when the time is up, you can see through the browser that the cookie will automatically disappear. Therefore, it is only necessary to set that the token value in the user's local storage disappears along with the cookie, and the duration of the user's login status can be controlled by setting the expiration time of the session, such as a seven day no login period.We may think that login status can be controlled based on cookies, but in reality, it is not easy to manipulate cookie values in Vue. In JavaScript, we can control cookies through instructions such as document. getElementId(). But in Vue, using the document instruction is likely to result in an empty return value. Therefore, controlling login status cannot be achieved through direct control of cookies.Therefore, we need to write an additional interface in the backend to verify the validity of the token and control the user's login status.Note: Cookies only affect whether users can log in again, and in Vue, it is inconvenient to use cookies to determine user login. Therefore, only tokens can be used to implement this. However, tokens and cookies are independent in the front-end, so if the cookie expires and the token is not cleared, it will result in continuous login. If the token is cleared and the cookie is not expired, it will cause the user to be unable to log in after the login status ends.
2024-05-02 18:25:10Some chunks are larger than 500 KiB after minification
When your vue/nuxt project is large, running npm run build may output the error : WARN 15:32:15
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.This is indeed a vite problem. You could solve this error by setting the chunk size limit higher.vite.config.js ://vite.config.js
export default defineConfig({
...,
build: {
chunkSizeWarningLimit: 1600
}
})nuxt.config.ts ://nuxt.config.ts
export default defineNuxtConfig({
vite: {
build: { chunkSizeWarningLimit: 1600 },
}
})
2024-05-02 17:18:43Vue - TypeError: Cannot read properties of null (reading 'insertBefore')
In Vue 3/Nuxt 3, one may occur the error TypeError: Cannot read properties of null (reading 'insertBefore') which has little information and is hard to solve. In the following, we summerize some tips that help you solve this error :1. Change v-if to v-show , or change all v-if , v-else to v-show. Sometimes, the error appears because there are v-if or v-if, v-else pairs.2. Change katex auto-render. The error may appear because you use katex auto-render. To solve this, you could either change katex to mathjax, or change document.body in the auto-render function to a specific area document.getElementById(Id) as follows :<script>
var node = document.getElementById(Id)
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(node, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>If katex render all corresponding symbols in document.body, it may also influence some normal part. So you need to restrict it to a specific area.3. Change your dialog component. If you are using SSR, like Nuxt.js, the error may occur due to your dialog component in the UI library. You could either try to wrap the dialog with ClientOnly <ClientOnly>
<Dialog>
</Dialog>
</ClientOnly>or try to use another UI library.
2024-05-05 12:19:38npm run build error: Heap out of memory in Nuxt3
When running npm run build , an error may occur which looked like :<--- Last few GCs --->
[2656:000001DF58927940] 511573 ms: Mark-sweep 2013.9 (2091.6) -> 2012.7 (2091.4) MB, 1022.4 / 0.0 ms (average mu = 0.211, current mu = 0.009) allocation failure; scavenge might not succeed
[2656:000001DF58927940] 513611 ms: Mark-sweep 2028.4 (2091.4) -> 2027.2 (2117.4) MB, 2021.5 / 0.0 ms (average mu = 0.083, current mu = 0.008) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF60B131B7F node_api_throw_syntax_error+203775
2: 00007FF60B0B1556 v8::internal::wasm::WasmCode::safepoint_table_offset+63558
3: 00007FF60B0B28C2 v8::internal::wasm::WasmCode::safepoint_table_offset+68530
4: 00007FF60BB547F4 v8::Isolate::ReportExternalAllocationLimitReached+116
5: 00007FF60BB3FB52 v8::Isolate::Exit+674
6: 00007FF60B9C1BBC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
7: 00007FF60B9BEDDB v8::internal::Heap::CollectGarbage+3963
8: 00007FF60B9D5013 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
9: 00007FF60B9D58BD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
10: 00007FF60B9E50F3 v8::internal::Factory::NewFillerObject+851
11: 00007FF60B6D6825 v8::internal::DateCache::Weekday+1349
12: 00007FF60BBF1E81 v8::internal::SetupIsolateDelegate::SetupHeap+558193
13: 00007FF5AD7902ACTo solve this error, you could try to change your package.json as follows ://package.json
"scripts": {
"build": "node --max-old-space-size=8192 node_modules/nuxt/bin/nuxt.mjs build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
}Or you could set your nuxt.config.ts ://nuxt.config.ts
export default defineNuxtConfig({
sourcemap: false
})
2024-05-02 16:19:43Vue - Go to anchor smoothly without changing url
In Vue.js, we can define an anchor by RouterLink or HTML tag <a> , while in Nuxt.js, we can additionally use NuxtLink which is similar to RouterLink .<a href="#content">My Link</a>
<RouterLink to="#content">My Link</RouterLink>
<NuxtLink to="#content">My Link</NuxtLink>However, on loading a page, the above ways would change the url which makes it slow to go to #content . To speed up anchor link and not change the url, there are two ways.The first way is to use pure javascript method scrollIntoView to scroll to the specified div id, which is fast and would not change url.function scrollSmoothTo(Id) {
var node = document.getElementById(Id);
node.scrollIntoView({
behavior: 'smooth'
});
}
<a @click="scrollSmoothTo('content')">
Scroll to userdiv
</a>
<RouterLink @click="scrollSmoothTo('content')">
Scroll to userdiv
</RouterLink>
<NuxtLink @click="scrollSmoothTo('content')">
Scroll to userdiv
</NuxtLink>
<div id="content">
example
</div>Note that adding behavior: 'smooth' can add animation when scrolling. However, using this way, a could not have attribute href, i.e. <a href="#content" @click="scrollSmoothTo('content')" />
<RouterLink href="#content" @click="scrollSmoothTo('content')" />
<NuxtLink href="#content" @click="scrollSmoothTo('content')" />would not perform the click event. This is not SEO friendly.Therefore, the second way is the improvement of the first that is SEO friendly, which can smoothly go to #content without changing the url. We should use Vue's event modifiers for v-on.<a href="#content" @click.native.prevent="scrollSmoothTo('content')">
Scroll to userdiv
</a>
<div id="content">
example
</div>This way, we could prevent the default href action when clicking and perform the scrollSmoothTo function. However, It seems that using RouterLink or NuxtLink in the same way could not prevent the default action, i.e.<RouterLink href="#content" @click.native.prevent="scrollSmoothTo('content')">
Scroll to userdiv
</RouterLink>
<NuxtLink href="#content" @click.native.prevent="scrollSmoothTo('content')">
Scroll to userdiv
</NuxtLink>not work.
2024-04-30 16:52:12Nuxt 3 Error TypeError: Cannot read properties of null (reading 'shapeFlag')
I encountered such an error when using Nuxt 3.8 :TypeError: Cannot read properties of null (reading 'shapeFlag')The error is a bit misleading to me, because I have defined a Dialog component which is also named Flag . I used Flag in two different pages, one of which was ok, but the other one threw out such an error. I tried to add ClientOnly to Flag , but the error was still there.I thought that the issue is my UI library. I am using ElementUI Plus, and my Flag component is indeed defined by wrapping ElDialog . Adding ClientOnly to ElDialog or renamed the file name of Flag to Flag.client.vue couldn't solve the error. Finally, I was able to solve this problem by using another UI library, i.e. PrimeVue.
2024-05-07 21:08:25Vue.js与Nuxt.js的区别
Vue.js与Nuxt.js都是前端的两个框架，Vue.js的项目属于单页应用，而Nuxt.js是基于Vue.js的服务端渲染通用框架。单页应用简称SPA，指的是前端代码将会在浏览器端被浏览器渲染。这对SEO优化不利，搜索引擎爬虫，会爬到空的网页。在Vue项目中，Vue会将JS交给浏览器渲染因此，结果是查看源代码没有别的东西，搜索引擎爬虫也基本只能看到这些，于是便直接下一个了，不会等你渲染。而服务端渲染，简称SSR，正是该问题的解决方案。前端代码会先在Node.js服务端渲染，然后再交给浏览器进行“二次渲染”。Nuxt.js则是Vue.js的SSR通用解决方案。前端代码经过服务端渲染后，能让搜索引擎爬虫看到完整的网站，同时查看源代码也能看到完整的代码。服务端渲染能提高网站渲染速度，降低白屏时间。同时，因为要同时运行Node.js服务端，这增加了服务器的负载。在Nuxt.js中，可以设置部分页面SSR，部分页面则是SPA，这样能降低服务器的资源耗费。对于静态网站，可以使用预渲染替代服务端渲染。预渲染，简称SSG，指提前渲染静态的html，提高页面响应。SSG一般适用于文档、个人博客等场景，即数据不会经常性发生变化的场景。SSG同样有利于SEO优化，同时不需要同时运行多一个服务端，降低了服务器的负荷。Nuxt.js中同样可以设置SSG，你可以根据自己的需求，将不同页面分别设置为SSR页面、SPA页面、SSG页面。
2024-05-14 23:32:56Vue add whitespaces in a string
In Vue.js, if you simply add multiple whitespaces in a string, it eventually displays a single whitespace.//This will display a single whitespace.
'ab c'If you want to display multiple whitespaces, you could use unicode to represent whitespace.let str1 = 'ab\u00A0\u00A0\u00A0 c';
let str2 = 'ab\u0020\u0020\u0020 c';
let str3 = 'ab\u3000\u3000\u3000 c';These will output multiple whitespaces in strings.
2024-05-09 20:18:57Vue3中的条件渲染（v-if、v-else-if、v-else 以及 v-show）的使用（实例详解）
v-if v-else v-else-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。<script setup>
const have = ref(true)
</script>
<template>
<div id="app">
<div v-if = "have">我可以被显示出来</div>
</div>
</template>当have的值为true时，div块被显示。而当have为falseconst have = ref(false)页面无显示，且具有v-if = “have”的div块不存在在html结构中。也可以用v-else添加一个“else模块”，和js的语法相同，当if条件不成立，则显示else模块内容。在vue2.1.0新增的v-else-if，更是可以与上面两个共同使用，但是v-else和v-else-if都必须紧跟在v-if的后面使用（v-else-if可以跟在v-else-if后面）例子：<script setup>
const type = ref("哎哎哎")
</script>
<template>
<div id="app">
<div v-if="type==='A' ">A</div>
<div v-else-if="type=='B'">B</div>
<div v-else-if="type=='C'">C</div>
<div v-else-if="type=='D'">D</div>
<div v-else>not A/B/C/D</div>
</div>
</template>执行结果：这里其他的div在html结构中已不存在。在<template>元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上，但是如果想切换多个元素呢？？？此时就可以把一个< template>元素当不可见的包裹元素，并在上面使用v-if，最终的渲染结果将不包含< template>元素。例子：<script setup>
const ok = ref(true)
</script>
<template>
<div id="app">
<template v-if="ok">
<h1>哈哈哈哈</h1>
<p>这是一个段落</p>
<p>这是一个段落</p>
</template>
</div>
</template>运行结果：v-showv-show是另一个用于根据条件展示元素的选项，，用法和v-if大致相同<h1 v-show="ok">hello</h1>不同的是带有v-show的元素时钟会被渲染并且保留在dom中，v-show只是简单的切换原色的css属性display（注意）v-show不支持template元素，也不支持v-else例子：<script setup>
const ok = ref(false)
</script>
<template>
<div id="app">
<div v-show="ok">hhhhhhhhhhh</div>
</div>
</template>不显示但存在v-if和v-show的区别v-if是真正的条件渲染，因为它会确保在切换过程中事件内的**事件监听器和子组件适当得被销毁和重建。是有惰性的：如果在初始渲染的时候事件为假，则什么也不做，直到条件第一次变为真的时候，才会开始渲染条件块v-show相比v-show就简单的多，不管初始条件是什么，元素始终都会被渲染，而且只是简单地基于css进行切换。两者的使用一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则用v-show更好一些；如果运行的条件很少改变，则用v-if更好。
2024-08-29 21:18:49