nuxt.js | 易学教程

解析Nuxt.js Vue服务端渲染摸索

阅读更多关于解析Nuxt.js Vue服务端渲染摸索

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。安装 nuxt.js $ vue init nuxt-community/starter-template <你项目的名字> // 后面安装依赖你懂的 // 安装koa版本 $ vue init nuxt/koa

Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

阅读更多关于 Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

Not able to access i18 plugin from mutation in classic mode store in Nuxt application

阅读更多关于 Not able to access i18 plugin from mutation in classic mode store in Nuxt application

问题 I'm trying to implement Vuex i18n package within my Nuxt application. In my nuxt.conf.js file in plugins array I have: { src: '@/plugins/i18n.js', ssr: false }, plugins/i18n.js file is: import Vue from "vue"; import vuexI18n from "vuex-i18n/dist/vuex-i18n.umd.js"; import toEnglish from "../translations/toEnglish"; import toSpanish from "./../translations/toSpanish"; import toGerman from "./../translations/toGerman"; export default ({ store }) => { Vue.use( vuexI18n.plugin, store, {

Using nuxt, how do I put the route name in the page title?

阅读更多关于 Using nuxt, how do I put the route name in the page title?

问题 I want to set the page title to a different value for each page. In regular Vue.js, I have done the following: import router from './router' import { store } from './store/store'; router.beforeEach((to, from, next) => { store.mutations.setRoute(to); document.title = store.getters.pageTitle; next(); } How would I get that effect in nuxt? That is, on both initial page load and when changing pages, I want the browser tab's title to change. For instance, from "My App - About" to "My App - Profile

Nuxt SSR with Firebase Integration

阅读更多关于 Nuxt SSR with Firebase Integration

问题 I tried to restructure the project folder so that it can be deployed to Firebase, take a look to this repository Nuxt Firebase Vuetify. On nuxt.config.js I changed the buildDir to ../functions/.nuxt , at first sight it looks worked. But whenever I use custom component from UI framework like Vuetify, it becomes error. On the browser console, there is an error like this The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML

Load Nuxt project to exist express app

阅读更多关于 Load Nuxt project to exist express app

问题 Could not find a trace over the network. Is there a way to load Nuxt project as a middleware for other express server? The documentation is just explaining how to run the nuxt-server. (I'm familiar with the 'static' option, but I would like to keep the SSR behavior) I've transferred my Vue (non-nuxt) application to Nuxt, so I already have a server infrastructure that the nuxt-production-server is interrupting, so I would like to load a build or middleware to my existing express server. Thanks

Different baseURL for development and production with Nuxt.js

阅读更多关于 Different baseURL for development and production with Nuxt.js

问题 How can I add a different baseURL for development and production? This is currently my nuxt.config.js module.exports = { mode: 'universal', ... axios: { // See https://github.com/nuxt-community/axios-module#options baseURL: 'http://10.8.0.1:8000', credentials: false }, ... } For npm run dev and npm run generate I would like to have different baseURL's. How can I do this? EDIT // nuxt.config.js export default { env: { baseUrl: process.env.BASE_URL || 'http://localhost:3000' } } console.log

Accessing Object inside Array

阅读更多关于 Accessing Object inside Array

问题 I'm trying to access values inside Firebase array > object. When I try to access values inside v-for, it works well. But I cannot do this: postDetail.author. It returns undefined. What's the solution? 回答1: Since postDetail is an array of object to access properties inside its objects, you need do something like postDetail[Index].prop var postDetail =[{"author" : "abc", "meta" : "xyz"}]; console.log(postDetail[0].author); 回答2: If you want get only author try it: var postDetails = [{ author:

why does Create-Nuxt-App installs nuxt version 1.4.5?

阅读更多关于 why does Create-Nuxt-App installs nuxt version 1.4.5?

问题 I'm a little confused because on the official nuxt site it says the current nuxt version is 2.5.X but when I create a nuxt app with npx create-nuxt-app and check the package.json under dependencies it says nuxt: ^1.0.0 . When I check the nuxt node_module in its package.json it says version: 1.4.5 . So why does npx create-nuxt-app installs an old nuxt version and not the newest? The nuxt version doesn't impact the vue version, right? It says it uses vue ^2.5.17 which is pretty up to date. 回答1:

How to integrate mailchimp with nuxt js app?

阅读更多关于 How to integrate mailchimp with nuxt js app?

问题 I'd like to embed the following script into my component in nuxtjs app. But since nuxt has no solution for this. I'd like to ask the vue community to see if there was a better way of embedding external 3rd party js scripts? Where should I be embedding this type of scipt? And what sort of external configurations do I need to add to enable this to work? I tried adding directly into my template but it doesn't seem to be working. <script type="text/javascript" src="//downloads.mailchimp.com/js