nuxt.js

问题 I start the project with nuxt.js / express. We have developed style scoped for each component (.vue) in nuxt.js. So, when routing , the property is overlaid on the same class name (style), so the page does not display properly. 1. What is the correct use of 'style scoped'? 2. Or should the routing process be <a> rather than <nuxt-link> ? 回答1: What is the correct use of 'style scoped'? The <style scoped></style> notation is not ambiguous, as the scoped attribute suggests, all the CSS elements

问题 I start the project with nuxt.js / express. We have developed style scoped for each component (.vue) in nuxt.js. So, when routing , the property is overlaid on the same class name (style), so the page does not display properly. 1. What is the correct use of 'style scoped'? 2. Or should the routing process be <a> rather than <nuxt-link> ? 回答1: What is the correct use of 'style scoped'? The <style scoped></style> notation is not ambiguous, as the scoped attribute suggests, all the CSS elements

问题 Im using Nuxt.js, and have a custom component. This component has css in the component that sets a background image using css. I've tried the following but I get an error when I run this. The error is: invalid expression: Invalid regular expression flags in Component <template> <section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"> <div class=""> <div class="hero-body"> <div class="container"> <h1 class="title"> {{ result }} </h1> <h2

问题 Im using Nuxt.js, and have a custom component. This component has css in the component that sets a background image using css. I've tried the following but I get an error when I run this. The error is: invalid expression: Invalid regular expression flags in Component <template> <section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"> <div class=""> <div class="hero-body"> <div class="container"> <h1 class="title"> {{ result }} </h1> <h2

问题 As you know, nuxtjs is server side rendering and there is no good example how to store data into localstorage which is client side. My work is need to build login form where user can put username and password into the form the send it to server (via api) to check, if login data is correct, the api will return one token key then I will store this key to verify is user is authen and use it with other api. I found some example but build with vuejs here https://auth0.com/blog/build-an-app-with

问题 As you know, nuxtjs is server side rendering and there is no good example how to store data into localstorage which is client side. My work is need to build login form where user can put username and password into the form the send it to server (via api) to check, if login data is correct, the api will return one token key then I will store this key to verify is user is authen and use it with other api. I found some example but build with vuejs here https://auth0.com/blog/build-an-app-with

问题 I get an error porting from Vue.js to Nuxt.js. I am trying to use vue-session in node_modules . It compiles successfully, but in the browser I see the error: ReferenceError window is not defined node_modules\vue-session\index.js : VueSession.install = function(Vue, options) { if (options && 'persist' in options && options.persist) STORAGE = window.localStorage; else STORAGE = window.sessionStorage; Vue.prototype.$session = { flash: { parent: function() { return Vue.prototype.$session; }, so,

问题 I'm new to js, vue & nuxt so quite confused about what is the correct and best way to import a script / module / component into an HTML page and run it. For example, I know that this works with an event listener in the js script: <template> <div> <button id="importJS">Go!</button> </div> <template> <script src="~/index.js"></script> But is something like this better?: @import "~/index.js" <template> <div> <button id="importJS">Go!</button> </div> <template> And / or should only the main

问题 I'm currently maintaining a production Nuxt.js Vue app that integrates GraphQL Apollo Client that's running into page render errors. For the sake of boosting my chances of getting a response, I built a bare-bones code example that showcases only the problem we are running into. Thanks everybody. Source Code Client, https://github.com/sgarcia-dev/error-apollo-client-nuxt Server, https://github.com/sgarcia-dev/error-apollo-server The Problem The problem, is that every now and then, the GraphQL

问题 I have a Nuxt project, in nuxt.config.js file, I have a function like this: generate: { async routes() { function postRoutes() { return axios .post('https://my-server.com/api/posts') .then((r) => r.data.map((post) => { // I log post data here, it exist console.log(post) return { route: `post/${post.id}`, payload: 'post' } })) } const response = await axios .all([postRoutes()]) .then(function (results) { const merged = [].concat(...results) return merged }) return response } }, Then, in pages