Referencing css variables directly in app.config.ts
Hello Kapa
I have a neutral palette defined in my custom theme under
assets/themes/default.css where i want to map neutral to a custom palette so i checked there does not seem to be a --ui-neutral in https://ui.nuxt.com/getting-started/theme#theme where it mentions "This is how the @theme is generated for each color alias:"
so inconvenient but fine i mapped the full -50 to -950 mapping using the tailwind color vars...Custom hook to emit/broadcast message
Hello Kapa
I want to emit/broadcast a message to all my components when my user click on a specific button of a page.
I found this : https://nuxt.com/docs/guide/going-further/events, but it looks like it's only with pre-defined hooks that happen at specific moments.
How can I broadcast just a very simple event that all my components can listen to ?...
useFetch() and watch reactivity
I got a lack of reactivity on a useLazyFetch call:
```js
// lazy fetching, but doesn't refresh automatically on its reactive sources from query part
const { refresh } = useLazyFetch(...
afterResponse and beforeResponse hook doesnt trigger on API call
these hooks, doesnt triggered on API call, only work when user visit on browser
```
nitroApp.hooks.hook('beforeResponse', (event) => {
consola.info('on before response', event.path)
})...
Nuxt useHead TypeError
I created an issue on GitHub 2 months ago, but besides two likes I didn't get an answer.
Maybe here can somebody help with this problem.
Here's the link to the issue and a reproduction:
https://github.com/nuxt/nuxt/issues/31764
Thank you!...
When I select a new date, the button does not reflect the new date - it stays as today's date.
<FormFieldWrapper title="Prize Deadline" description="When is the closing date for this prize?">
<UFormField name="spec">
<UPopover>
<UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
{{ formattedCalendarDate }}...
Property does not exist on type '{}'
I have these errors in my template on all my components even though the variables exist
Nuxt UI prop
I am trying to make item labels in NavigationMenu component (Nuxt UI Free) bigger. But it doesn't work for me, so I tried debugging with Button element:
<UButton :ui="{ label: 'text-3xl' }">Test Button</UButton>
Why this doesn't work?...
Adding css programatically via a module
I would like to add a couple lines of css via my module. What is the best approach here?
I thought I could do something like:
```
nuxt.options.css.push('.nuxt/assets/styles.css');...
[iOS] Has anyone successfully implemented StoreKit External Link Account API in a Vue + Capacitor ap
Hello everyone,
I’m developing a hybrid app using Vue.js with Capacitor (v6.x) and need to comply with Apple’s new requirements for Reader Apps by implementing the External Link Account API (StoreKit 2) on iOS.
What I’m trying to do:...
Send back full external API response from Nitro handler.
I'm sending requests to a Laravel backend from a Nuxt frontend. Both apps (Laravel and Nuxt) are implementing the Precognition protocol for form validation, but the data model that the backend expects is different from the one the frontend uses.
The issue I'm facing is that precognition requests, when failing, include errors and headers that the frontend library (we're using
nuxt-precognition) needs to correctly display the form errors. Is there a way to force Nitro to return the exact same headers and response body when the Laravel Precognition middleware returns a 422 ?
I tried the following code which got me close but the Nitro docs specifically state that it won't work, so I'm not surprised. Just wondering if there's another way to make it work ?...
Nuxt UI Pro Startup License
Hi there, I have a couple of questions before our company proceeds with purchasing the Startup Plan for Nuxt UI Pro:
- Are we allowed to change the developers over time (e.g., if someone leaves the team and a new developer joins)?
- Our private GitHub repository may occasionally have more than 5 collaborators. Will this affect the validity of the Startup Plan, or is the limit only applied to the number of developers accessing Nuxt UI Pro resources?...
CLI commands
So I want to occasionally run CLI commands to pull the latest videos from my YouTube channel, and create content entries with each video.
What would be the best way to do this? I did create a simple JS script, but wondered if there was something more Nuxt native?
I come from the Laravel world, where everything is an artisan command away...
Why is opening this modal causing my entire page's contents to shift to the left by a fix pixels?
```vue
<UModal>
<UButton color="secondary" variant="ghost" size="xl" class="font-bold cursor-pointer">
Login
</UButton>...
nuxt ui link
<p class="text-sm text-muted">
Suggestions: <NuxtLink to="#">Account</NuxtLink>,
<NuxtLink to="#">Support</NuxtLink>,
<NuxtLink to="#">Account</NuxtLink>
</p> hi kappa, how do i ensure in this scenario that the nuxtlinks are still styled properly as nuxt links with their default color and hover effects etc when they're inside a p tag?...
Nuxt Content queryCollection not found
const { data: prizes } = await useAsyncData('prizes', () => {
return queryCollection('prizes').order('date', 'ASC').all()
})
Cannot find name 'queryCollection'.ts-plugin(2304)...
Why is my custom badge colour not being reflected when I use the custom badge?
```ts
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({...
Nuxt UI consistent theme during page reload
Hello everyone,
This might be a silly question but I'll ask it anyway.
So I've been using Nuxt UI for quite a while now and something that fascinates is how the themes are handled on the Nuxt UI documentation website. When you select a primary color and a neutral color it remains the same even when you hard reload the page and the page is still being server rendered.
I've gone through the code implementation and I noticed that it's being handled by two components
ThemePicker.vue and ThemePickerButton also there is a theme.ts plug-in....