Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Nuxt & Nitro store cookie

Hi, I am making an application with Nuxt, Nitro (proxy) and Spring Boot for the API. Currently I'm having a lot of trouble saving my session when I log in. I receive the session cookie but it is not saved on the site. I put all the configs in nuxt.config.ts but nothing. Before I used VueJs to create the site, I wanted to switch to Nuxt, I transferred the entire connection part but I'm stuck on cookies....

Properly abort rendering a page and redirect to another

Hello, I use Nuxt 3 and Pinia store. I have this case in which a page may either be rendered or redirect to another page depending on a condition. Here's an example: ```typescript...

Nuxt layers relative path

I have 2 nuxt projects, project 1 and project 2. Project 1 uses the
extends:['../project2'],
extends:['../project2'],
to utilize this project as a layer. Inside the server folder of project2 I have a folder for database models that get used in the api. This all works perfectly fine when i'm running project2 as a dev server, but when starting up project1 it can't load these models. ...

Nuxt, Supabase, Pinia + target="_blank" link = missing data in components

I'm very new to this FE stack, but I've had a problem for days now. I just can't seem to fix it. In a component I have a link like this: <a href="some-other-site" target="_blank">Some xternal site</a>. When I click on the link and then go back to my site's tab, and click on an internal link, some components has stopped working. This is only the case with links that opens a new tab, if I leave _blank out, it's no problem to hit the back button in the browser, it all renders fine. When I get back to my tab I see this in my console: Auth state changed: SIGNED_IN That comes from my useAuthStore.js: ...

Nuxt Error cannot Start Cannot Find Package:plugin-transform-typescript

hey guys i have a very simple minimal project with nuxt/ui and i am getting this error when trying to start it what is the problem:
[nuxi 6:23:40 ከሰዓት] ERROR Cannot start nuxt: Cannot find package 'C:\Users\admin\Desktop\Full Typescript Projects\cognito 1.0\COSMO\node_modules\.pnpm\[email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected]_\node_modules\@babel\plugin-transform-typescript\lib\index.js' imported from C:\Users\admin\Desktop\Full Typescript Projects\cognito 1.0\COSMO\node_modules\.pnpm\[email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected]_\node_modules\vite-plugin-vue-inspector\dist\index.mjs
Did you mean to import "@babel/plugin-transform-typescript/lib/index.js"?
[nuxi 6:23:40 ከሰዓት] ERROR Cannot start nuxt: Cannot find package 'C:\Users\admin\Desktop\Full Typescript Projects\cognito 1.0\COSMO\node_modules\.pnpm\[email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected]_\node_modules\@babel\plugin-transform-typescript\lib\index.js' imported from C:\Users\admin\Desktop\Full Typescript Projects\cognito 1.0\COSMO\node_modules\.pnpm\[email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected]_\node_modules\vite-plugin-vue-inspector\dist\index.mjs
Did you mean to import "@babel/plugin-transform-typescript/lib/index.js"?
...

Nuxt build move prisma/client to devdependencies

Hello, I am trying to build my project with nuxtbuild when I run the command pnpm run build (npx prisma generate && nuxt build) The client generation works fine ```...

NuxtImage: Relative import

Hey 👋 I am currently working on a website that will be deployed on a server subdirectory (like domain/directory). My goal is to build the app using relative path, so I can change the directory later without rebuilding the app ( I guess baseURL does not work for that). I manage to make the import for /_nuxt/ working using cdnURL: './', but for some reason, public images used by <NuxtImage> and the provider ipx does not follow this rule ...

How to authenticate my Nuxt 3 app users on Laravel Passport ?

Hello Nuxt community, I'm currently migrating a Nuxt 2 app which authenticated its users on Laravel Passport, through OAuth2 with PKCE flow. That authentication was made with the amazing @nuxtjs/auth-next module. After searching the whole Web, I'm afraid Nuxt 3 does not have such a tool......

Breaking app when awaiting composable in page setup

I have a pretty barebones use case that seems like it shouldn't be breaking things. On my page setup, I do the following: ``` <script setup lang="ts">...

Big performance regressions happing after adding large amount of redirects (3000+) inside routeRules

Hi! Is anyone here maybe familiar with big performance regressions happing, after adding a very large amount of routeRules entries (3000+ redirects) to nuxt.config.ts ? I see this happening in my project. I am trying to see why it is happing. Every Nuxt page has about a ~10x decrease in initial HTML response time after adding the redirects. As a test, a blank Nitro application configured with the same routeRules does not show this performance regression. Has anyone experienced this?

Vue : Cannot find name

Hello, I've been getting this anoying errors in my fresh project in nuxt 3. I've copied almost everything like in my previus project where this does not happen with imported types. There are diferences in vue and nuxt versions. I've included screenshots of my package jsons....
No description

Unable to use MySQL as connector in Nitro database configuration

nuxt.config.ts:
nitro: { experimental: { websocket: true,...

Adding items to cache from useFetch, and then use it via useNuxtData

Hello !, I'm making an ecommerce website and i have different product list components that fetches the data from api using useFetch. What i want to do is somehow aggregate the results of these useFetch to a cache data so later on i can use that cache to show the product details in product detail page using that cache. Here is my product category carousel, that basically fetches the products based on category handle from medusa ```html...

Nuxt Content v3 layouts

I'm migrating my project from Nuxt Content v2 to v3, and almost every page in my project uses a layout. Unfortunately, there's an issue with this: when navigating to another subpage (without a hard reload), the layout glitches, sometimes duplicates, and so on. To check the layout on each page, I'm forced to create a collection that includes all possible .md files: content: defineCollection({...

addImportsDir does work for types but doesn't work at runtime

I wanted that in my Nuxt module, the enums defined in the module are defined globally in the application, so I added "addImportsDir(resolve('./runtime/enums'))" in the setup function of defineNuxtModule, but although it works for types with typescript, in runtime I have errors like "ReferenceError: __unimport_MyEnum is not defined"

Nuxt Image + IPX provider + S3

I'm using the Nuxt Image module with IPX as the provider, and I have a few questions regarding its caching mechanism: - Where does IPX store its cache? Is it in memory or on the server's filesystem? - What would be the performance implications when handling 1M+ images? - Is it possible to configure IPX to store cached images on S3 instead of memory / the local server?...

Strange Behavior in dev mode , works in production serving build mode

For Admin Layout the routes from sidebar are getting changed , but the content is not getting changed in development environment. but when i am creating build and serving it local everything works there, even when i am deploying code to vercel production server it works there, but this issue is occuring only in my local development mode.....
this project is in nuxt3...

Rollup error when using server components

I'm hitting a Rollup error when using server-only components, and I'm not sure how to best resolve it. Essentially, I'm using the Nuxt 4-style folder structures and have a server-only component, /app/components/MyComponent.server.vue, which is importing some server-only code, /server/db/UserRepository (essentially some code to connect to my database and retrieve a user). This works fine locally in development, but is throwing a Rollup error when I go to build the code for production. I'm pretty sure that the error is because Rollup is trying to include server-only libraries (i.e., postgres, which uses Node.js modules like perf_hook, etc.) in the client-bundle, but I'm not clear why it would be trying to include code imported by a server component. Is this a bug? A missing feature (i.e., don't try to bundle server component code in the browser bundle)? Any ideas how to workaround it? I'd rather not have to create an API endpoint for fetching this data, as it's not something I intend to expose externally....

`class` property type

when moving class from attrs to props, to bind them to different elements, how should it be typed?

NuxtImg inside dynamic components during site generation

What is the best way to include images during site generation for NuxtImg wihtin dynamic components? Problem is that when NuxtImg is in component that during static site generation is not part of the DOM (eg v-if="false") then images are not generated in /_ipx/ folder. When user visits page, hydration completes and dynamic component can be loaded (v-if="true"), but corresponding images are missing in /_ipx/ folder. How to tell NuxtImage to not skip those. There are workarounds like image preload or add invisible NuxtImg to DOM but I am looking for more elegant and clear solution. Example code: <div v-if="condition"> <NuxtImg width="80" height="80" :src="..." loading="lazy" placeholder/>...
Next