Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

nuxt ui navigationmenu custom slot label and icon disappears

Hi i tried to add a custom slot to my navigation menu items however now only the item within that custom slot is visible and the icon and label don't appear. ``` <UNavigationMenu :items="items" class="hidden md:block"> <!-- Custom slot for help link --> <template #helpBadgeTrailing> <UBadge label="Coming soon" variant="subtle" size="sm" color="warning" />...

useFetch automatically fetching even when watch is disabled

I have the following code snippet: ```ts const wallet = useWallet(); const block = ref<number | null>(null); ...

transition not respecting z index

Hi I have a transition ``` <Transition enter-active-class="transition-all duration-300 ease-out" enter-from-class="translate-y-full" enter-to-class="translate-y-0" leave-active-class="transition-all duration-200 ease-in"...

cannot invalidate cached data using getCachedData

Hey everyone! I'm having an issue with useLazyFetch caching behavior in Nuxt 3 and could use some help figuring out the best solution. Problem Description I have a page component using useLazyFetch with a specific cache key:...

how to override vue-emoji-picker css styles to match my site?

Hi I'm using vue-emoji-picker but I want to override its background color and border color to match my nuxt ui theme colors. I tried making an emoji-picker-custom.css and including it in my nuxt config ```/* app/assets/css/emoji-picker-custom.css */ :root { --v3-picker-bg: red; }...

Nuxt-i18n language switcher

So I'm trying to setup localization for my app. Now I've used the provided setup from the docs and managed to get it working for one language. When I try to switch the language, I get a lot of warnings for missing keys in my locale messages. Which is very strange as both of the language JSONs are exactly the same. So for a test I changed the config to use the other language as default and it works, but when switching the result is the same. So this is how I setup in my nuxt.config: ``` i18n: {...

Ignore i18n cookie if directly opened an URL with a different locale

Hi! I have an Nuxt 2 project with i18n enabled and 4 locales configured. I am running into an SEO issue, where deeplink for page specific to given locale e.g. /de-DE/mypage will throw 404 when user has previously browsed using another locale. It seems, Nuxt always reads the cookie and redirects to previous locale. I tried many setup changes in nuxt.config they do not seem to have any effect even skipSettingLocaleOnNavigate : true as well. So, question is - is it possible to force locale change when user opens a link from another source that has different locale then the one browsed/saved in i18n_redirected cookie?...

Whats up with Nuxt + Shared Web Workers?

Shared Web Workers are 100% across all major browsers and Safari on IOS since 2022. But I can't find any documentation or examples on how to use SharedWorker() in Nuxt. nuxt-worker looks interesting, but it doesn't do shared workers and hasn't had a major update in a year....

How do I create routes in Nuxt UI?

I am trying to create a navigation across multiple pages/views in the Nuxt UI. How do I set up the routes globally?

Kinda lost on how to handle errors on thrown on server properly on the client

i'm doing some validation on payload of the a login api i've got using, and i check the instance of the error being thrown to get something to work with on the frontend, but its the 500 error that's being thrown instead, i'm loosing my mind
No description

changing the topic

hello everyone. please tell me, what is the best way to implement a theme change without using the colorMode module?

How to support external assets properly ?

Hello, I do have my application running properly using the ~/assets url for my embedded content and the rest in the public folder. Which is fine for my "static assets". However for my product images and such, they are uploaded in the admin by various clients. Those images are stored on S3. Previously in angular/aurelia/react and such frameworks i was not doing SSR and used a reverse-proxy nginx config to redirect anything starting with "/cdn" to "http://myapp.assets.s3-eu-west-1.amazonaws.com/"...

Huge head payload in server components

Hi! On my website I use a lot of server components for different generated markdown sections (around 20 server component requests). Problem is that each one of them looks like this (request.txt), so it has my little payload and GIANT head sections with data from nuxt seo and @nuxt/ui. Problem? WIth head: 7778 bytes, without 394, almost 20x difference. Why? Why even head is sent here, is there any option to disable it? Additionally, each request has a lot of HTTP meta, around 648 bytes. Is there any option to combine small server components? Or a better way to render a lot of markdown, for example in UAccordion FAQ page?...

net::ERR_CONTENT_LENGTH_MISMATCH when i try to open nuxt dev server on android virtual device.

i'm facing this issue for several days. vite dev server cannot accessible to android studio devices for some reason. i tried it several fresh nuxt projects and vue project, it's only happens in in nuxt 3. i dont know what is the nuance bu i hope you guys can help
No description

Nuxt UI in Vite: Icons loading issue

Hi, I have a problem in nuxt/ui integration in vite, unfortunately my client during testing let me know “Looking into this, we found that the application is trying to load the icons from different internet servers - and access to those servers is blocked when working from the office.”. So I leave with the question, how am I able to deliver the icons? I tried adding the @iconify package to package.json, but it didn't help (as far as I can see it only works for plugging into nuxt)

Nuxt 3: How to close window open javascript

How can I close a popup window when using window.open()? Step 1: Open the popup using window.open(url, "", "width=200,height=100") Step 2: After completing an action successfully in the popup, receive a Firebase notification to close the window and call an API to get the list....

Reading file from folder, but path is different in dev/prod

We have a json file that is generated on build containing our route info. In a request we read the generated file, fetch some data from the backend and return combined json. But we noticed that after deploying the app, path to the generated file is different. Is there a way to use some nuxt/nitro helper so that file location is always resolved correctly?

I want add text and icon in UTable when datas is empty

In the V2 version, I see EMpty-State but the V3 version does not see?

Is there a way to get an element from the dom as writable with typescript support

I want to retrieve a DOM element in Nuxt but the only way I've found online is using ref(null) which does not work TypeScript. Any advice as to how I can retrieve an element like such in Nuxt?

Issues with Directus Cms and Nuxt

Also, I am a bit of a beginner at directus and I am using the How to use directus cms with Nuxt, and when I run my project I am getting these erorrs ARN [Vue warn]: Failed to resolve component: UApp If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <App> at <NuxtRoot> ...