i18n working fine in dev mode but not in production
I am using i18n latest beta version. In dev mode local everything is working as expected, translations in templates and in modules is working great. Once I push to production (vercel) none of the translations are working, only the translation property name is displayed in the templates/components/pages
nuxt content order by deep value
like
```ts
const route = useRoute()
const { data } = await useAsyncData(route.path, () => {
return queryCollection('docs')...
NuxtUI input components don't support v-model.trim?
If I use NuxtUI
UInput or UTextarea components with v-model.trim property, I get typescript error TS2353, but it's fine if I use the native <input> tag.
Object literal may only specify known properties, and modelModifiers does not exist in type {...}
The trim modifier seems to be working in the form, but I can't make the error go away......How to show full screen error page with throw createError()
Hello, I'm writing a small personal blog. The page is a server-rendered dynamic page that takes a slug as input, retrieves a post if it exists from an API service, and displays the post. Since it's not interactive and I would like posts to be readable without enabling javascript, so I'm using the .server.vue suffix. Previously, I used
throw createError() to display a fullscreen error (with error.vue) which works with client side rendering. But for some reason, it simply doesn't display anything but the surrounding page (using NuxtPage component in app.vue) when rendered on the server.
I checked the browser console and looked over the Nuxt dev tools, doesn't appear to be anything wrong there. The dev server is displaying the errors in the terminal, but that's it. New to Vue and Nuxt, appreciate any help.
Here is the setup script in question:...registerEndpoint and custom $fetch wrapper
We use the nuxt-open-fetch module, which creates a $fetch wrapper (in our csase $rentals) based on a types file.
The routes in this file are like
/api/thing/{someId}/resource, but when I use registerEndpoint in my tests, the calls still seem to both get intercepted and sent to the server, resulting in 404's.
Normally one would use registerEndpoint('/api/rest-of-route'), nut because of {someId} this doesn't work and I have to specify the resolved route (i.e http://localhost:5255/api/things/123/resource and I think nust test utils doesn't handle that properly?...In a navigation menu, how can I hide the text in mobile views and only display the icon
<UNavigationMenu :items="items" color="secondary" class="pt-1"/>
<UNavigationMenu :items="items" color="secondary" class="pt-1"/>
Using Tailwind CSS 4 within a Nuxt Module
I'm working on a Nuxt module. Does anyone know how to set up Tailwind CSS 4 within a module in order to create and expose components in the runtime folder? I understand the
@nuxtjs/tailwindcss module currently doesn't support Tailwind CSS 4, so Tailwind CSS is set up using the Vite plugin. The code I have below kinda sets up Tailwind. It applies the resets and stuff, but any classes used in components are not applied be default. I found what I consider to be a workaround which is to use the @reference directive within the <style> tag of each component (@reference '../assets/css/main.css'), but I don't know if that's the proper way of doing things.
Here's a simplified version of the module what I have so far:
```...Nuxt UI-PRO license and monorepo
Hi, the different licenses for NuxtUI PRO differ only in the number of developers that can be invited to the private GitHub repository. I’d like to ask which plan would apply to my case if I want to purchase a license. Here’s my situation: I am the only developer working on the website, but I work in a company that uses a monorepo - meaning every employee has access to the repository. In this case, am I required to purchase the 'Organization' plan even though I will be the only person actually u...
Rewriting URL
Is there anything similar to NextJS's rewrite URL function in Nuxt?
Would be great for multitenancy. More specifically, a function that just points Nuxt/the user to a different page (similar to redirect), but without actually changing the url.
Forexample: tenant.test.com/cool-site, gets routed to test.com/tenant/cool-site...
maplibre-gl bundling
I’m getting an error trying to import a page that calls
I am developing a nuxt module, so the issue may be how things are being bundled. I’m not sure how to troubleshoot further....
import { LngLat } from 'maplibre-gl' — error says:
The requested module 'maplibre-gl' does not provide an export named 'LngLat'
The requested module 'maplibre-gl' does not provide an export named 'LngLat'
nuxt scripts rybbit.io analytics custom events hit or miss.
anyone using the nuxt scripts module with rybbit? I'm self hosting rybbit and the standard page events etc work perfectly but custom events i have setup are hit or miss. on a hard refresh they won't work until i navigate to another page and back, and some still don't work.
nuxt config
// Nuxt scripts module
scripts: {
registry: {...
Nuxt Debug Named default
Hi,
I have recompiled my project today and suddenly getting an error such as:
The requested module 'http://localhost:5173/_nuxt/node_modules/debug/src/browser.js?v=46864f77' doesn't provide an export named: 'default'
...
Building vitepress and a nuxt playground
I am trying to build a vitepress docs site and also include a /demo path that includes a generated nuxt playground. Would I modify the build command or the upload command?
...
- name: Build playground
run: NUXT_BASE_URL=/nuxt-mything/ npm run build --preset github_pages
- name: Build playground
run: NUXT_BASE_URL=/nuxt-mything/ npm run build --preset github_pages
Hot-reload resets component state (What is best practice?)
Hi,
What is some best practice ways to handle state in a hybrid Nuxt3 app?
The issue...
ES Lint breaks when upgading
Hello,
If I upgrade from nuxt 3.16.2 to 3.17.4, ESLint is suddenly not available anymore in vscode
Is it a known problem ? how to fix it ?...
toRefs() error since update
Hello Kapa (or others ^^)
I have this error since I ncu -u my project :
```
toRefs() expects a reactive object but received a plain one...
formdata append not working
``ts
Array.from(data).forEach((file, index) => {
console.log(file)
formData.append(index${index}`, file)
console.log(formData)...Passing module options to runtime
When working on a Nuxt 3 module, what is the best way to expose the module's options (possibly defined in
nuxt.config.ts) to parts of the runtime code such as components and server handlers?Solution:
----------------------
To expose module options to runtime in a type-safe way in Nuxt 3, you should:
1. Define a Type for Your Module Options:
Create a TypeScript interface for your module options....
Create a TypeScript interface for your module options....
Font not loading on production build
Hey!
Recently almost finished my focus-centered clock app.
I was deploying a beta version on my domain, but came across an issue: the font file doesn't load for the icons.
I use nerdfont's webfont.css file (that I downloaded and adapted for my setup, changing the reference to the font file accordingly to
~/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2).
You can see the whole code here: https://github.com/TheDogHusky/home-clock...