Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

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

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

Is it intended Nuxt 3 behavior that a watcher gets triggered when changing between tabs?

I have a simple watcher, like so: ```js watch(user, async (newUserValue) => { console.log('triggered by switching between tabs')...

Resolving components in JSX

Here's a funny one. I would like to write some JSX for dynamically mounting a component, and then I would like to compile the result into a statically servable set of files. Seems straightforward enough, and indeed the following works like a charm. ```html <script setup lang="jsx"> const Jsx = ref(<p>Some text</p>); function loadSomeComponent() {...

NuxtImg from assets folder

Hey everyone! I recently made two changes to my Nuxt 3 project: - Switched from @nuxt/image-edge to @nuxt/image - Moved from Webpack to Vite...

Websocket topic publish doesn't work until you refresh the page

I have followed along with this example here that @Jacek (sorry for tagging you) had created back in October and have websockets mostly working. However, what I have found is that when I try and publish to a specific topic that it won't send the message until after you refresh the page. In the linked example above, you can see this happen where if you just go into the project and the chat loads on the right, it won't ever broadcast the publish that is supposed to be going on every couple of seconds until you click the refresh icon above the chat and suddenly you are User #2 and the publish messages come in. So...I'm asking for help in understanding if there is something wrong with my code and the example code at the link or if there is some sort of bug going on with the underlying websocket system as it currently stands in Nitro?...

NuxtHub - useRuntimeConfig not working as expected in server middleware

useRuntimeConfig is returning config defaults instead of env overrides (cloudflare/nuxthub) when called in a middleware in server/middleware. Also breaks useRuntimeConfig calls in normal server routes if useRuntimeConfig is called anywhere in a middlewhere. What am I not understanding?