Nuxt•2mo ago

Auto import server utils

Is there any to have server/utils/** auto imported in the server side? I've tried to modify the nuxt config imports.dir as well as creating a custom module that calls addServerImportsDir but neither seem to have an effect.

10 Replies

dmarr•2mo ago

https://nuxt.com/docs/guide/directory-structure/server#server-utilities

Nuxt

server/ · Nuxt Directory Structure

The server/ directory is used to register API and server handlers to your application.

bnason•2mo ago

Yea I've looked at that, as far as I can tell it doesn't say anything about importing for the utils ddir

dmarr•2mo ago

You can add more helpers yourself inside the ~/server/utils directory.

Does that not auto import for you on the server? seems like ts complains, but the exports are indeed auto-imported

bnason•2mo ago

hmm, no it does not auto import, let me try to remove my custom imports dir setting and module and double check Yea I get a 500 error when trying to use the function exported from a file in my ~/server/utils dir

dmarr•2mo ago

what kind of file is it? are you using named exports?

bnason•2mo ago

useFetchTime.ts and yes, export const useFetchTime => ...

dmarr•2mo ago

check if its in .nuxt/dev/index.mjs also restart your server if you haven't tried that because it does work, i just verified it

bnason•2mo ago

this is whats in my file

import { useFetch } from 'nuxt/app'
import { ref } from 'vue'

export const useFetchTime = () => {
    const start = ref<DOMHighResTimeStamp | undefined>()
    const time = ref<number | undefined>()

    const fetchOptions: Pick<NonNullable<Parameters<typeof useFetch>[1]>, 'onRequest' | 'onResponse'> = {
        onRequest({ request, options }) {
            start.value = performance.now()
        },
        onResponse({ request, response, options }) {
            const now = performance.now()
            if (start.value) {
                time.value = start.value - now
            }
        },
    }

    return { start, time, fetchOptions }
}

import { useFetch } from 'nuxt/app'
import { ref } from 'vue'

export const useFetchTime = () => {
    const start = ref<DOMHighResTimeStamp | undefined>()
    const time = ref<number | undefined>()

    const fetchOptions: Pick<NonNullable<Parameters<typeof useFetch>[1]>, 'onRequest' | 'onResponse'> = {
        onRequest({ request, options }) {
            start.value = performance.now()
        },
        onResponse({ request, response, options }) {
            const now = performance.now()
            if (start.value) {
                time.value = start.value - now
            }
        },
    }

    return { start, time, fetchOptions }
}

im wonddering if there is some hidden error? I'm not getting anything in build or vscode

dmarr•2mo ago

you wouldn't use reactive variables or useFetch on the server that looks like you'd want to put it in ~/composables and not use it on the server you could also use a plugin: something like:

defineNuxtPlugin(() => {
  const timedFetch = $fetch.create(...)
  return { provide: { timedFetch } }
})

defineNuxtPlugin(() => {
  const timedFetch = $fetch.create(...)
  return { provide: { timedFetch } }
})

then you could use useNuxtApp().$timedFetch to do your calls

bnason•2mo ago

grr im on a call and working on multiple things and got them mixed up, 1 sec let me get organized real quick lol yea i just have the dumb apparently. I was putting a client composable in the server utils ... all I can say is its friday...

Gaming

Programming

Auto import server utils