Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Nuxt + AWS SDK + TS transpilation issue

I am using AWS JS SDK to get stuff from S3 via server on an API call. Using the client send method produces a [nuxt] [request error] [unhandled] [500] t is not a function. The reason I believe this to be a Cloudflare issue is because creating the application locally via nuxt build and nuxt preview does not produce the same issue. However, whenever I use wrangler or deploy to pages, the error occurs. However, I can't be sure and am posting here since I am more likely to get help than from cloudflare discord, and it's still nuxt related. The trouble code: ```ts const command = new GetObjectCommand({...

Implementing and Persisting UUIDs for User Sessions in Nuxt 3

Hello there, I'm currently developing an application using Nuxt 3 and I need to integrate a specific functionality. I'm unsure about the correct implementation approach and would appreciate some guidance. Functionality Requirements: When a user visits the site, I need to make a call to an external API that returns a unique UUID for that user. This UUID should be stored in the browser's localStorage to prevent the generation of a new UUID on subsequent visits. Additionally, this UUID needs to be included in the headers of all $fetch() calls made to the API....

usefetch detect redirects globaly ?

if i have many usefetch across my app how to detect any redirects and do so without modifying every single one ?

useFetch and keys that end up not being unique

Hey there everyone, I have a question about the key param on useFetch and how nuxt handles it not being truly unique. We have a component that is using useFetch to get it's data and the useFetch looks something roughly like this `` const { data: area } = await useFetch( /api/areas/${areaId}`,...

Nuxt + Cloudflare Pages 1101 Error from Nuxt generated script

I have been working on getting a Nuxt project into Cloudflare with no success. The build works locally using yarn build and yarn preview with the environment variables I intend on using in Cloudflare. When the build finishes successfully and the project deployed to Pages, the resulting application produces an error The script will never generate a response. This is apparently produced from pages-worker--....-production which from what I am told from asking help on Cloudflare's Discord server is that this is something produced by Nuxt, not Cloudflare. I followed the Nuxt/Nitro deployment steps for Cloudflare and set the nitro configuration (which is very proud about being configuration free) for .html stuff. Needing some help figuring out whats going on here. Cloudflare is unfortunately lacking in transparent logging under the hood....

Clear nitro route cache programatically

Hi! I would like to clear some cache programatically in a Nitro handler so another service can call this route to clear a certain part of the cache. I currently have the following code: ```typescript export default defineEventHandler(async () => { try {...

Switching from vue-i18n to @nuxtjs/i18n — Folder Structure & Dynamic Imports Issue

Hey everyone! I was using vue-i18n ("vue-i18n": "^9.2.2") with this setup and now I tried switching to @nuxtjs/i18n (version 9.1.1). Previous setup with vue-i18n: plugins/i18n.js...

useRequestHeaders returned undefined after deployed to the server.

I tried to create a wrapper for every fetch request on my project like this ```javascript // @/service/config.ts const getAPIRequestConfig = (): RequestConfigType => {...

Nuxt Sitemap configure sitemap url

I am currently using Nuxt Sitemap in Nuxt3 and had already generated the dynamic sitemap using API I added those sitemap under their own sitemap files and i was wondering if there's a way to change the sitemap index file url ? As currently it was displayed as for example http://localhost:3000/__sitemap__/default.xml and i wanted it to display as http://localhost:3000/default.xml without the "sitemap" infront of it I google that is to use path but it's not working for Nuxt Sitemap...
No description

component attribute automatically passed without a v-bind="$attrs"

why are component attribute automatically passed without a v-bind="$attrs" as i want to pass the attirbutes to a child element inside the component and not a parent element...

NuxtUI USelectMenu event issue with searchable

If I have searchable on USelectMenu, the click event on the options won't trigger Here is the code: without searchable, test() will be triggered, then selectCondition() will be triggered with searchable, test() won't be triggered, selectCondition() will be triggered ...

Gitlab CI Pipelines with playwright testing

Looking for some help with getting playwright tests running correctly in GitLab CI. I've got most of it up and running but need some confirmation/guidance on how to correctly setup the pipeline with nuxt (ssr:false) and running playwright correctly. I'm running in to some errors where the pages aren't loading and my tests are failing. Not sure if ti's to do with the speed of the CI getting the site running in time for playwright as it seems to always be my 1st test that fails....

Layout and Pages

Hi guys, I'm trying to have a pages/index.vue that route to components/HomePage.vue when connected and components/LandingPage.vue when non connected And i also have layouts/default.vue for all pages when connected who contains a menu, and layouts/unauthenticated.vue for the LandingPage.vue only for now: ```js <script setup>...

Partial autoimport from layers

I am trying to build an app that uses multiple layers. For some layers, I would like to turn off the implicit autoimported dirs (./composables, ./utils) Let's have the following example:
File structure...

Right way for full text search in Nuxt Content v3

I have Nuxt 3 app with Nuxt Content v3. What is recommended way to implement the full text search with my own Content Search component?

Supabase auth issue while deployed to cloudfront

I have Nuxt app with supabase module for auth. It work fine locally. But when the app is deployed to cloudflare with nuxthub i get issue. When i reload the page which is restricted for logged in user, when i'm logged in, the page is redirected to login and then right after that to home page, seems like some ssr issue or something like that. What can be the issue?

Does anyone have a great eslint+typescript Nuxt 3 setup?

I've been trying to set up eslint and typescript for my Nuxt 3 projects for a while now and not getting this right. There is so much conflicting information online. Does anyone have a great working example where eslint is able to lint with typescript (in js/ts/vue)? For posterity, here is my setup... ...

Nuxt UI not rendering css correctly on build

When I run dev locally, the CSS for Nuxt UI looks fine. However, when I build the image and deploy, some of the CSS is not loaded. I don't get any error messages either. I'm using latest version of Nuxt (3.15.4) and UI (2.21.0) I've attached two images to show the toggle is only shown on local/develop but missing on build/production....
No description

Lint Error in nuxt.config

It shows things in VSCode, red underline... but the error it gives is... Expected config key "modules" to come before "devtools"eslintnuxt/nuxt-config-keys-order The issue, is that is where it is. I even figured perhaps I am blind and asked CoPilot to fix it... and CoPilot put the devtools before modules. Perhaps that is correct? No, the same message prevails....
Next