Wicker Posts - Answer Overflow

Wicker

•Created by Wicker on 6/12/2024 in #❓・help

Incorrect values calling getClientBoundingRect() on mounted

Hello people hope you're having a good day Basically i have a page and a component, in that component i want to get the position of 4 items and use them in the page to place an svg and connect these items In the component i have a defineModel to store the values like this

const elements = defineModel("elements");
onMounted(async () => {

  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
});

const elements = defineModel("elements");
onMounted(async () => {

  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
});

And on the main page

onMounted(async () => {


  const start = getLandingElements.value.first.getBoundingClientRect();
  const mid = getLandingElements.value.second.getBoundingClientRect();
....

onMounted(async () => {


  const start = getLandingElements.value.first.getBoundingClientRect();
  const mid = getLandingElements.value.second.getBoundingClientRect();
....

However at first i noticed that my elements were misplaced however after a hot reload (adding a console.log) they had a different position

first load
bottom: 774;
height: 72;
left: 303;
right: 707.734375;
top: 702;
width: 404.734375;
x: 303;
y: 702;

after hot reload
bottom: 614;
height: 72;
left: 303;
right: 695.46875;
top: 542;
width: 392.46875;
x: 303;
y: 542;

first load
bottom: 774;
height: 72;
left: 303;
right: 707.734375;
top: 702;
width: 404.734375;
x: 303;
y: 702;

after hot reload
bottom: 614;
height: 72;
left: 303;
right: 695.46875;
top: 542;
width: 392.46875;
x: 303;
y: 542;

From what i read it's because onMounted stores the values before DOM has finished loading so i tried using nextTIck like this on the onMounted hook but still no difference

  await nextTick(() => {
  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
  });

  await nextTick(() => {
  elements.value = {
    first: first.value,
    second: second.value,
    third: third.value,
    fourth: fourth.value,
  };
  });

onUpdated works however it causes an infinite loop so no bueno.. So how do i fix this issue ?

1 replies

NNuxt

•Created by Wicker on 4/29/2024 in #❓・help

Nuxt proxy console log url

Hello, i''m using nuxt-proxy module to proxy some urls from my main app https://www.npmjs.com/package/nuxt-proxy I did some changes to the nuxt config app.baseURL i also have i18n installed and changed the stragety of it from "prefix" to "no_prefix" ( Example of changes below )

// Old baseUrl
  app: {
    baseURL: "/apple/iphone/"
}


// New baseURL

app:{
baseURL: "/apple/"
}

// Old baseUrl
  app: {
    baseURL: "/apple/iphone/"
}


// New baseURL

app:{
baseURL: "/apple/"
}

The old pages folder was

my-app/
├─ pages/
│  ├─ index.vue
│  ├─ twelve.vue
│  ├─ thirteen.vue

my-app/
├─ pages/
│  ├─ index.vue
│  ├─ twelve.vue
│  ├─ thirteen.vue

And now

my-app/
├─ pages/
│  ├─ [product]/
│  │  ├─ [model]/
│  │    ├─ [lang]/
│  │    ├─ index.vue

my-app/
├─ pages/
│  ├─ [product]/
│  │  ├─ [model]/
│  │    ├─ [lang]/
│  │    ├─ index.vue

So basically the request comes from the same url localhost:3000/apple/thirteen/en/auth/secretStuffHere but for some reason i seem to get back an html response from my service instead of a json ( saddly i dont have access to the logs of the service which would make my life easier) These are my proxy options

  proxy: {
    options: [
      {
        target: "https://myservice.io",
        changeOrigin: true,
        pathRewrite: {
          "^/auth/": "/auth/",
        },
        pathFilter: ["/auth/"],
        on: {
          proxyReq: (proxyReq, req, res) => {
            console.log("proxyReq", proxyReq);
            console.log("proxyReq", req);
            console.log("proxyReq", res);
            /* handle proxyReq */
          },
          proxyRes: (proxyRes, req, res) => {
            console.log("proxyRes", proxyRes);
            console.log("proxyRes", req);
            console.log("proxyRes", res);
          },
          error: (err, req, res) => {
            console.log("err", err);
            console.log("err", req);
            console.log("err", res);
          },
        },

  proxy: {
    options: [
      {
        target: "https://myservice.io",
        changeOrigin: true,
        pathRewrite: {
          "^/auth/": "/auth/",
        },
        pathFilter: ["/auth/"],
        on: {
          proxyReq: (proxyReq, req, res) => {
            console.log("proxyReq", proxyReq);
            console.log("proxyReq", req);
            console.log("proxyReq", res);
            /* handle proxyReq */
          },
          proxyRes: (proxyRes, req, res) => {
            console.log("proxyRes", proxyRes);
            console.log("proxyRes", req);
            console.log("proxyRes", res);
          },
          error: (err, req, res) => {
            console.log("err", err);
            console.log("err", req);
            console.log("err", res);
          },
        },

Is it possible to have any kind of console.log inside of the proxy to see which url is being proxied to ? I tried this as mentioned in the docs but it seems to have no effect https://github.com/chimurai/http-proxy-middleware?tab=readme-ov-file#http-proxy-events

1 replies

NNuxt

•Created by Wicker on 4/17/2024 in #❓・help

In ssr and target = static is it possible to catch a 404 error before it happens?

Hello people, for context i have a static generate sites with ssr enabled also i have an error.vue in the root of the project, Sadly the site is uploaded using nginx and i cannot change the config, if a user navigates to a link which doesnt exists for example /derp, could it be possible to catch the error before it happens and redirect him to the /error page instead of nginx error page? At the moment i tried using hooks in the config

  hooks: {
    "pages:extend"(pages) {
      pages.push({
        name: "error",
        path: "*",
        file: resolve(__dirname, "pages/error.vue"),
      });
    },
  },

  hooks: {
    "pages:extend"(pages) {
      pages.push({
        name: "error",
        path: "*",
        file: resolve(__dirname, "pages/error.vue"),
      });
    },
  },

Which makes the prerenderer fail ( Error: [500] ) Tried using the error handler plugin

  nuxtApp.hook("link:prefetch", (event) => {
    if (event.includes("/asd")) navigateTo("/");
    console.log("link", event);
  });

 nuxtApp.hook("app:error", (error) => {
    navigateTo("/error");
  });

  nuxtApp.hook("link:prefetch", (event) => {
    if (event.includes("/asd")) navigateTo("/");
    console.log("link", event);
  });

 nuxtApp.hook("app:error", (error) => {
    navigateTo("/error");
  });

And ye... Is it possible to do something like that?

1 replies

Gaming

Programming