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...
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...
Cannot start nuxt: Could not locate the bindings file. (Nuxt Content)
config
```content: {
database: {
type: 'd1',...
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?
Authentication and Fetch Confusion
Hello everyone, im new to nuxt, i developed most of my projects on vite but i am kind of getting confused about the fetch function, i want to contact my backend service for authentication but i am having a problem when i submit the form
i am using $fetch function to my localhost at a different port where the backend service is listening but i don't understand why it maps the IP to a page instead....
How to show hydration mismatch errors causes in production builds?
As per title, how to show hydration mismatch errors causes in production builds? I am running into an issue where i get no hydration errors in dev but as soon as i make a prod build they show up and i need to figure out why.
Disable Prefetch/Preload in dev mode on Nuxt Bridge
Hi there, does anyone know of a way to disable the prefetch/preload behavior during development while being on nuxt-bridge?
I managed to disable it in production in the final build by adding a module with the following code:
```
import { defineNuxtModule } from '@nuxt/kit'...
Package import specifier "#build/nuxt.config.mjs" is not defined in package
Hey. I'm getting this error when using a specific package, but the error is not pointing to that package specifically, but I'm guessing a dependency of that package. Is there something I can do to resolve this issue?
```
[nuxt] [request error] [unhandled] [500]
Package import specifier "#build/nuxt.config.mjs" is not defined in package...
Server read data from public
Hello,
In server/api I have data script, that reads file from public, and returns json
```ts
import fs from 'fs';
import {parse} from 'smol-toml';...
How to clear cache for routeRules
Hi, I'm running Nuxt 3.15.2. I added this redirect to my nuxt.config.ts file. It redirects to a server route.
```
routeRules: {
"//logout": { redirect: { to: "//auth/logout", statusCode: 308 } }...