Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

How do I redirect my index file and have prerendering find all my content?

I want to redirect root / to /guide/getting-started, but when I do that, none of my prerendered pages are picked up.

Global middleware only runs once on client side ?

Hello there, Hope you all doing well. am trying to force a user on a password reset page based on their login token. the password reset flag is working fine. But my issues are : ...

How do I add a custom log reporter to nuxt?

I have tried using a module to call the addReporter function on the logger instance like so: ``` import { useLogger } from "nuxt/kit"; // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({...

How to polyfill buffer when using web3 Solana connector

Hi, I am facing a build issue when I try to build for cloudflare_pages ``` ERROR Cannot resolve "unenv/runtime/node/buffer/index/" from "~/Projects/playground/nuxt-walletconnect/node_modules/.pnpm/@[email protected]/node_modules/@keystonehq/bc-ur-registry/dist/index.js" and externals are not allowed!...

Error handling inside server routes located inside /server/routes

I'm trying to have it so when my server route fails it redirects to the full screen error page. I'm trying to do this by using the createError function inside the event handler. This isn't redirecting me to the fullscreen error page but instead it goes to the failing route on the client. So for example if my server route: /login/microsoft/callback fails it shows met the /login/microsoft/callback path inside the browser and will throw the vue router warning "No match found for location with path...

Disabling AutoImport for Layers Only

Hello, I have a nested folder structure for layers for organization purposes. Something along the lines of `/layers/group1/layer1...

useAsyncData(..., { server: false }) in combination with .client.vue not working correctly

I have a couple pages that I don't want Nuxt to render server-side, but I do want navigations to be blocking when navigating to one of these pages. Here's an example page: ``` <script setup lang="ts"> const { data } = await useAsyncData( async () => {...

Error deploying to fly.io

Deploying a nuxt app in fly.io is usually very easy. The fly cli handles everything for you. However, its the first time im using layers in a project and the usual process and configuration doesnt work. Got: ```console => ERROR [build 5/6] RUN bun --bun run build 2.1s...

vueDemi2.effectScope is not a function

I get this error vueDemi2.effectScope is not a function this is my package.json i have no idea how to debug this...
No description

Dynamic v-model with component :is

Hello i have this use case in my mind. Let's assume i have a list of components like this ( For context this is a modal with customer info reviews, product bought etc) ```js...

Is the Pinia store being cached by default?

My users are sometimes experiencing odd behavior after I've pushed to my production environment. I couldn't reproduce their issues but it only happens when I change the Pinia store schema. So I assume Nuxt 3 + Pinia cache the state values somehow. To better understand this, I'm wondering: 1. If this is actually the case by default? 2. If this is the case, where is this data saved? Local storage? Cookies? ...

Weird Error without stacktrace

Hello, I am trying to upload a file using google's storage library. However whenever I call the method I get this error: ERROR [nuxt] [request error] [unhandled] [500] Cannot read private member from an object whose class did not declare it I am following google's docs to properly upload the file and can't spot something off. Here is my code: ```ts...

Missing custom header when calling API from mounted() hook in NUXT2

I have a component inside a NUXT2.17.0 project. When I call an API inside that component, this API should return a custom header. If I do the call inside an fetch() hook, it returns that custom header. But if I call the API inside the mounted()-hook no custom headers are included. It doesn't matter if I use axios or fetch native. None of them works, so it must be something with the lifecycle mounted....

Odd issues with SSR & hydration mismatch

I have a Nuxt3 project where I use Vue Query. In the .vue file in pages/ I have a hook which fetches data with Vue Query and does onServerPrefetch(suspense), and it works fine, however I have one component inside this page, which has another composable with Vue Query, which also has onServerPrefetch(suspense), but for some reason it's not rendered properly on server and causes a hydration mismatch, however weird thing is that it doesn't show that it would fetch anything in network tab, meaning it does fetch it serverside. The component is a table component using tanstack table, it accepts both json, and an url to fetch the json from. The json server side rendering works fine, but when url is used, the table is initially rendered empty, and on client side renders the rows....
No description

Problem with markdown it and my nuxt project

Hello, I would like some help with markdown-it in a Nuxt 3 application. When I apply a rule, my application can no longer load the pages affected by markdown-it. Just the following code causes this issue:...

Login with facebook through facebook mobile app.

So I have a working login with facebook through web already by redirecting user to https://www.facebook.com/v15.0/dialog/oauth. But I need a new functionality that if user is on mobile and has facebook app installed, it should try to open the app and let user authorize through it. How do I do it?

How to use SRC property in <img>?

Getting error of type script error when trying SRC="/images/picture.png" Getting HTML when trying :SRC="'/images/picture.png'"...

Issue with typescript: true in Nuxt Bridge Migration

I’m migrating a Nuxt 2 project to Nuxt Bridge following the migration guide. In the TypeScript setup section, when I set typescript: true in my configuration, I encounter the following error. How can I resolve this? I have posted the same question in the following discussion:...

Nuxt 3 twitter and meta SEO meta not working

Hi everyone I've been trying to add support for twitter and facebook (meta) link cards but I cant seem to get them to work after I build the final server version. I've tried to use dev nuxt (npm run dev) in combination with ngrok and with that the mentionted cards work as expected. If I make the request trough postman I get a receive size of around 80kb but after I build the server "image" and run it trough node the cards stop working and the request from postman now shows a size of 1.3mb with the SEO tags being burried after all the CSS stuff (which is a lot). Below is my nuxt.config.ts (not complete due to sensitive information) file: ``` pages: true, ssr: true, app: { head: { charset: 'utf-8',...

Failed to resolve import "#tailwind-config"

The Nuxt TailwindCSS module docs state I can use import tailwindConfig from '#tailwind-config'. However, I get the following error when trying that: Failed to resolve import "#tailwind-config" Does anyone have any idea
Next