Server side rendering, also known as SSR (Server Side Render), completes the content of the page on the server side instead of obtaining data through AJAX on the client side. Advantages: Better SEO, since search engine crawlers can view fully rendered pages directly Nuxt.js is a lightweight application framework based on Vue.js. It can be […]
Tag: nuxt
Build nuxt3 project (framework construction)
Requirements Goal: I want to build a nuxt3 framework to implement some basic components, routing, and pages, so that they can be directly reused when encountering related SSR projects later. at the same time: Record the introduction to the use of nuxt3 About Nuxt (detailed explanation and peripherals) Nuxt Framework 1. A server-side rendering solution […]
The Vue2 project was refactored into a nuxt.js project, which was a pitfall for axios.
Personal website: https://aijianli.site/ You can create a resume online for free and provide PDF download, which is convenient and fast. In order to solve the SEO problem of the resume production website I developed myself, I transformed the front-end Vue project into a nuxt.js project. During this process, problems with the axios reference had troubled […]
nuxt uses i18n to switch between Chinese and English
Chinese renderings: English renderings: Version: Install: npm install –save @nuxtjs/i18n Create two new files, en.js and zh.js, to switch the display. en.js content import globals from ‘./../js/global_val’ export default { /****** * Public content begins * *****/ seeMore: “More Information”, //See more seeAgenda: “View the conference schedule”, //View the agenda jtlRegister: ‘Register for the Golden […]
After vue got the data, it did not re-render the view. After nuxt.js got the data, it did not re-render the view and forced the view to be updated.
The following is the solution for Vue2 1. Vue.set() Q: Under what circumstances is it used? Answer: If you add new “attributes” to responsive data, in theory, there is generally no problem. However, if your level is relatively deep, or if the “attributes” are added, the view will not get them. This method can be […]
Linux deployment nuxt3 process
1. Server installation nodejs environment 1.1 Download the installation package # (Note: The source address will only save the latest stable minor version. You can visit https://nodejs.org/dist/ to select the source) wget https://nodejs.org/dist/latest-v18.x/node-v18.12.0-linux-x64.tar.gz 1.2 Create a nodejs folder, unzip it and put it into the current directory #Extract to the current folder tar -zxvf node-v18.12.0-linux-x64.tar.gz […]
Regarding the fact that I have a backend configurable blog system, I used nuxt to make a website, and the backend can update articles.
About the fact that I have a backend configurable blog system. I used nuxt to build a website, and the backend can update articles Directory structure The structure of nuxt is that page is a page that can be displayed directly. There are components that can be reused in components. Composables can put some used […]
Nuxt03 Nuxt2 page cache, component cache, api cache
Scenarios where server-side rendering projects based on nuxt.js can be optimized through caching include the following: Optimization points Reference documents and ideas Optimization scenarios/conditions Special instructions Detection method 1. Page cache vue official document The page content is not user Specific (that is, for the same URL, the same content is always rendered for all […]
Use Class to encapsulate sequelize twice (nodejs, next, nuxt operation database)
1. Foreword Recently, I am working on the NextJS full stack, and I cannot avoid operating the database. sequelize is an ORM framework for NodeJS data manipulation, which can effectively avoid SQL injection vulnerabilities caused by native SQL statements. However, the native sequelize is more cumbersome to write, and the support for detailed ts is […]
nuxt uses echarts
Write directly on the page Bug1: If the installation package reports an error, please change the version. bug2: Chart cannot be displayed: width and height need to be defined bug3: need to resize size Installation npm install [email protected] Create echarts.js in the plugins folder import Vue from ‘vue’ import echarts from ‘echarts’ //Introduce echarts Vue.prototype.$echarts […]