HMR Loading with Nuxt Page Refs
Im currently trying to implement a reactive expose system for an existing application. Some nuxt pages can expose a title and description which a grandparent component can access. It takes the data to make it reactive, but im not sure if I've implemented it correctly. Basically my
BaseTabContainer handles a tab list (like your browser tabs) and also renders a BaseTabComponent that wraps a NuxtPage. We're exposing a title and description from the NuxtPage -> BaseTabComponent and then we're exposing the nuxtPageRef to the BaseTabContainer. My system works except when an HMR load occurs, since HMR loads reset refs (at least thats what im guessing).
TL;DR -> HMR loads reset the nuxtPageRef and messes up my code. This isnt a bug in production since HMR stuff is for developers, but it becomes quite annoying....Nuxt Content: how can I fetch files from another repository or passsing a URL for a .md file?
Hi guys, I was wondering if someone using Nuxt Content is fetching the markdown files from other repo or using some URL for files stored in a S3 or something like that. Is it possible? How to make this kind of request?
Config help
Does anyone know how to configure my nuxt page to have individual html files and dosnt pre load other pages(im serving index.html and its the main page of a dashbard and its showing pages that arnt being served by my backend) and im looking how to stop pages from updating routes in the browser after page load i.e login.vue - > /login/index.html and served on / but once loaded it updates to /login
Lazysizes hydration missmatch
Hi, I'm trying to implement lazysizes in nuxt (because of the automatic size detection I know loading lazy has great browser support) but I get hydration errors.
I tried to import the lazysizes library with a plugin named '/plugins/lazysizes.client.ts' but I still get theses errors. Can someone explain me why this happens and show me how to do it right :D? This is what i tried: ...
I tried to import the lazysizes library with a plugin named '/plugins/lazysizes.client.ts' but I still get theses errors. Can someone explain me why this happens and show me how to do it right :D? This is what i tried: ...
Error with bode 23.1
While running project with node version 23.0 and higher I've got the error
ExperimentalWarning: CommonJS module /usr/src/app/node_modules/tailwindcss/lib/lib/load-config.js is loading ES Module /usr/src/app/tailwind.config.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time...
Any way to fix sourcemaps being completely wrong?
For some reason sourcemaps in our Nuxt 3 application has suddenly stopped working correctly.
Breakpoints set in VS Code are no longer applied where you think they are, they are applied and triggered to other lines of code than the ones you chose.
Does anyone have any clue what could cause this? I'm clueless....
How to write test for API with authenticate required.
Hello there. is there way to test out api endpoint while building fullstack app. let say i have authenticate route powered by https://github.com/atinux/nuxt-auth-utils . i want to test if the result of the endpoint is fullfill the test required but i did not really know how to test that endpoint . i was reading the laravel test and find https://laravel.com/docs/11.x/http-tests#session-and-authentication maybe one of you have any idea about this how to do test api with authenticate like larav...
Nuxt3, Vitest, Vuetify3: unable to resolve Vuetify components
Hi everyone!
I am having a hard time with a setup based on Nuxt3 + Vuetify3 + Vitest. Nuxt's testing docs implies that using mountSuspended in unit-tests should allow vitest to resolve autoimports, but I get this error for each vuetify component when running tests:
[Vue warn]: Failed to resolve component: v-row
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MountSuspendedComponent >...
NuxtUI v2 make primary color black
Hi I am using nuxt ui v2 in my project and I want my app to be light theme with black elements on it, but I am not able to change my primary color to just black (or any other color) I don't know what to do, it looks like if the ui library was just completely ignoring my app config.
My debug app config that doesn't work:
app.config.ts
```...
middleware
I created a middleware in which I send an api request and validate the JWT token. In the vue app I have a token download from the serwer.
App.vue
```<script setup>
const { useAccessToken } = useAuth();...
Vitest times out when mocking the Router
Hey, I'm currently trying to mock useRouter().push(), but unfortunately, Vitest (the mountSuspended function) times out.
```ts
// Some stuff
const mockRouterPush = vi.fn();...
Tailwind works, but doesn't show suggestions (intellisense) in a Nuxt project
Here's the relevant content inside the tailwind config file:
```js
export default {
content: [
"./components/*/.{js,vue,ts}",...
v-bind not unwrapping reactive properties from composable
I have a helper composable here for orchestrating common aria attributes for form fields.
```typescript
export function useFieldControl(args: UseFieldControlArgs): UseFieldControlReturn {
const fieldId = args.id || useId();...
Generating thumbnails of site
Hello,
I am porting my site from VitePress to Nuxt3 because I need some serverside stuff Nuxt provides.
I can't find an appropriate hook to use when the site could be temporarily hosted and opened to take a screenshot to generate a page's thumbnail. I am thinking one of thoes might work?
build:done builder:generateApp...Question about image tag and svgs in production
Hello I am working in Nuxt3 and am fairly new to web dev and very new to Nuxt3
I am trying to learn how to properly use a svg that will work in production.
Here is the code that was in my page before moving to a component, it worked in dev and production
```html
<span...
Usefetch doesnt work when using middleware
Hi, I have a problem. If I use middleware (even if it is empty), my usefetch does not work during ssr. It does get the data, but it doesn't pass it to the client.
Trouble with multiple pinia actions inside useAsyncData
I want to fetch a bunch of paginated data on pageload, so I use
useAsyncData to avoid dupe requests. I get that you're not really meant to use useAsyncData for side-effects but since it's the only mechanism I know of that prevents duplicate fetches, it's what I got.
The problem is, when I generate an array of requests to pass into a Promise, the function stalls. It's not that the reqs array is undefined - it's that nothing runs past it inside that function. asyncData simply returns null before ever reaching the Promise.
```...Sanity Navigation Error: TypeError: can't access property
Hi! I'm using Sanity in my project but I'm facing an issue with navigation.
When selecting a project I initially get an error:
Uncaught (in promise) TypeError: can't access property 0, $setup.project is null. However clicking the project again successfully navigates to it
On the project page I am completely stuck and can't navigate the same error appears in console and I need to do a hard refresh to proceed. I'm using a simple groq query. ...