Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Page appearing empty when navigating (but not directly)

On my website, https://nuxt.whitecoastrailway.com, clicking on News and Jobs in the navigation return pages with no actual content, only the header and footer (which itself is covered by the header). Using useAsyncData just errors with Cannot stringify a function, and the documentation for the sanity module says that useSanityQuery wraps useAsyncData, so there would seemingly be no point in this anyway. I'm using Sanity with the official module as my CMS to display news posts and job listings, and almost the same code is used is used on each index page. Here's the script in the jobs page: (bit messy but idc)...

[closed] Page appearing empty when navigating (but not directly)

On my website, https://nuxt.whitecoastrailway.com, clicking on News and Jobs in the navigation return pages with no actual content, only the header and footer (which itself is covered by the header). I'm using Sanity with the official module as my CMS to display news posts and job listings, and almost the same code is used is used on each index page. Here's the script in the jobs page: (bit messy but idc) ```ts...

Deserialize object after its fetched

Is it possible to have a convenient function that takes a SerializeObject<T> and returns its content casted as a T?

Vite alias depending on server or client script

How would one do an alias to dynamically import a library or another in Nuxt3, if the code has to be sent either to the frontend or if its worked upon in the backend?

run serverside code on startup

i want to make code run at runtime, im struggling to find out how, ive tried plugins/hooks, i've tried putting code in the base scope of a utils file, ive tried nitro plugins, not sure what else to do. i want this to start an interval and run in the background of the whole server and not be needed by any of the other scripts (besides the data that it edits offhand)

Playground with hmr for a nuxt module which contains scss

in my module, I import style with "nuxt.options.css.push(resolve('./runtime/assets/index.css'))" and also "import('../assets/optionalStyle.css')" but these files are scss files compiled, and so I have problems when I try to launch a playground to test my module with hmr because it tells me that it can't find the css files, logical since the scss files are not compiled (and I don't think I want them to be compiled at that time to have hmr on the style too), how can I solve my problem?

Pinia store with Nuxt layers

We have an issue with the Pinia store when it is used in the Nuxt layers. The error is: ```...

cant install @tanstack/vue-query?

```npm i @tanstack/vue-query :snowflake: shell npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: nuxt-app@undefined...

connection is not secure, even after configuring https in nuxt.config.ts

Hi, I'm relatively new to nuxt. I'm attempting to enable https in my development environment. All tutorials I've seen refer to using localhost, but I'm developing on a local server so I'm not sure what to do differently. I've updated my system hosts file so example.com (here changed to obscure my exact setup) redirects to my development server. I've generated certificates using mkcert and updated my nuxt.config.ts with the following: ``` devServer: { host: 'example.com',...

Is it possible to make a Promise globally available on every page?

I want to have access to a Promise on every page because I need to see, if the action is done yet, on other pages. I am using vue-sonner with toast.promise. The problem: I want to create a toast using a composable and the promise state should be reflected on other pages too, but it seems like the Promise is only active and resolvable on that page, where it is created. The promise is pending till I move back to the page, where it was created. Is this even possible?...

Nuxt UI Pro - Docs template

When running the direct CLI on the repo page: npx nuxi init -t github:nuxt-ui-pro/docs#v3 I get this output: ```ts...

Build error after upgrading to 3.15.4 - No "exports" main defined ... unicorn-magic 🦄

Full error after npm run build:
[nuxi 8:26:08 AM] ERROR Nuxt Build Error: [vite:css] [postcss] No "exports" main defined in /Users/david.marr/code/xyz/node_modules/globby/node_modules/unicorn-magic/package.json
file: /Users/david.marr/code/xyz/src/assets/css/tailwind.css:undefined:NaN
[nuxi 8:26:08 AM] ERROR Nuxt Build Error: [vite:css] [postcss] No "exports" main defined in /Users/david.marr/code/xyz/node_modules/globby/node_modules/unicorn-magic/package.json
file: /Users/david.marr/code/xyz/src/assets/css/tailwind.css:undefined:NaN
...

Typescript error when not destructuring useAsyncData

Hey there! I have multiple client requests to do in a page so I feels more convenient to not destructure the composable useLazyAsyncData(). ```ts const request = await useLazyAsyncData(() => ({}), { server: false })...

i18n doesnt fully refresh the page

i18n stores a cookie of the locale, so when fetching the root page it redirects, instead of fully refetching the page, it tries to do the redirect from the client and fails

async plugins with await - typescript angry

I'm curious what I'm doing wrong here. It almost seems like a nuxt TS bug. If I remove "provide" from the resolve within the IF statement the TS error disappears (but then $ketch doesn't actually exist), but if I run it as is, it works fine.
No description

useScriptGoogleTagManager returns void

Hello, I'm trying to use useScriptGoogleTagManager ```ts const { proxy } = useScriptGoogleTagManager({...

Test plugin of useNuxtApp vitest

Hello all, I don't know how to test one of my services I pass through useNuxtApp. I use @nuxt/test-utils and my component got a ...

lint+prettier integrations/issues in vscode

hey folks,can someone point me to a nuxt example project with linting and formatting rules? I managed to get it set up but having an issue where the built in formatter is not respecting the formatting rules. is there a proper way to link it to a prettierrc? here'swhat i got so far......

Input background color does not work

For testing purposes, I want my input fields to be red. I created an app.config.ts: ```ts console.log("app.config.ts"); export default defineAppConfig({...
No description