nuxt

问题 How can I add dynamically content to the head in Nuxt on server side? I was trying to rewrite this module here which supports only static id's: https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/index.js (My id is coming from the store (The store is fetching the id from a rest call)) This is the function which is adding the content to the head: export default function addheadcode(head, id) { const options = { id: id, layer: 'dataLayer', pageTracking: true,

问题 I've been getting this error after installing nuxtjs module. I have tried every trick in the book to fix it, but seems like nothing is working.Added more information. [vuex] duplicate namespace auth/ for the namespaced module auth I've been frustrated with it. auth: { plugins: [{ src: '~/plugins/axios', ssr: true }, '~/plugins/auth.js'], vuex: { namespace: 'auth' }, strategies: { local: { endpoints: { login: { url: "login", method: "post", propertyName: "meta.token" }, user: { url: "me",

问题 I am trying to build a Master Detail View where list and detail are shown side by side on desktop but on different pages on mobile as shown in the image below I may have between 500 to 10000 items on the list to display I simulated both approaches with 10000 items, feel free to change the number in server/app.js file When I click on an item in the list, I want the URL to change so that I click back button I go to the previous button. The page should not reload for doing this and it should be

问题 I'm using CSS Modules with Nuxt and have run into some issues when trying to import a stylesheet in my js. If I import my stylesheet directly into the... `<style module> @import './index.css'; </style>` ...everything works as expected. In my particular case I need to run a computed property to choose between two different stylesheets so instead of importing through the <style module> I need to import into <script> and implement the styles like so: <script> import foo from './index.css' export

问题 I just want to be able to call {{ globalThing(0) }} in templates, without needing to define globalThing in each .vue file. I've tried all manner of plugin configurations (or mixins? not sure if Nuxt uses that terminology.), all to no avail. It seems no matter what I do, globalThing and this.globalThing remain undefined. In some cases, I can even debug in Chrome and see this this.globalThing is indeed defined... but the code crashes anyway, which I find very hard to explain. Here is one of my

问题 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 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

问题 Trying to create a project in Nuxt and typescript. However the documentation it's very poor and I hit a lot of issues. Somehow was able to solve most of them, but stacked on an issue with the store . Based on the Nuxt documentation every file inside the store directory is transformed to a module. To organize better my project I decided to add a subfolder inside store folder. However after this change my components are having issues with calling Mutation , Action and getting values from the

问题 I'm working with Nuxt and would like to display a video in a carousel component along side jpeg and png images I have in the static folder . You can see the static folder contents in the screenshot. The carousel component: <template> <section> <v-card class="mx-auto" color="#26c6da" dark max-width="1200" > <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item> </v-carousel> </v-card> </section> </template> <script> var cache = {}; // const images =

问题 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