nuxt.js

问题 I am currently trying to convert a VueJS page to NuxtJS with VueJS. Unfortunately I have some problems with authenticating the user and I can't find a solution in Google. I only use Nuxt for the client. The API is completely separate in express and works with the existing VueJS site. In Nuxt I send now with the Auth module a request with username and password to my express Server/Api. The Api receives the data, checks it, and finds the account in MongoDB. This works exactly as it should. Or

问题 I have a simple data table using Vuetify data table. One of the column is a createdOn (date time), I want to format it. How can I do it ? <template> <v-layout> <v-data-table :headers="headers" :items="logs"> </v-data-table> <v-layout> </template> <script> headers: [ { text: "Time", value: "createdOn", dataType: "Date" }, { text: "Event Source", value: "eventSourceName" }, { text: "Event Details", value: "eventDetails" }, { text: "User", value: "user" } ], items: [], </script> 回答1: You should

问题 Well, I'm starting with nuxt and I have following routes: /home /dashboard /login I want to protect the /dashboard, but only for users logged in with a token in localStorage . The simplest way I thought of doing this was by creating a /middleware/auth.js export default function () { if (!window.localStorage.getItem('token')) { window.location = '/login' } } and registering it in the /dashboard/index.vue component. <script> export default { middleware: 'auth', } </script> But I cannot access

问题 I want to use gsap in combination with ScrollMagic. ScrollMagic is already implemented and it works fine, but when I want to use animation.gsap i get the error These dependencies were not found: * TimelineMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js * TweenMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js Therefore I installed gsap via npm npm i gsap and imported TimelineMax and TweenMax if (process.browser) { const sm

问题 I am using a Nuxt.js + Vuetify.js project Looking at the file assets/style/app.styl we have // Import and define Vuetify color theme // https://vuetifyjs.com/en/style/colors @require '~vuetify/src/stylus/settings/_colors' $theme := { primary: $blue.darken-2 accent: $blue.accent-2 secondary: $grey.lighten-1 info: $blue.lighten-1 warning: $amber.darken-2 error: $red.accent-4 success: $green.lighten-2 } // Import Vuetify styling @require '~vuetify/src/stylus/main' .page @extend .fade-transition

问题 I would like to integrate express app that generated with express generator into my nuxt.js application. I found one https://github.com/nuxt-community/express-template but its integrated only simple express application. Can anyone give me proper tutorial for express application (generated with express generator) with nuxt.js 回答1: I add NUXT to my Express.js Application recently, here is my setup example. https://github.com/iampaul83/express-nuxt NUXT.js x Express.js 1. express generator and

问题 I would like to have the routing of nuxt.js fully dynamic, because I can't predict the user and his preferences about the amount of levels he would like to have. So one user would create a page like this: http://localhost/parent/level-1/level-2/ And some other would do it like this: http://localhost/parent/level-1/level-2/level-3/level-4/level-5/level-6/level-7/ Is there a way that nuxt.js will work with this infinite nested routing? 回答1: You should just be able to make a single file: pages/_

问题 My URLs have double colon on them. I push a path to Nuxt router which has : as a part of it. export default { router: { extendRoutes (routes, resolve) { routes.push({ name: 'custom', path: 'towns' + '(:[0-9].*)?/', component: resolve(__dirname, 'pages/404.vue') }) } } } When I point to http://localhost:3000/towns:3 , for example, the : is translated as %3A on the URL leading to this error message: Expected "1" to match ":[0-9].*", but received "%3A2" How to revert this to : ? I tried

问题 I'm practicing NUXT and from tutorial its working well. mine fail when entering the NUXT middleware. the logic is if page is redirecting to other page it will enter middleware and fetch the result using axios. middleware/search.js import axios from 'axios'; export default function ({ params, store }) { console.log(store) return axios.get(`https://itunes.apple.com/search?term=~${params.id}&entity=album`) .then((response) => { console.log(response.data.results); store.commit('add', response

问题 Struggling a bit to set up error handling with vuex. There seems to be quite a few ways to do so and little documentation on proper error handling. I've been experimenting with four alternatives, though I haven't found a satisfying solution yet. Alternative 1 - Catching and processing errors on component in pages/login.vue: export default { methods: { onLogin() { this.$store.dispatch('auth/login', { email: this.email, password: this.password, }).then(() => { this.$router.push('/home'); })