nuxt.js

问题 I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that? Possible ways I can think of: Vuex Store - set baseURL for the images and then use in components env - use environment variable to set the cdn URL TIA 回答1: You can set it via publicPath property in nuxt.config export

问题 I have a simple BasePreviewImage component that needs to fetch an Array.Buffer() asynchronously from an internal API. However, it appears that async fetch() is called for every instance ever created despite the components themselves being destroyed. Example: <template> <div class="image-container"> </div> </template> <script lang="ts"> import { Vue, Component, Prop } from 'nuxt-property-decorator' @Component({}) export default class BasePreviewImage extends Vue { @Prop({ type: String }) id:

问题 Trying to improve my google score and google is telling me to use preload on the two custom fonts i'm using to save a whopping 4.5 seconds? currently the fonts are stored in assets/fonts and then being loaded as @font-face in typography.scss file when is then loaded in the nuxt.config.js file inside css: [ '@/assets/scss/typography.scss', ] 回答1: So I guess you are asking how to preload a font? There is a way to call a render function in nuxt.config.js that will preload fonts, and scripts and

问题 I have configured axios plugin onRequest helper to set Authorization header on API requests like below 1. export default function({ $axios, redirect, app, store }) { 2. $axios.onRequest(config => { 3. var requestURL = config.url; 4. console.log("Making request to " + requestURL); 5. const token = store.state.user.account.token; 6. if (token) { 7. config.headers.common["Authorization"] = `Bearer ${token}`; 8. console.log("Added authorization header"); 9. } 10. }); This onRequest helper get

问题 I'm trying to run nuxt application in docker container. In order to do so, I created the following Dockerfile: FROM node:6.10.2 RUN mkdir -p /app EXPOSE 3000 COPY . /app WORKDIR /app RUN npm install RUN npm run build CMD [ "npm", "start" ] However, when I build the image and run the container ( docker run -p 3000:3000 <image-id> ) I get nothing while hitting localhost:3000 in my browser. What could be the cause? 回答1: The application inside Docker container by default is accepting network

问题 I am new to Nuxt or any sort of node stuff.I m trying to create different environment for different cases, e.g. If I want to test my app, I want the block of dev object to run (pointing to dev endpoint) etc, following is a example [ prod: { server: www.mysite.com, api: 'www.jsonplaceholder.com/' }, dev: { server: www.internal-mysite.com, api: 'www.jsonplaceholder.com/' } ] so when I do npm run dev , it run the app with those endpoints I know that .env won't allowed objects or array so I

问题 Hi everybody and sorry my english. I have created a nuxt.js project with Tailwind. I´d like to custom my font family, so I downloaded some font files from Google Fonts. I have been reading Tailwind docs, but i can´t understand where do i have to place the font files and how to config Tailwind for loading the files. I´d be very gratefull if somebody could help me. 回答1: I'm assuming you're using the module @nuxtjs/tailwindcss. First, you'll have to run npm run build , so that tailwind files are

问题 Hi everybody and sorry my english. I have created a nuxt.js project with Tailwind. I´d like to custom my font family, so I downloaded some font files from Google Fonts. I have been reading Tailwind docs, but i can´t understand where do i have to place the font files and how to config Tailwind for loading the files. I´d be very gratefull if somebody could help me. 回答1: I'm assuming you're using the module @nuxtjs/tailwindcss. First, you'll have to run npm run build , so that tailwind files are

问题 let's say I had this block of route, so far I only knew that middleware could be assigned through nuxt-config.js (globally) or per route (independently) pages - index.vue - goSomeWhere.vue - goThisWay.vue - admin - index.vue - goThere.vue - goHere.vue I want to assign a middleware just for every /admin routes, so is there another approach that might be suitable for me? 回答1: Certainly the most concise way to verify a block of routes is to use a global middleware that targets any route starting

问题 How I can use asyncData in layout or component ( forbidden apparently ) ? Because my sidebar component is used in default layout, and I need to use asyncData to display data from backend. And if I use Vuex to fetch data... I don't know how I can fetch this with global on every page. My layout component annotation: @Component({ components: { LeftDrawer }, async asyncData({ app }) { const latestPosts = await app.$axios.get(`/posts/latest`); return { latestPosts: latestPosts.data, }; } }) 回答1: