Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Problem with show pages in menu

Friends, I have a problem loading views in my menu and front end. When I click on the menu it doesn't show me the views and when I check the terminal I have some problems that I can't understand why... I admit that it's been a long time since I started a new project with NuxtJS, maybe I missed something or I'm overlooking something... It shows me the error I share in the attached image. ```...
No description

Import Error in Server Folder

Hi - I have a nuxt3 project that I'm migrating. I have an import in the server folder that seems to want use the appDir as root when resolving a path.
[nitro 9:30:10 PM] ERROR Error: Could not load /home/king/dev/project/app//server/lib/Transcode'
[nitro 9:30:10 PM] ERROR Error: Could not load /home/king/dev/project/app//server/lib/Transcode'
My import is ```import useTranscoder from '~~/server/lib/Transcode'...

How to upgrade a Nuxt v3 project to the latest Nuxt 3 version?

I tried npx nuxt upgrade --dedupe but it upgraded my project to v4. I want to upgrade to the latest v3

Keycloak OIDC example with nuxt-auth-utils

Hi, can anyone provide me an OpenIDConnect example with the Keycloak provider in nuxt-auth-utils ?

Button to change color-mode not working

Here is my code: ```html <script setup lang="ts"> // import DropDown from "./DropDown.vue";...

server side internal redirect

Is it possible to internally redirect one server side api call to another?

NuxtUI DropdownMenu opens the menu at the top of the page when scrolling

I use NuxtUI UDropdownMenu in my header navigation. When the user scrolls the page, the header is sticky to the top. When user clicks the menu icon, the DropdownMenu opens but jumps all the header with the menu to the top of the page, so the user needs to scroll all the way to see the menu. If I close it with ESC, the menu returns to the correct position on the page This is how the code looks like ```typescript <nav class="hidden md:flex justify-end flex-1 text-center items-center">...

Nuxt 4 breaks Pinia

Since i made the upgrade to Nuxt 4 (4.0.2), Pinia is broken. Which versions of the packages (pinia and @pinia/nuxt) should we use ?...

removing prefix of some components

I have shadcn-vue components in ./app/components/ui but I don't want to have to prefix them with Ui, IE UiButton. I tried adding the following to my nuxt.config.ts but it doesn't seem to make a difference: ``` components: [ '~/components/ui', '~/components',...

Where to keep page-specific components without exposing them as routes

Hello, where should I store components that are only relevant to a specific page. I cannot find documentation about this. The /components directory exposes the components to your entire application via auto-imports, and the /pages directory can lead to unwanted routes. Is there a convention for where to place this category of component?

Best way to fetch and access api calls that are required for a large part of the site?

Have a situation in which we need to get user data or feature flags that is heavily checked across the site. So far we are using pinia to store this data and access it but was looking for ways to optimising the fetching of this data a bit. We need this data for basically every page. Couple of options here and was wondering if there was any thoughts on it: 1. Vue plugins - create a plugin that fetches and stores the data via composable/pinia that is used when the app is created/mounted? 2. Route guards - fetching the data via middleware? We can check here if it exists first before fetching it so it doesn't happen on every transition. 3. Put the requests in app.vue and handle it there? ...

Losing types when returning data from server API handler

Hey folks! πŸ‘‹ I'm working on a Nuxt 3 project and running into a TypeScript issue with one of my server API handlers. I have this setup:...

Nuxt UI:UFileUpload make the rendered image will have a class of object-fill

Good day I'm using new nuxt component called UFileUpload but by default it renders on object-cover and I want to render this as object-fill is there any props or other ways to do this thank you
No description

Nuxt locale development loading 15 seconds since using Nuxt UI-Pro

Hello everyone, I'm experiencing a very slow page load time in my local Nuxt.js development environment. Every time I reload or navigate, it takes about 15 seconds for the page to load. Looking at my browser's network tab, I can see that the dev server is fetching a large number of individual files directly from my node_modules folder, specifically from @nuxt/ui and reka-ui....
No description

How to make all inputs full width within a specific form (using ui prop)

I have seen this thread https://discord.com/channels/473401852243869706/1359098834554196070, however I want to only do this for a specific form. I have tried adding ``` :ui="{...

[SOLVED] Your project's URL and Key are required to create a Supabase client!

Hey, So I made a Nuxt App with Supabase as backend. It works totally fine when using bun run dev Now I dockerized that App and set the Environment Variables as following...

The <a> link in the <UPageCard /> has a tabindex="-1" when using the to="" prop

I don't understand why as keyboard users won't be able to use tab through

Nuxt4 tsconfig issues

I am using Mikro-ORM with Nuxt 4 and getting the following type errors when using decorators: ```ts @Entity({ tableName: 'roles' }) export class Role {...

NuxtLink not setting active class

I have a route like /handbook/slug(.*)* and a <NuxtLink to"/handbook"> in my page header When I open /handbook, the activeClass is applied to the link but when I open any child page like /handbook/foo/bar the link is not "active" If I look at vue router docs, it looks like that feature is meant to work with routes with children but that is not how nuxt generates these routes....