Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Nuxt Apollo useAsyncQuery not executing on render

Building a Nuxt3 app with Strapi and Nuxt Apollo, GraphQL endpoint is working. My front and backend is in docker and can communicate and as far as i could understand the GraphQL query was working recently but now it is not fetching data from my endpoint until i manually refetch data in dev console using Payload view. The app is using SSR, is this some kind of hydration problem ? The query is a simple "gql" string and is working in Apollo playground. The data comes in when i manually refresh it b...

Server api nested index.js file is not detected

Hello there, I am quite new with Nuxt and this is my first post here, so I apologise if anything is incorrect! I have done a lot of searching and tried a bunch of solutions suggested by chatGPT without success. I am working on a Nuxt server api, in which I am having a strange problem. Right now I am working on a route, with the following folder structure....

nuxi generate only finds 10 from 100 slug routes when paginated to show only 10

Is my approach bad, paginating links? Should I show all links and use CSS to hide the others instead? Anyways, nuxt can't find the other 90 routes. I've tried stuff like this: ```js async function getBlogRoutes() { const data = await fetch("https://jsonplaceholder.typicode.com/posts")...

Vuetify Reset CSS

Good day I have the latest nuxt version and have added Vuetify module. I have followed the docs found here https://nuxt.vuetifyjs.com/guide/sass-customization.html#overriding-sass-variables...

Nuxt UI late install

Hi there, I've started a new project for Nuxt with @Nuxt/tailwindcss then I've decided to add @Nuxt/Ui everything seemed okay, but now when I'm trying out the UModal my portal doesn't show, I've searched for a reason in the DOM and it seems that Nuxt UI has the tailwind classes but tailwind didn't output them in the watch/build step, In response i've added ```json content: [ ......

Calling Array.slice() to a fetched array says that slice is not a function

This is what's causing the problem, from what I've understood is that the array is wrapped in a proxy object. I've tried accessing the _rawValue and it worked for a while but it shouldn't be used. ```js <script setup> const { data: posts } = useFetch("https://jsonplaceholder.typicode.com/posts") ...

Replacing square brackets in page names in dev mode

Is it possible to transform the page names in dev mode? The specific use case is that I'm building an SPA and have a Java server that proxies to dev server, but square brackets in URL are invalid, so Java rejects the request. They have to be either encoded, or replaced inside nuxt/pages on dev server. However, I have no idea how to do that....

SPA Loading Template inline external CSS

Hey 👋 is there a way to include an external css file or a library like animate.css with the spa-loading-template.html? I have tried adding it to the app.vue and the nuxt.config.ts in which it worked, but only after the page loaded the styles, which results in a layout shift and/or it doesn't play the desired animation. Which is to be expected, because SSR is turned off and the styles are not inlined. Is there an already established solution to inline it? I have tried using @nuxtjs/critters, which only works in the production build and duplicates the css....

Weird dynamic routing issue when behind proxy or deployed to ECS

Hi, I have a project with only had a single nested dynamic route, such as: pages/[route1]/[route2]/index.vue. My page is working fine, however when behind a reverse proxy or deployed to ECS I am seeing an error in the console for [route1]/false. Has anyone come across this before and know a fix? When I run it through localhost without the reverse proxy, I don't get this error....

Common Nitro Gotchas when proxying to wordpress instance

I want to set up a reverse proxy to harness SEO capabilities of worpdress. The end goal is to set up something like a reverse proxy so when the user visit my nuxt app at the route /blog the server fetch content to the user from the wordpress instance. Im aware nitro has built in server rules - however i fear this are not optimize for large quantities of traffic....

Choose a local file if data fetching failed

I have an api that sometimes fails to deliver a successful response. In that case, I want to default to using a local json file instead. I know that useAsyncData should be "side-effects free" but idk how else to do this operation....

Type safe props with `NuxtPage`

Hello, My pages are structured something like this: ``` team/...

Nuxt generated tsconfig point outside of project and language server crashes out of memory

Hi great devs, Im here to ask why nuxt adding folders way outside my nuxt project? It started since I moved to use layers. My nuxt project is kinda microfrontend for project which it inside of and vue language server crashing out of memory because it trying to typecheck files outside of nuxt project(there is many). Im trying to understand what causing selected line to appear when i run postinstall script inside one layer...

How to use NuxtErrorBoundary properly??

I have a component with the following code: ```html <template> <NuxtErrorBoundary> <template #error="{ error }"> Error here: {{ error }} </template>...

Vitest slow tests compared to jest

Hey, I can't really share more than the config i got right after this message, but we switched from Jest to Vitest for our tests (vitests with nuxt environment ofc) and the speed for the tests really increased, i wanted to know if it a slower execution was to be expected or not ? (it more that quadrupled so i guess we have other problems, and running with --pool=forks didn't change anything) ``` // vitest.config.ts import { defineVitestConfig } from '@nuxt/test-utils/config'...

Nuxt UI without app.config.ts

Defining primary color via the app.config.ts lets us change the theme of our app at runtime (the palette button in the docs, also noted in the screenshot. My understanding is that app.config.ts provide the means to change our theme at runtime. But, I'm not really interested in changing my theme at runtime. Rather, I want to define a primary color and be able to use it in my default theme and for the color prop in various components. How can I achieve this in Nuxt UI? Is it possible to define primary color apart from the app.config.ts way, may be under the ui key in nuxt.config.ts itself? I have the same question about overriding component config also via app.config.ts. Please correct me if I'm misunderstanding the purpose and usage of app.config.ts. Thanks!...
No description

Gtag multiple tags

Hello, can someone please help me with nuxt config and GTM tags setup? I am using nuxt3 and laravel. I have multilingual (2) website with 3 env files (root,api,env). In my nuxt config, i am hardcoding gtm script, but i want to switch just the container id, when the page is switched to the second language. ...

Nuxt module type errors leak into app typecheck

I have an internal nuxt module @agorastore/shared-ui, which is consumed by a nuxt app. Locally, on the module code, I don't have any type errors, everything is properly typed & works fine. But when I build & release the module, the build output has some type issues I don't have on the module code. These type issues aren't a big deal, they don't cause harm & the module works as excepted. ...

Nuxt i18n pages:extend

Is there a way to avoid automatic localization of routes that are pushed within the pages:extend hook ? While using those settings: ```...

Difference between <v-no-ssr> and <ClientOnly>

I was noticing that with v-no-ssr in the app.vue file of a project, Vuetify is not loading correctly, while with ClientOnly from Nuxt, it does. Does anyone have an idea why?