Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

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"/>
```ts const items = ref<NavigationMenuItem[]>([...

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 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'
I am developing a nuxt module, so the issue may be how things are being bundled. I’m not sure how to troubleshoot further....

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...

Styling Dropdown

How do I style the dropdown?

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....

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...

Nuxt UI's defineShortcut

does anyone know this Alt + S won't work?
No description

installing nuxt with err

The error is caused by losing a bindings: ```sh │ ERROR Failed to load native binding │ at Object. <anonymous> (D:\nuxt\nuxt3-awesome-starter-2\node_modules.pnpm\oxc-parser@0.71.0\node_modules\oxc-pa… │ at Module._compile (node:internal/modules/cjs/loader:1255:14)4)...

NuxtUI Form doesn't trigger submit

I've got a form to create a new data structure in the db, but the submit handler is not being activated. Here's the nuxt page source: https://gist.githubusercontent.com/partap/6a387488bd8927e7a197da043bc8e454/raw/479d5151e2d6d03f0936dc4943d7787d2715652a/new.vue...

The "name" argument must be specified

Im not sure if this post is important to mention https://discord.com/channels/473401852243869706/1085221993357508658 I am still getting this error, on node 18 i cant use the current version of nuxt content cause it says it needs node 20 or 22. but when i upgrade node i get the "The "name" argument must be specified" error. I need nuxt content for my project, what can i do else?...

UInputNumber edit the way the number is displayed?

I'm using the UInputNumber component but I want to use NumberFlow to display the numbers within is this possible or not to display the number in a custom manner like this?