Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Property does not exist on type '{}'

I have these errors in my template on all my components even though the variables exist
No description

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:...
No description

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

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