Nuxt.js - Manitori

Create a post Ask question

Hot
New

|

5 months ago

|

Article

How to do syntax highlighting for code blocks in Nuxt?

Do you also want to highlight the code block in your website like other platforms? There are two Javascript libraries that help you acheive syntax highlighting. They are Prism.js and highlight.js. In this tutorial, we will show how to use Prism.js to do syntax highlighting with Nuxt.js.First, you can use npm to install PrismJS:npm install prismjsNext, go to composables directory and create a new file prism.js which looks like:import Prism from 'prismjs' import 'prismjs/themes/prism-tomorrow.css' ...

0

Like

574

0 comment

|

5 months ago

|

Article

How to setup PrismJS and Autoloader plugin with Nuxt 3?

In previous the article Mathjax loads slow. How to load local JS file with Nuxt?, we explain how to render math equations in Nuxt.js using local CDN. With local CDN, we could easily load many Javascript libraries without slowing down our page loading.PrismJS is a light Javascript library that highlights the code blocks on your pages. In the ordinary way that setup PrismJS (see How to do syntax highlighting for code blocks in Nuxt?), you need to import the file of almost every language that you n ...

0

Like

459

0 comment

|

5 months ago

|

Article

Mathjax loads slow. How to load local JS file with Nuxt?

In How to render math in Vue or Nuxt?, we explain the way to use Mathjax to render beautiful math formula in Nuxt.js. However, using CDN to load Mathjax is easy, but it degrades the performance of our pages. In other words, Mathjax may load slow if it is loaded by CDN.One of the solutions is to load Mathjax locally. You can use npm to install Mathjax to your project. npm install mathjax@4.0.0-beta.6However, it is difficult to integrate with Mathjax in Nuxt. Not only because there is little infor ...

0

Like

573

0 comment

|

6 months ago

|

Article

How to render math in Vue or Nuxt?

cover

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 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/poem-studio-favicon-black.svg" ...

0

Like

730

0 comment

|

6 months ago

|

Article

Vue.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一般适用于文档、个人博客等场景 ...

0

Like

294

0 comment

|

7 months ago

|

Article

moment.js/day.js UTC time to local time

import moment from 'moment'; const time = xxx; moment.utc(time).local().format("YYYY-MM-DD HH:mm:ss") In Nuxt.js, you need to change moment.js to day.js.const dayjs = useDayjs(); const time = xxx; dayjs.utc(time).local().format("YYYY-MM-DD HH:mm:ss")

0

Like

309

0 comment

|

7 months ago

|

Article

Nuxt 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 wra ...

0

Like

285

0 comment

|

7 months ago

|

Article

Vue - TypeError: Cannot read properties of null (reading 'insertBefore')

cover

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 kate ...

0

Like

332

0 comment

|

7 months ago

|

Article

Invalid prop: type check failed for prop "title". Expected String with value "500", got Number with value 500.

Problem.I'm using Nuxt 3.11.1 and my Node version is 20.12.2. And one of my pages unreasonably throw out the misleading error :Invalid prop: type check failed for prop "title". Expected String with value "500", got Number with value 500.I had tried to remove all related "title", but the error was still there. Solution.The error is due to useFetch , just change useFetch to useAsyncData .

0

Like

243

0 comment

|

7 months ago

|

Article

Some 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 ...

0

Like

399

0 comment

|

7 months ago

|

Article

npm 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 s ...

0

Like

298

0 comment

|

7 months ago

|

Article

npm run dev Error: The specified module @css-inline could not be found

I'm using Windows 10, my Node.js version is v20.11.1, and my Nuxt version is 3.11.1. After reseting my Window 10 system,  the following error occurred when I add Nuxt SEO module in nuxt.config.ts and enter npm run dev in my nuxt project.Error: The specified module could not be found. \\?\D:\path\node_modules\@css-inline\css-inline-win32-x64-msvc\css-inline.win32-x64-msvc.nodeThe error did not occur when I remove Nuxt SEO module. Moreover, running npm idid not solve the error.Finally, I solv ...

0

Like

349

0 comment