Wicker Posts - Answer Overflow

Wicker

•Created by Wicker on 11/19/2024 in #❓・help

Dynamic v-model with component :is

Hello i have this use case in my mind. Let's assume i have a list of components like this ( For context this is a modal with customer info reviews, product bought etc)

  const componentMap = {
    Products: ProductsPage,
    Reviews: ReviewsPage,
     etc...
  };

  const componentMap = {
    Products: ProductsPage,
    Reviews: ReviewsPage,
     etc...
  };

And use component :is like this

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:dynamicKey="data"
    />

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:dynamicKey="data"
    />

What i have in mind is if it would be possible to make the v-model key dynamic depending on the component for example after refactoring the componentMap

  const componentMap = {
    Products: {component:ProductsPage,modelKey:"products",values:products.value},
    Reviews: {component:ReviewsPage,modelKey:"reviews",values:reviews.value},
     etc...
  };

  const componentMap = {
    Products: {component:ProductsPage,modelKey:"products",values:products.value},
    Reviews: {component:ReviewsPage,modelKey:"reviews",values:reviews.value},
     etc...
  };

Atm i have all the v-models which it works but idk if it is the best approach

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:products="productData"
   v-model:reviews="reviewData"
    />

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:products="productData"
   v-model:reviews="reviewData"
    />

5 replies

NNuxt

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

Get the list of modules on runtime

This is going to be a newbie question, but is it possible ( from client or server side) to get the list of used modules ( from inside nuxtConfig )? I think i know the answer that it's only available during build time. I tried in server using useRuntimeConfig() tried useNuxtApp() in client side Both to no avail. Is there an alternative?

5 replies

NNuxt

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

Building a custom made nuxt 3 module

Hello people have a quick question which i'm not sure about and dont even know how to check. I'm trying to build a custom nuxt 3 module using this guide https://nuxt.com/docs/guide/going-further/modules On how to build guide it references *While building your module can be useful in some cases, most of the time you won't need to build it on your own: the playground takes care of it while developing, and the release script also has you covered when publishing. * The case is that i'm not publishing to npm and i want to use the module only for my own project. However when i deploy the main app ( with the module inside ) it seems everything works fine. So does that mean nuxt does that on it's own when building the main app or do i have to add a command to build the module before using?

5 replies

NNuxt

•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