Vue.js是一个渐进式JavaScript框架，它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。
你也想像其他网站那样，可以高亮用户写的代码块吗？有两个Javascript库可以帮助你实现这一点，他们分别是Prism.js和highlight.js。在本教程中，我们将使用PrismJS来讲解如何实现代码块高亮。首先，使用npm安装PrismJS：npm install prismjs然后前往composables文件夹，并在里面新建文件prism.js，其内容如下：import Prism from 'prismjs' import 'prismjs/themes/prism-tomorrow.css' // You can choose other themes export default Prism就这样，PrismJS就安装并配置好了，你只需要每次需要高亮代码的时候调用highlightAll()函数就可以了。具体例子如下：<script lang="ts" setup> onMounted(()=>{ Prism.highlightAll() }) $fetch('https://www.example.com') .then((res)=& ...
在之前的文章Vue或Nuxt中如何渲染数学公式？中，我们讲解了如何在Nuxt.js中使用本地CDN渲染数学公式。通过本地CDN，我们可以很轻松的加载很多JavaScript库，且不用担心因此导致页面加载变慢。PrismJS是一个轻量的代码高亮JavaScript库，如果使用平常的方式配置PrismJS（参考如何使用Nuxt实现高亮代码块？），那么你想高亮的每一个语言几乎都需要引入一遍，比如说你想高亮Typescript，那么你需要添加import "prismjs/components/prism-typescript"。显然这很麻烦。然而，PrismJS有多个插件扩充了它的功能。Autoloader插件可以自动加载你需要的语言，让你不必再一个个的引入你需要高亮语言的文件。加载Autoloader插件最简单的方法是用CDN，在本文，我们将会讲解在Nuxt 3中，如何用加载Mathjax的同一种方法来配置PrismJS和它的autoloader插件。1. 首先从Github中下载PrismJS的源代码：https://github.com/PrismJS/prism/archive/re ...
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 ...
在网页上，有很多种方法可以渲染漂亮的数学公式。但是这些方法基本上不能直接应用于Vue.js或者Nuxt.js。在本文中，我们将分别说明如何在Vue.js或者Nuxt.js中使用katex和mathjax渲染数学公式。Katex想要自动渲染所有页面上的数学公式，你需要使用CDN来加载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/ka ...
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一般适用于文档、个人博客等场景 ...
import moment from 'moment'; const time = xxx; moment.utc(time).local().format("YYYY-MM-DD HH:mm:ss") 在Nuxt.js中, 需要将 moment.js 换成 day.js ：const dayjs = useDayjs(); const time = xxx; dayjs.utc(time).local().format("YYYY-MM-DD HH:mm:ss")
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 ...
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 ...
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 ...
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 .
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 ...
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 ...
