Skip Posts - Answer Overflow

Skip

•Created by Skip on 10/10/2024 in #❓・help

Nuxt 3 Modules & defineAsyncComponent

I created my own Nuxt 3 module, which i added composable to. In it, i do dynamic component imports:

return await Promise.all(
  data.value.map(async (item) => {
    return {
      data: item,
      component: defineAsyncComponent(
        async () =>
          await import(
            `~/components//${item.attributes['component-view']}.vue`
          ),
      ),
    };
  }),
);

return await Promise.all(
  data.value.map(async (item) => {
    return {
      data: item,
      component: defineAsyncComponent(
        async () =>
          await import(
            `~/components//${item.attributes['component-view']}.vue`
          ),
      ),
    };
  }),
);

But it seems that ~ is not recognized when used outside the project. How do I implement asynchronous component import in a module?

1 replies

NNuxt

•Created by Skip on 12/30/2022 in #❓・help

Nuxt 3 + Docker + Nginx = 502 bad gateway

I'm trying to run a production version of Nuxt 3 with SSR on my server. My yml config:

version: '3.7'

volumes:
  production_mongodb_data:

services:
  nginx_container:
    container_name: app_production_nginx
    image: app_production_nginx:latest
    restart: unless-stopped
    build:
      context: ./production/nginx
    links:
      - backend_container
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ../frontend/:/usr/share/nginx/html/mysite.com/frontend
  frontend_container:
    container_name: app_production_frontend
    image: app_production_frontend:latest
    build:
      context: ./production/frontend
    volumes:
      - ../frontend:/app/frontend
    ports:
      - "3050:3050"
    restart: always
    command: "npm run preview"

version: '3.7'

volumes:
  production_mongodb_data:

services:
  nginx_container:
    container_name: app_production_nginx
    image: app_production_nginx:latest
    restart: unless-stopped
    build:
      context: ./production/nginx
    links:
      - backend_container
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ../frontend/:/usr/share/nginx/html/mysite.com/frontend
  frontend_container:
    container_name: app_production_frontend
    image: app_production_frontend:latest
    build:
      context: ./production/frontend
    volumes:
      - ../frontend:/app/frontend
    ports:
      - "3050:3050"
    restart: always
    command: "npm run preview"

Part of nginx config:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2 ipv6only=on;
    server_name mysite.com;

    # Here SSL certs

   location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:3050/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2 ipv6only=on;
    server_name mysite.com;

    # Here SSL certs

   location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:3050/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

My Dockerfile:

FROM node:18-alpine

WORKDIR /app/frontend

EXPOSE 3050

FROM node:18-alpine

WORKDIR /app/frontend

EXPOSE 3050

My Docker container with frontend run app with this command:

NUXT_APP_MODE=production NUXT_PUBLIC_BASE_API_BROWSER_URL=http://localhost:3001/api/ PORT=3050 node .output/server/index.mjs

NUXT_APP_MODE=production NUXT_PUBLIC_BASE_API_BROWSER_URL=http://localhost:3001/api/ PORT=3050 node .output/server/index.mjs

But mysite.com show me 502 bad gateway error. Any ideas why it is happening?

5 replies

NNuxt

•Created by Skip on 12/29/2022 in #❓・help

Nuxt 3 in Docker and NGINX

I use nginx as a reverse proxy for my web applications. My backend and SPA are proxied perfectly. But i don't really understand how i can proxy my application on Nuxt 3 after I make a build... Can someone tell me please the approximate steps or share nginx config for production? Many thanks!

7 replies

NNuxt

•Created by Skip on 12/28/2022 in #❓・help

Nuxt 3 with Docker and Backend

I have a REST that works fine in Dev and Prod mode with SPA Vue 3. As a frontend for my application, I have chosen Nuxt 3 and am getting the following problem: 1. On the page i make a call to my API:

const { data: node, error } = await useFetch('http://localhost:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

const { data: node, error } = await useFetch('http://localhost:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

And get Error: fetch failed () if i reload browser page or if i trying to access the page directly. But if i switch to another route and come back, the call above works and I get the data. 2. I can solve this problem if instead of localhost, I specify the name of my backend container:

const { data: node, error } = await useFetch('http://my_backend_container:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

const { data: node, error } = await useFetch('http://my_backend_container:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

But now if I switch to another route and come back I get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my_backend_container:3001/api/v1/nodes/common/all. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my_backend_container:3001/api/v1/nodes/common/all. (Reason: CORS request did not succeed). Status code: (null).

I use NGINX as reverse proxy & CORS is enabled on my backend. In my dashboard Vue 3 works fine with my API. But in Nuxt 3 i get the problems described above. Please tell me what am I doing wrong?

16 replies

Gaming

Programming