Questions tagged [nuxt.js]
Nuxt.js is a framework for creating Vue.js applications, you can choose between Universal, Static Generated or Single Page application (inspired by Next.js)
nuxt.js
13,052
questions
0
votes
0
answers
3
views
[email protected]: The engine "node" is incompatible with this module. Expected ver
error [email protected]: The engine "node" is incompatible with this module. Expected version "^18.12.0 || ^20.9.0 || >=22.0". Got "16.18.0"
error Found incompatible ...
0
votes
0
answers
4
views
In Nuxt 3, how to navigate to a login page if any REST endpoint returns 401?
I am using Nuxt 3 with server-side rendering. For REST requests, I use Axios.
When an user logs in, a refresh token cookie is saved in the browser. Then for all requests to any of the REST endpoints, ...
- 1,542
0
votes
0
answers
19
views
Return a Rewrite in Nuxt3 with Nitro server middleware
Given the following folder structure
pages/
├── foo.vue
└── bar.vue
server/
└── middleware/
└── index.js
How can a rewrite be returned from index.js?
This code works just fine, when a user visits ...
- 944
0
votes
0
answers
18
views
How to deploy to Firebase from Docker container in Nuxt 3
How to manage Firebase CLI authentication and then deployment from Docker container
This is lacking in NUXT Firebase documentation
https://nuxt.com/deploy/firebase
I have found different customs setup ...
- 612
1
vote
0
answers
36
views
How to correctly type the return values?
I created a custom ofetch instance inside a Nuxt 3 Plugin and I am exposing a wrapper function like this:
const api = $fetch.create({ // ... });
return {
provide: {
api
...
- 4,180
0
votes
0
answers
17
views
Nuxt3 clears inputs autocomplete
Clear Nuxt3 project. When i do "hard refresh" (cmd+shift+r) there are 3 states of form inputs: Empty, Autocompleted from browser, Empty. Example and code below:
HTML:
<form>
<...
- 1
0
votes
1
answer
43
views
Nuxt3 prerendering without running instance?
Standard build (npm run build) doesn't start a running server, but prerender needs it, why?
Running npm run build --prerender / npm run generate also start a nuxt instance, is there a way to avoid it?
...
- 2,628
0
votes
1
answer
15
views
Nuxt3 with prerender and detach cli
When building via npm run dev for "simple" ssr the process ends after the build is complete and the cli is freed again to be used by the user.
When introducing prerender, i.e. adding a ...
- 2,628
0
votes
0
answers
30
views
How to remove next-auth callbackUrl and error query parameter from url
I'm working with Nuxt and I'm trying to implement Credentials provider authentication with next-auth (version 4.21.1) and @sidebase/nuxt-auth (version 0.7.2). I setup a custom sign-in page and I got a ...
- 221
0
votes
1
answer
48
views
Laravel, Nuxt config for headers (cors)
error:
http://localhost:8000/sanctum/csrf-cookie' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
...
0
votes
1
answer
26
views
Adding attribute to HTML elements to whole code
I'm using Nuxt 2 in my project with Storyblok datasources as translations and e.g. I've:
<span v-text="$t('labels.cartSell')" /> and I need to add something like data-translation="...
- 113
0
votes
0
answers
18
views
How to deploy nuxt web app to Azure web app?
I have a web app based on nuxt, node.js and vue. It's working fine locally by running yarn install, then yarn dev. But after yarn build, I ftp the folder to azure web app wwwroot, I got Your web app ...
- 21
0
votes
0
answers
22
views
does NitroJS (server of NuxtJS) have a Dependency Injection like NestJS at the constructor level from the app singleton or perRequest?
does NitroJS (server of NuxtJS) support dependency injection as the following ?
call any dependency from the class constructor "dependency injection: inversion of control (IoC)" and let the ...
1
vote
1
answer
24
views
nuxt 2.18 app created with 'npx create-nuxt-app ...' has TypeError('invalid options argument') when starting npm run dev
Today I ran npx create-nuxt-app <nuxt app name goes here> and after completing the create / install I ran npm run dev just to spin it up and check everything.
npm run dev executes about half-way ...
- 144
2
votes
1
answer
30
views
Translation message can not contain stringified json
I am new to nuxt.
I installed i18n to handle translations
i checked https://i18n.nuxtjs.org/docs/getting-started
my defineI18nConfig:
nuxt-app/i18n.config.ts
export default defineI18nConfig(() => ({...
1
vote
2
answers
50
views
Why is Vue's Composable not Isolated?
I'm using Vue 3 with Nuxt 3 and Vite, and I'm encountering a strange bug. It occurs almost everywhere in my app whenever I try to use useFetch within a composable.
For example, I have the following ...
- 43
0
votes
0
answers
19
views
How to process stream data on Nuxt server
I'm trying to figure out the best way to process stream data on a Nuxt server.
On the frontend, I'm reading in a file, splitting it up into chunks, and sending it to the backend. However, I'm not sure ...
- 252
1
vote
1
answer
46
views
PrimeVue styles as "no defined" on Nuxt 3 app
What is happening?
My goal is to register PrimeVue as a module and import PrimeVue components correctly in my layouts with the default preset styles.
Thing is that when I inspect the button in the ...
- 13
0
votes
0
answers
30
views
Can't position <NuxtImg /> with object-position
I am struggling to position my images inside the <NuxtImg /> so, that they would be rendered from the top.
I have tried the following (using tailwindcss):
<script setup lang="ts">...
0
votes
0
answers
18
views
Nuxt 3 child route with dynamic parameter not getting active-class
I have the following folder structure. And the following pages are of important
/workshops and /workshops/workshop-1.
The issue I'm having now is that my active-link works for /workshops, but not for ...
- 9,065
0
votes
0
answers
27
views
NuxtJs - Fetch API blocked by CORS
I'm using Nuxt 3, and i'm facing problem with CORS, as follows:
Access to fetch at 'https://server_api_url:port/refinement/login' from origin
'http://127.0.0.1:3000' has been blocked by CORS policy: ...
- 101
0
votes
0
answers
28
views
Nuxt3 program SSR fails after deployment to server
This my config.js
export default defineNuxtConfig({
devtools: { enabled: true },
debug: true,
server: {
host: '0.0.0.0',
port: 3000
},
ssr: true,
target: 'server',
...
- 1
0
votes
0
answers
20
views
Failed to resolve import "#app/composables/script-stubs (Vitest)
I am receiving the error 'Failed to resolve import "#app/composables/script-stubs"' inside the .nuxt folder in the imports.d.ts file
My code is like this and I've tried importing everything.....
- 1
0
votes
0
answers
24
views
Nuxt Cannot stringify arbitrary non-POJOs for simple object
I've been through a few of these question on SO but I can't figure out the gist. Why does this simple class get an error:
500 Cannot stringify arbitrary non-POJOs
This is a pretty simple object
...
- 2,144
0
votes
0
answers
21
views
Nuxt project can't be initiated
npx nuxi init@latest
ERROR Error: Failed to download https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3 : TypeError: fetch failed ...
- 1
0
votes
0
answers
11
views
How do Nuxt Published modules import helper functions from a previously imported published module?
How do "published" modules import helper functions from a previously imported published module?
The docs say:
Published modules cannot leverage auto-imports for assets within their runtime ...
- 588
0
votes
2
answers
69
views
Nuxt 3 sometimes I can omit .value when using useState, sometimes I can't, why?
Please see this minimum example, if I use useState , normally, I can write something like this:
<script setup>
const num = useState('num', () => 1);
</script>
<template>
<...
- 4,473
0
votes
0
answers
26
views
nuxt server only middleware running on client
Okay, so I want to verify jwt in nuxt middleware. It might be a bad idea. Please correct me. But I also need a solution. I learned that, middleware runs on both client and server. So, here's my code
...
- 45
1
vote
0
answers
12
views
This module cannot be imported in server runtime. [importing @nuxt/kit from ../server/routes/request.get.ts]
After updating Nuxt "^3.7.4" to "^3.12.2" I keep getting the following error from multiple modules:
This module cannot be imported in server runtime. [importing @nuxt/kit from ../.....
- 395
0
votes
0
answers
15
views
I keep getting error anytime I try deploying a Nuxt-app from my github repo to vercel
[error] [nitro] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received function
"this is the error I saw on vercel when I checked why it didn't deploy&...
0
votes
0
answers
27
views
Set chunk sizes in Nuxt3
How to set chunk sizes in Nuxt3?
I have tried to set minSize and maxSize in the 'build' property of the config file but it had no effect at all to the built chunks:
build: {
publicPath: '/...
- 21
0
votes
0
answers
28
views
Trying to understand authentication with laravel-echo #27771
What I want to solve
I want to implement Laravel-Echo to my Nuxt3 Application. As Laravel is my backend, I am using Sanctum as auth provider.
What my attempt looks like
I am using nuxt-auth-sanctum, ...
- 148
0
votes
2
answers
27
views
Vue 2.15.3 Node 18.18.0 d3-org-chart require() of ES Module
I am using Nuxt 2 with Vue version 2.15.3 and my Node version is 18.18.0, npm 9.8.1
"nuxt": "^2.15.3",
"d3-org-chart": "^3.1.1",
After npm install d3-org-chart,...
- 654
0
votes
0
answers
69
views
Is that a bad idea to include `version` in the `package.json` of an application?
I am learning NuxtJS and try to build a new project myself to write some code.
It was quite smooth to set everything up, until I tried to add a version number to package.json.
2 warnings are given (...
- 13
0
votes
1
answer
36
views
Configuration Vitest in Nuxt 3
I have a large project made with Nuxt 3, Vue, Pinia, Axios, and TypeScript.
I need help with configuring Vitest to work in my project.
I've had many problems. For example, I wrote a test and it didn't ...
- 1
-1
votes
0
answers
73
views
v-for not rendering updated array items in ref after $fetch [duplicate]
I'm working on a small personal project using Nuxt 3 with the Composition API. I'm trying to update a list of videos retrieved from a YouTube playlist API and render them dynamically using v-for. ...
0
votes
0
answers
18
views
How to request API in Capacitor App created in Nuxt.js
I get error
/**
* API is not available.
*
* This means the API can't be used right now because:
* - it is currently missing a prerequisite, such as network connectivity
* -...
0
votes
0
answers
17
views
Nuxt build issue: Lexical.node.mjs not found, only Lexical.prod.mjs present
I'm using Nuxt and Lexical.js and I'm trying to build the project with the nuxt build command. After this, my dependencies are placed in the .output/server/node_modules folder in a compiled form.
...
- 985
0
votes
0
answers
36
views
Cannot find module './DataTable.vue' or its corresponding type declarations
Im using Nuxt 3, mostly default settings.
My folder structure for a component:
...
├── components
│ ├── MainNav.vue
│ ├── PageHeader.vue
│ ├── data-table
│ │ ├── DataTable.vue
│ │ └── ...
- 13.3k
0
votes
1
answer
71
views
How to pre render all the routes in Nuxt 3 application .output automatically (without hard coding and specifying them specifically)?
When I generate a .output folder for deployment in Nuxt 3 using nuxt generate or npm run generate, routes aren't pre-rendered automatically. I added prerender to nuxt.config.ts hooks to generate ...
- 3,290
0
votes
0
answers
27
views
Keep-Alive not working with NuxtLayout wrapper
Any Ideas how to get Keep-Alive working with NuxtLayout wrapped around NuxtPage? When navigating between pages of different layouts the pages get rendered again and again. Maybe there is a workaround ...
- 1,933
1
vote
1
answer
44
views
Why swipe not working properly with nuxt3 i18n?
In my multilingual site i'm using swipe for carousal. It's working fine, but getting error during switch language. I am using i18n for translation. I am getting following error:
Uncaught (in promise) ...
- 3,851
0
votes
0
answers
20
views
How to deploy a Vue Storefront 2 app on a self hosted linux server?
I'm struggling to understand how to deploy a Vue Storefront 2 app on my Ubuntu machine.
I've developed my app, inside the packages folder I have the three api-client, composables and theme folders. ...
- 1,673
1
vote
0
answers
22
views
Nuxt Pages takes a long time to load, if opened first time
I encountered a problem that the nuxt page takes a long time to load, if opened first time
It happens on all pages in the project, where i am using composables.
Example:
I have a login page, where I ...
- 11
0
votes
1
answer
36
views
I dont redirect any of page but project stuck "/login" page
I'm using nuxtjs and I have problem here, its stuck on error page and contains a text 404 Page not found: /login but I don't have a login file. I'm using prisma, supabase in this project. its here ...
0
votes
0
answers
21
views
Render bar statics with library charts
I used a library chartjs3.9. I want to render some graphics with dynamic data, but I don't know why the data is not being rendered. Here is my code:
the result for request to db is for example: b2b:[...
0
votes
1
answer
34
views
Can't import HyperFormula in a VueJS component
I'm trying to use Handsontable with NuxtJS (VueJS) and HyperFormula.
Handsontable works fine but I can't event import HyperFormula.
Node.JS 20.10.0
PNPM 9.4.0
When I do this :
import { HyperFormula } ...
0
votes
1
answer
23
views
NuxtJS move generate files from dist folder automatically
I have a small NuxtJS website for own usage that is hosted on my own NAS.
Atm I use the "yarn generate" command to create all the files and move all the files from the dist folder to my NAS ...
- 179
-1
votes
0
answers
21
views
(Vite:css) Lexical Error (unrecognised text) in Tailwind Nuxt/ Vue
I've followed this thread (https://github.com/tailwindlabs/tailwindcss/issues/1603)to fix my issue which seems pretty similar with that thread, but I have no luck. I've defined spacing: { 'number': '...
- 194
1
vote
0
answers
61
views
Dynamic server route responding with 304 Not Modified on Azure Static Web Apps when If-Modified-Since present [closed]
I have a Nuxt 3 application with a dynamic server route file like so:
-| server/
---| routes/
-----| [id]
-------| bonjour.ts
This returns dynamic content based upon the id passed in. There is no ...
- 2,659