nuxt.js

Using NUXT with SEO compatibility for thousands of products

微笑、不失礼 提交于 2021-01-28 12:32:54
问题 When I build the app, it only creates routes for products already in the database. When I add new products those links aren't automatically added to the routes, and aren't SEO compatible. I have to rebuild the app to "pick up" the new products. Is there a better way of doing this? 回答1: There's really only 3 options here. Option 1: Rebuild the app This is what you're already doing, so I won't touch base on it more, other than point out this only works for static generations. However, SEO

Import npm package to nuxt appliction

痴心易碎 提交于 2021-01-28 11:52:34
问题 For SEO Reasons i had to rebuild my vuejs app with Nuxt. How can you import npm packages in nuxt app? like in vue.js you simply add the code below to APP.vue import InfiniteLoading from 'vue-infinite-loading' vue.use(InfiniteLoading) 回答1: create new file in plugin folder infinite-loading.js import vue from "vue" import InfiniteLoading from 'vue-infinite-loading' vue.use(InfiniteLoading) in nuxt.config.js include your file name in plugin array plugins: [ '@/plugins/infinite-loading', ], then

Scoped css for Nuxt.js layout

廉价感情. 提交于 2021-01-28 11:44:14
问题 I'm working with nuxt and i have a header layout for my nav. This nav has a background color of white. On a special page, i want to make the nav background color transparent. (Only for this page) I've tried those: This will make the background transparent to all pages.(I don't want that) <style lang="css"> nav { background-color: rgba(0, 0, 0, 0); } This won't work cause my nav it's not in this page, it's included from nuxt layout. <style lang="css" scoped> nav { background-color: rgba(0, 0,

Best way to handle API calls from frontend

て烟熏妆下的殇ゞ 提交于 2021-01-28 06:52:58
问题 Okay, so atm i have a frontend application built with Nuxt JS using Axios to do requests to my REST API(separate). If a user does a search on the website the API URL is visible in XMLHttprequests so everyone could use the API if they want to. What is the best way of making it so that only users that search through my website gets access to the API and people that just directly to the URL gets denied. I suppose using some sort of token system, but what is the best way to do it? JWT? (Users

Docker build of Nuxt missing core-js dependencies

南楼画角 提交于 2021-01-28 04:00:42
问题 I've been trying to run my nuxt app in docker and the build seem to work for the most part other than it keep missing core.js dependencie. I've tried adding core-js manually, babel, tried to run the suggested install command in the error, but to no help. Dockerfile: FROM node:12.2.0-alpine WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY package.json /app/package.json RUN yarn install CMD ["yarn", "dev"] Runtime nuxt build error: ERROR Failed to compile with 53 errors These

Docker build of Nuxt missing core-js dependencies

不想你离开。 提交于 2021-01-28 03:47:03
问题 I've been trying to run my nuxt app in docker and the build seem to work for the most part other than it keep missing core.js dependencie. I've tried adding core-js manually, babel, tried to run the suggested install command in the error, but to no help. Dockerfile: FROM node:12.2.0-alpine WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY package.json /app/package.json RUN yarn install CMD ["yarn", "dev"] Runtime nuxt build error: ERROR Failed to compile with 53 errors These

Nuxt: Fetching data only on server side

不羁岁月 提交于 2021-01-28 03:29:42
问题 I am using Github's API to fetch the list of my pinned repositories, and I put the call in the AsyncData method so that I have the list on the first render. But I just learnt that AsyncData is called once on ServerSide, then everytime the page is loaded on the client. That means that the client no longer has the token to make API calls, and anyways, I wouldn't let my Github token in the client. And when I switch page (from another page to the page with the list) the data is not there I just

How can I access data in asyncData with Nuxt

柔情痞子 提交于 2021-01-27 13:54:19
问题 I'm attempting to build a server-side sortable table with Nuxt, and I'd like to be able to specify the default sort column and direction in my Vue data , and access that in my asyncData function. Something like this: <script> export default { async asyncData ({ $axios, params }) { const things = await $axios.$get(`/api/things`, { params: { sort_column: this.sortColumn, sort_ascending: this.sortAscending, } }); return { things }; }, data () { return { sortColumn: 'created_at', sortAscending:

Nuxt.js problem with server-side API call with https

只谈情不闲聊 提交于 2021-01-27 12:12:45
问题 I have problem with nuxt server-side API call when im using HTTP S . On client side everyting is fine and API works when im switching pages on client side via links, but when I hit Ctrl + f5 and data will be pre-fetched on server side, there is no actually API call and data is not provided. Even no error is thrown, but eveything works just fine with plain HTTP. On my production server nodejs version - v10.9.0 And for HTTPS im using SNI SSL provided via my nodejs web hosting provider This

Run function AFTER route fully rendered in Nuxt.js

前提是你 提交于 2021-01-27 08:15:33
问题 Background: I'm building an SSR website using Nuxt. I want to run a script to fix some typography issues (orphaned text in headers). I can't do this UNTIL AFTER the DOM is rendered. How can I implement this function once so it runs after each page's DOM is rendered? It can be either in the Router or in a Nuxt Layout, or elsewhere. What I've tried: In my layout.vue , Mounted() only runs on the first load (as expected) and adding $nextTick doesn't seem to affect that. This is even true for