JuanMCe Posts - Answer Overflow

JuanMCe

•Created by JuanMCe on 5/9/2025 in #❓・help

navigateTo inside useAsyncData

I have this request in my SPA component:

const { data: product } = await useAsyncData('product-id', async () => {
  try {
    const response = await getProductById(1)
    return response.data;
  } catch {
    return await navigateTo({ name: 'not-found' });
  }
});

const { data: product } = await useAsyncData('product-id', async () => {
  try {
    const response = await getProductById(1)
    return response.data;
  } catch {
    return await navigateTo({ name: 'not-found' });
  }
});

When I trigget tha navigateTo on the catch, the browser stills throws an error: TypeError: Cannot read properties of undefined (reading 'type') which comes from this line const productType = computed(() => product.value.type); I am assuming that the page is being mounted before the navigateTo runs but I don't understand why because the error does not happen if the request is successfull.

9 replies

NNuxt

•Created by JuanMCe on 4/10/2025 in #❓・help

middleware on nested routes

I have an admin/ route with its index.vue page and algo nested routes: admin/users admin/users/[id] I added a middleware in the root admin page but the nested routes don't inherit the middleware

15 replies

NNuxt

•Created by JuanMCe on 1/14/2025 in #❓・help

Typescript error importing vue components in .ts files

5 replies

NNuxt

•Created by JuanMCe on 1/7/2025 in #❓・help

external library overriding component scoped classes in style

I have a modal component with scoped style like this

<style lang="scss" scoped>
  .modal-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: auto;

    .modal-container {
      position: relative;
      max-width: 634px;
...

<style lang="scss" scoped>
  .modal-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: auto;

    .modal-container {
      position: relative;
      max-width: 634px;
...

I was asked to integrate a library (via html script) that has an internal modal. That library for some reason clashes with my component classes (modal-wrapper and modal-container) The computed styles are both the library and component mixed together (like it's treating the component styles as global)

8 replies

NNuxt

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

Redirect inside asyncData

I want to redirect to a named route inside asyncData, my nuxt project is ssr: false I have something like this in my Page component:

async asyncData({ store, params, query, $axios, redirect }) {
  // ...some logic
  if (purchaseTransaction.status === 'confirmed') {
      redirect({
        name: 'exchange-status',
        params: { id: purchaseTransaction.exchange.id },
      });
  } 
// ...more logic

async asyncData({ store, params, query, $axios, redirect }) {
  // ...some logic
  if (purchaseTransaction.status === 'confirmed') {
      redirect({
        name: 'exchange-status',
        params: { id: purchaseTransaction.exchange.id },
      });
  } 
// ...more logic

I have a router.js file I use to extend some routes with extendRoutes in my nuxt config. My route is defined like this:

  {
      path: '/estado-canje/:id',
      name: 'exchange-status',
      component: resolve(__dirname, 'pages_ignore/exchange/status.vue'),
    },

  {
      path: '/estado-canje/:id',
      name: 'exchange-status',
      component: resolve(__dirname, 'pages_ignore/exchange/status.vue'),
    },

I get redirected to my home instead and I get this error in the browser console: [vue-router] Route with name 'exchange-status' does not exist I can enter the route directly without problems but I have no idea why redirect doesn't work

2 replies

NNuxt

•Created by JuanMCe on 9/18/2024 in #❓・help

Same component for two routes breaks layout

2 replies

Gaming

Programming