scrongly Posts - Answer Overflow

scrongly

•Created by scrongly on 11/16/2024 in #❓・help

Trouble with multiple pinia actions inside useAsyncData

I want to fetch a bunch of paginated data on pageload, so I use useAsyncData to avoid dupe requests. I get that you're not really meant to use useAsyncData for side-effects but since it's the only mechanism I know of that prevents duplicate fetches, it's what I got. The problem is, when I generate an array of requests to pass into a Promise, the function stalls. It's not that the reqs array is undefined - it's that nothing runs past it inside that function. asyncData simply returns null before ever reaching the Promise.

const { data } = await useAsyncData('overview', async () => {
    await FETCH_OVERVIEW('ideas');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)); // <-- FETCH_IDEAS_BY_THEME is not being read and the function stalls here
    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);
    if (filters.length) {
        reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    await Promise.allSettled(reqs);

    return { filters };
});

const { data } = await useAsyncData('overview', async () => {
    await FETCH_OVERVIEW('ideas');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)); // <-- FETCH_IDEAS_BY_THEME is not being read and the function stalls here
    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);
    if (filters.length) {
        reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    await Promise.allSettled(reqs);

    return { filters };
});

What am I doing wrong?

6 replies

NNuxt

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

Cannot start nuxt: EMFILE: too many open files

Keep getting this error on a fresh install of nuxt 3 and storyblok using the storyblok starter. I've never seen this error before. The codebase has no pages, no plugins (aside from SB and tailwind, which came with it), no composables etc. First time seeing such an error while working with Nuxt or SB. Has anyone encountered this before?

14 replies

NNuxt

•Created by scrongly on 8/21/2024 in #❓・help

Element ref() returning undefined when called in onMounted() after route update [SSR]

This is a long story that involves nuxt/I18n and FormKit, but I have finally found the culprit and realised that perhaps I have a gap in my understanding of refs and reactivity. reproduction here: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-xnuzhm?file=pages%2Findex.vue You'll need to use the browser console to see what's happening and click the button after changing locales. Here's what I don't understand: - When the component is mounted initially, the value of a template element ref is returned just fine. This checks out, so far so good. - When switching locales, the onMounted() hook is called again, however this time the same ref returns undefined. What's happening here? Is onMounted() being called before the component has re-hydrated? And here's another weird behavior that may or may not be formKit-specific, but I'm mentioning because I've not been able to re-create it any other way. Here's what happens on locale change - Change locale. Trigger a function (on click, so not immediately in onMounted) that grabs a formkit node. Returns undefined. Weird. - Change locale again (a minute or an hour later, doesn't matter). Suddenly that formkit node value is being returned even though the method that grabbed it was called a long time ago. It's almost like the component needs to be re-rendered twice to get the right ref values. Could someone shed light on what's happening under the hood here? I've been scouring reactivity docs but still can't wrap my head around this.

1 replies

NNuxt

•Created by scrongly on 5/30/2024 in #❓・help

@nuxt/eslint randomly marking newly added util functions as undefined when auto-imported in .js file

Experiencing some very odd behavior with @nuxt/eslint and autoimports. I have a pinia .js store file that calls auto-imported util functions in its actions. All of them are absolutely fine, except for the functions I added today. To test if it was me, I added a noOp function to the util file, called it in the pinia store file, and sure enough it's undefined.... But the other functions are defined and the code runs exactly as it should. I haven't changed my eslint config, or my vscode config. Anyone else dealt with this? It's madenning. here's my config, for reference:

import withNuxt from './.nuxt/eslint.config.mjs'
import eslintConfigPrettier from 'eslint-config-prettier'

export default withNuxt(eslintConfigPrettier, {
  rules: {
    'no-console': 'off',
    'vue/multi-word-component-names': 'off',
    'no-unused-vars': 'off', // should be turned on once codebase refactored
    'unused-imports/no-unused-vars': 'off', // should be turned on once codebase refactored
    'vue/require-default-prop': 'off', // should be turned on once codebase refactored
    'vue/no-v-html': 'off', // should be turned on once codebase refactored
  },
})

import withNuxt from './.nuxt/eslint.config.mjs'
import eslintConfigPrettier from 'eslint-config-prettier'

export default withNuxt(eslintConfigPrettier, {
  rules: {
    'no-console': 'off',
    'vue/multi-word-component-names': 'off',
    'no-unused-vars': 'off', // should be turned on once codebase refactored
    'unused-imports/no-unused-vars': 'off', // should be turned on once codebase refactored
    'vue/require-default-prop': 'off', // should be turned on once codebase refactored
    'vue/no-v-html': 'off', // should be turned on once codebase refactored
  },
})

1 replies

NNuxt

•Created by scrongly on 4/22/2024 in #❓・help

Best way to detect hydration completion

I know nuxt provides useNuxtApp().isHydrating, but what's the best way to detect when this value returns false? I've tried wrapping a component in <ClientOnly> , then adding a computed prop for isHydrating and watching that computed, but the watcher never fires even though isHydrating returns true in the onMounted hook. What is a reliable way to detect when hydration is complete?

8 replies

NNuxt

•Created by scrongly on 3/7/2024 in #❓・help

Modifying the .output directory after pre-rendering routes

Hey gang, I'm in the process of migrating a Nuxt 2 build that uses storyblok with a complex directory structure for the backend. The existing build runs some logic on the generate.done() hook that loops over the .dist folders and copies some of them into new folders depending on the path. I've got as far as fetching and pre-rendering all the routes from storyblok, but I've no idea how to edit them after the fact since Nuxt no longer has a generate() hook. Here's a shortened example of the current logic (Unfortunately I cannot create a working demo as this is Work work):

// in nuxt.config.js
export default {
  hooks: {
    generate: {
      async done(builder) {
        let srcDir = `${builder.nuxt.options.generate.dir}/work-with-us/`
        let destDir = `${builder.nuxt.options.generate.dir}/`

        if (!fs.existsSync(destDir)) {
          fs.mkdirSync(destDir, { recursive: true })
        }

        ncp(srcDir, destDir, function (err) {
          if (err) {
            return console.error(err)
          }
        })
      }
    }
  }
}

// in nuxt.config.js
export default {
  hooks: {
    generate: {
      async done(builder) {
        let srcDir = `${builder.nuxt.options.generate.dir}/work-with-us/`
        let destDir = `${builder.nuxt.options.generate.dir}/`

        if (!fs.existsSync(destDir)) {
          fs.mkdirSync(destDir, { recursive: true })
        }

        ncp(srcDir, destDir, function (err) {
          if (err) {
            return console.error(err)
          }
        })
      }
    }
  }
}

Hopefully you get the idea. How do I do something similar in Nuxt 3? I've scoured the docs but I'm not really sure what I'm looking for so I would be grateful for any nudge in the right direction!

1 replies

Gaming

Programming