bnason Posts - Answer Overflow

bnason

Explore posts from servers

NNuxt CDCloudflare Developers TtRPC KKysely

•Created by bnason on 11/18/2024 in #❓・help

Failed to resolve import "#tailwind-config"

The Nuxt TailwindCSS module docs state I can use import tailwindConfig from '#tailwind-config'. However, I get the following error when trying that: Failed to resolve import "#tailwind-config" Does anyone have any idea

4 replies

NNuxt

•Created by bnason on 11/1/2024 in #❓・help

Nuxt Devtools not working

When I open up the Nuxt Devtools I get a 404 error Page not found: /__nuxt_devtools__/client/ This is on a pretty much brand new project.

7 replies

NNuxt

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

AsyncLocalStorage server side

I've been looking at the documentation for the experimental feature asyncContext. I'm confused if this is a client side only feature or if it's supposed to work server side to? My understanding was AsyncLocalStorage was on the node side, not the browser side. I'm trying to use it in a server side util to get some data from the db with the logged in user information but useNuxtApp is undefined there. I'm not exactly sure what to use. I'm calling this from a defineEventHandler api route which I thought it should work in.

5 replies

NNuxt

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

Reference assets with domain name

Is it possible to configure Nuxt to reference assets (images, js and css) with the full URL including the domain?

6 replies

CDCloudflare Developers

•Created by bnason on 10/22/2024 in #general-help

Serve url on any subdomain

I have an app deployed at https://foo.example.com/__debug and I would like to have all urls that match /_debug/* on ANY of our subdomains (IE bar.example.com, baz.example) to be routed behind the scenes (NOT redirected) to that url. For instance, if someone goes to https://bar.example.com/__debug/cookies I want Cloudflare to basically change the backend to the foo.example.com ip and served the page really at https://foo.example.com/__debug/cookies If I were doing this in HAProxy, I would create an acl acl debug ^\/__debug/.* with use_backend foo if debug

9 replies

NNuxt

•Created by bnason on 10/17/2024 in #❓・help

[vite-node] [plugin:vite:vue]

I seem to be randomly getting the following error and I have no idea how to debug this. The component it's referencing is definitely NOT producing the error (It's from shadcn-vue)

ERROR  [vite-node] [plugin:vite:vue] [VITE_ERROR] /components/ui/tabs/Tabs.vue <br><pre>&lt;script setup lang="ts"&gt;
import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
import type { TabsRootEmits, TabsRootProps } from 'radix-vue'`
...

ERROR  [vite-node] [plugin:vite:vue] [VITE_ERROR] /components/ui/tabs/Tabs.vue <br><pre>&lt;script setup lang="ts"&gt;
import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
import type { TabsRootEmits, TabsRootProps } from 'radix-vue'`
...

1 replies

NNuxt

•Created by bnason on 10/16/2024 in #❓・help

Shared types/utils

There appears to be work on a common shared folder that can be imported/auto-imported via both Vue and the server at https://github.com/nuxt/nuxt/issues/28675 Is there a way to achieve this now in Nuxt3 by just updating my config? I understand the full implementation of this feature will have guards in place, but I just need a simple single location that is auto imported on both sides.

2 replies

NNuxt

•Created by bnason on 8/29/2024 in #❓・help

Load config from database at runtime start

Is it possible to load module configuration from a database at runtime?

1 replies

NNuxt

•Created by bnason on 8/26/2024 in #❓・help

Auto import types

How can I get types in my root types folder to be auto imported? I've tried both adding it to the nuxt imports.dirs config array as well as the nuxt config typescript.tsConfig.include array

5 replies

NNuxt

•Created by bnason on 8/23/2024 in #❓・help

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.

22 replies

NNuxt

•Created by bnason on 8/23/2024 in #❓・help

Fetch load time

Is there any way to get the time useFetch took to load the data?

5 replies

NNuxt

•Created by bnason on 8/23/2024 in #❓・help

useLogger from `@nuxt/kit` on server side

I'm trying to use useLogger from @nuxt/kit in a server side util, but I get the following:

This module cannot be importedd in server runtime. [importing @nuxt/kit from server/utils/oracle.ts]

RollupError: server/utils/oracle.ts (6:0): "useLogger" is not exported by "node_modules/unenv/runtime/mock/proxy.mjs", "imported by "server/utils/oracle.ts"

This module cannot be importedd in server runtime. [importing @nuxt/kit from server/utils/oracle.ts]

RollupError: server/utils/oracle.ts (6:0): "useLogger" is not exported by "node_modules/unenv/runtime/mock/proxy.mjs", "imported by "server/utils/oracle.ts"

Is it ONLY available in a nuxt module? Thats what the docs show as its usage. Is the setup of a nuxt module not done server side?

6 replies

NNuxt

•Created by bnason on 8/15/2024 in #❓・help

Using fetch in composable with shared results

I have a vue composable that loads an api endpoint and I want any call to my useFooData composable to return the same useFetch results so if someone calls the clear or refresh methods it appies everywhere.

2 replies

NNuxt

•Created by bnason on 8/14/2024 in #❓・help

Cannot find name 'defineNuxtConfig'

I have no why this all of a sudden started happening. I'm getting this error in my nuxt.config.ts Cannot find name 'defineNuxtConfig'. Did you mean 'defineNitroConfig'? I'm running the dev server. I've tried deleting the .nuxt and then running dev server again. I've restarted vscode as well as restarted the ts server.

5 replies

NNuxt

•Created by bnason on 8/12/2024 in #❓・help

NuxtImg data url

Does aanyone know how I could supply either the main image or the placeholder image as a data encoded image uri? On first load I'm seeing a cascade load of all the images which shifts things around. Ideally the placeholder could be embedded into the page to pre-set the spacing.

1 replies

NNuxt

•Created by bnason on 8/10/2024 in #❓・help

Dynamic config

Is there any official way to update config values during runtime? For some values, I don't want to have to restart or rebuild the app. I know I could use a DB or something but I am wondering if there is anything already built in. Perhaps using nitro storage?

2 replies

NNuxt

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

Add server imports dir from nuxt.config.ts

Is there an equivalent to the imports option in the nuxt config but for the server? There is an addServerImportsDir which I would think would mean there should be a way.

1 replies

NNuxt

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

Typing PublicRuntimeConfig

I have an array of objects in my public runtime config section that is being typed as {}[] so I added an index.d.ts file to type it correctly. Only, I lose all other inferred types for the rest of the public runtime config. Shouldn't it simply "merge" mine with the auto generated one instead? Is there any way to do that?

2 replies

NNuxt

•Created by bnason on 8/7/2024 in #❓・help

Logger help

I found this example project that implements pino in a module, however I'm not sure how it's supposed to be used outside logging the requests. https://stackblitz.com/edit/nuxt-starter-wyur1e Specifically, how is the logger used in a server side route as well as in vue setup.

1 replies

NNuxt

•Created by bnason on 7/30/2024 in #❓・help

Typing ref for $fetch

I need to create a ref that is typed for the return value of an api endpoint. I'll be updating it from a button $fetch request. I found this site Nuxt 3 server routes and Typescript that seems to give a good way to do it via an apiRef({ route: '/xx', method: 'get', defaultValue: null }) composable but it doesn't seem to be giving me the right typings. For instance, I have

const userInfo = apiRef({ route: '/api/userLookup`, method: 'post', defaultValue: null})

const doUserLookup = async () => {
  const result = await $fetch(`/api/users/${userId}`, { method: 'post', body: '{"username":"foobar"}')
  userInfo.value = result
}

const userInfo = apiRef({ route: '/api/userLookup`, method: 'post', defaultValue: null})

const doUserLookup = async () => {
  const result = await $fetch(`/api/users/${userId}`, { method: 'post', body: '{"username":"foobar"}')
  userInfo.value = result
}

Result is typed as such

const result: Simplify<SerializeObject<Response> | SerializeObject<UserLookupInfo> | undefined>

const result: Simplify<SerializeObject<Response> | SerializeObject<UserLookupInfo> | undefined>

but userInfo is typed this way

const userInfo: globalThis.Ref<{
    readonly body: {
        readonly locked: boolean;
    } | null;
    readonly headers: {};
    readonly status: number;
    readonly url: string;
    readonly ok: boolean;
    readonly redirected: boolean;
    readonly statusText: string;
    readonly type: ResponseType;
    readonly bodyUsed: boolean;
} | {
    ...;
} | null | undefined>

const userInfo: globalThis.Ref<{
    readonly body: {
        readonly locked: boolean;
    } | null;
    readonly headers: {};
    readonly status: number;
    readonly url: string;
    readonly ok: boolean;
    readonly redirected: boolean;
    readonly statusText: string;
    readonly type: ResponseType;
    readonly bodyUsed: boolean;
} | {
    ...;
} | null | undefined>

The weird thing is the userInfo.value = result does not give a typescript error. But trying to use {{ userInfo.username }} gives 'username' does not exist on ...

2 replies

Gaming

Programming