nuxt.js

问题 What is the exact difference between fetch and async data. The official documentation says the following: asyncData You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method that lets you handle async operations before setting the component data. asyncData is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route. This method receives the context object

问题 I have deployed my app on Heroku and on the start of my app I check a config file and in there I want to access a config var I have created on Heroku API_KEY to define my Firebase config: module.exports = { fireConfig: { apiKey: process.env.API_KEY, authDomain: "my-app.firebaseapp.com", databaseURL: "https://my-app.firebaseio.com", projectId: "my-project-id", storageBucket: "my-app.appspot.com", messagingSenderId: "my-messaging-sender-id" } }; this process.env.API_KEY is undefined . Should I

问题 I installed and add this code to my nuxt.config.js and it works perfectly fine. (Link to package) modules: [ ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }], ] Now I am trying to implement instead of a static ID a function which will return an ID. I tried to add this lines into my nuxt.config. js but it is not working. Obviously I have to put it somewhere else or so... This is what I tried nuxt.config.js const code = '1234567' id: () => { return 'GTM-' + code } export default { ...

问题 I'm new to nuxt.js and I want to ask if there is any way to pass data in asyncData. Here is the code. <script type="text/javascript"> import axios from 'axios' export default { data(){ return { sample: 'asdf', baseUrl: 'https://jsonplaceholder.typicode.com/posts/1' } }, async asyncData ({ params }) { let { data } = await axios.get(this.baseUrl) return { title: data} } } </script> I know you don't have access to this but is there a way to pass data. Thanks. 回答1: Usually this kind of

问题 I'm having some validation problems with vee-validate and Vuetify: I have two forms with two different scopes and both are submitted in one function. the validation is working on submit but it's not showing the input errors on the UI: The inputs with different scopes: <v-text-field id="PersonalName" v-model="PersonalName" label="Name" :error-messages="errors.collect('Name')" v-validate="'required|alpha_spaces'" data-vv-name="Name" data-vv-scope="scopePersonal" prepend-icon="face" ></v-text

问题 I have problem to get token stored by Vuex in ~/plugins/axios.js. Hope your guys take a look for me please. My Vuex: ~/store/index.js export const state = () => ({ authUser: null, token: null }) export const mutations = { SET_USER: function (state, user) { state.authUser = user }, SET_TOKEN: function (state, token) { state.token = token instance.defaults.headers = { Authorization: 'Bearer ' + token } } } export const actions = { async nuxtServerInit ({ commit }, { req }) { ... }, async login

问题 Stack: Nuxt.js + Vuetify.js Issue: Setting classes depending on breakpoint behaves abnormally Attempt: In ~/components/SubComponent.vue I want to display text with large font on small screens and over, and colorize my text in red only on small screens: <v-flex xs12 sm4 :class="{ 'display-3': $vuetify.breakpoint.smAndUp, 'red--text': $vuetify.breakpoint.xs }"> Sub component </v-flex> Output: Whenever I refresh , I see the text is red and small on small screens (my laptop). Note: I get weird

问题 How can I get the current domain name from a request on server side? My Nuxt based website is reachable from different domains. I would like to get the domain name from where the user has accessed the website. How can I do this? I tried to write a middleware for that purpose but it always displays localhost:3000 export default function({ store, req }) { if (process.server) store.commit('hostname', req.headers.host) } Any idea how to fix this issue? 来源： https://stackoverflow.com/questions

问题 I want to use scrollmagic with nuxtjs. I installed scrollmagic via npm. npm install scrollmagic In my nuxt.config.js file i added build: { vendor: ['scrollmagic'] }, And in my pages/index.vue file i simply imported it. import ScrollMagic from 'scrollmagic' But this results only in this error [vue-router] Failed to resolve async component default: ReferenceError: window is not defined [vue-router] uncaught error during route navigation: ReferenceError: window is not defined at C:\pathto\node

问题 I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax. .flowconfig [include] pages/**/.* components/**/.* layouts/**/.* apiRoutes/.* store/.* utils/.* [ignore] .*/build/.* .*/config/.* .*/dist/.* .*/node_modules/.* .*/static/.* .*/test/.* .*/ssl/.* .*/.nuxt/.* [libs] ./flow/ [options] emoji=true module.file_ext=.vue