Questions tagged [nuxt3.js]
The nuxt3.js tag has no usage guidance.
nuxt3.js
2,645
questions
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
-2
votes
0
answers
10
views
have built my website wiht nuxt3,but shows as pages have a low text-HTML ratio always
I have built my website with nuxt3 and build. but SEO shows as pages have a low text-HTML ratio always. I rechecked all pages and increased their content, but still, the warning persists.
my website ...
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
12
views
How to Add a Trailing Slash to URLs in Nuxt 3
I have a Nuxt 3 project with a directory public/urlName/ containing an index.html file. When the page is accessed without a trailing slash at the end of the URL, the files and styles located in the ...
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
0
answers
21
views
How to configure nuxt 3 to name components in dev tools according to their filepath?
In our nuxt 3 project, we have a project structure like this:
components/
MyButton/
index.vue
index.scss
index.composable.vue
For the most part this works as expected, where &...
- 2,274
0
votes
0
answers
13
views
Section Navigation via GSAP animation goes only forward Nuxtjs
I have a nuxt3 app, with an index.vue page in the pages folder. I'm using layouts/default.vue instead of app.vue
I'm have this animation were it looks like the pages are sliding on top of each other ...
0
votes
0
answers
23
views
nuxt3 couldnt import css files
enter image description heremy css file is under assets and when i try to use it as global in nuxt.config.ts couldnt get accept how do i fix this
I'm currently working on a Nuxt 3 application and ...
0
votes
0
answers
41
views
Laravel 11 response Access-Control-Allow-Origin is still a wildcard (*)
No matter how i try to confirgue cors, from config/cors.php with the following settings:
return [
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'...
-2
votes
1
answer
54
views
Nuxt 3 gives a 500 fetch failed error on Docker and Docker Compose
The application works correctly when I run it locally, but if I try to dockerize it, I get a 500 fetch failed error with no logs. I also tried running the application with node --trace-warnings but no ...
- 424
1
vote
0
answers
14
views
Nuxt image using Nuxt booster not being able to set the correct image size I want
So I am trying to use Nuxt Image to optimize my images, but since I have nuxt-booster installed, so I use booster-image.
In my code I defined the booster-image and bind the properties:
<...
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
20
views
CORS policy issues on integrating Xero's API into Nuxt 3
I'm trying to integrate Xero's OAuth 2 into my Nuxt 3 App and I kept getting issues with CORS policy.
Nuxt App > pages > index.vue
<script setup lang="ts">
import UiParentCard ...
- 375
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
2
answers
59
views
Cypress .type does not update the v-model value in my form powered by Vue3
login.vue - which is the login page
<template>
<v-container id="login-page">
<v-row>
<v-col>
<input id="username" v-model="...
- 7,178
0
votes
0
answers
20
views
how to Validate dynamic Form fields with vee-validate v4 vue3?
I am trying to validate dynamic field like this, because the component is gonna be large to share, let me show you part of it, and the one that causes the bug,
<template>
<Form v-slot="...
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
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
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
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
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
1
vote
0
answers
28
views
Nuxt development server won't start: esbuild platform mismatch after inactivity
First time I'm encountering this error. I stopped working on my code for like 2 days coming back and trying to run it with the usual npm run dev and I get this error
ERROR Cannot start nuxt: ...
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
Nuxt3 $fetch request parameters from object
How to pass request parameters with $fetch ?
filter: {
include: ['images', 'category', 'attributes']
}
get: filter=%7B%22include%22:%5B%22images%22,%22category%22,%22attributes%22%5D%7D
must: ?...
- 343
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
-1
votes
0
answers
29
views
Nuxt 3 - component high init/mount times
As the picture shows, in my app there is a component (a simple navbar) that takes sometimes almost 4s to be initialized/mounted.
The component has a very simple template and almost no logic in the &...
- 2,628
0
votes
1
answer
21
views
Nuxt -> Directory Structure -> Server getting Invalid environment configuration error when npm run build
I had a hello.ts file under the server folder.
When running npm run dev, it is able to load http://localhost:3000/api/hello.
However, when running npm run build, it returns the following error:
{
&...
- 21
0
votes
0
answers
23
views
The first time opening a component through Lazy in Nuxt is very long
Using Nuxt layouts
in the default layout I connect modals components with Lazy
And when I try to open some modal, its first opening takes a very long time. Subsequent openings happen quickly.
When the ...
0
votes
1
answer
58
views
Can't access useRuntimeConfig or useNuxtApp in pinia store in nuxt 3
I have a nuxt 3 project in which I cannot reference process.env. Apparently we have to do it differently for this nuxt version,
variables must be declared in nuxt.config -
this is my nuxt.config.js
...
1
vote
0
answers
23
views
Nuxt3 sitemap modules is not generating multiple sitemaps for dynamic routes
I am experiencing an issue with the @nuxtjs/sitemap module in my Nuxt.js project. I'm trying to generate separate sitemaps for pages and posts from a WordPress API, but neither /posts-sitemap.xml nor /...
- 51
1
vote
0
answers
63
views
How do you deploy a static Nuxt 3 app using AWS and Cloudfront?
I have a Nuxt 3 (v3.11.2) application that I'm trying to deploy to an AWS S3 bucket and serve using Cloudfront / Route53 for the domain.
In my nuxt.config.ts I'm using ssr: false and then running nuxi ...
- 5,996
0
votes
1
answer
31
views
In vueuse, what is the difference between isFetching and isFinished?
I'm using vueuse's UseFetch. What is the difference between isFetching and !isFinished ?
There definitely is a difference since some components crash using one rather than the other. Is it that the ...
- 577
0
votes
0
answers
38
views
Accessing tokens stored in localStorage from server-side
I'm attempting to implement a logout function that runs on the server-side. This function currently only removes tokens stored in localStorage upon login, as shown below:
const logout = () => {
...
- 11
0
votes
1
answer
33
views
getting a vector of float32 using $fetch and arraybuffer brings wrong results
I'm simply trying to fetch binary data created by writing float32Array data to a binary file. When fetched using fetch (in vue.js/nuxt3) the values are completely different from the original ...
- 2,771
0
votes
1
answer
21
views
useFetch doesn't work as expected in nuxt
I'm using useFetch watch to trigger a request when some data changes.
My code:
<script setup>
const page = ref(1);
const pageCount = ref(10);
const search = ref('');
const filterParams = ref({
...
- 1,070
0
votes
0
answers
17
views
Nuxt 3 & nuxt/apollo cant call mutate function if called from @click
When I am trying to call the mutate function with a button I get no response and the mutation is not working yet when I call it on page reload everything is working fine.
This is my login.vue
<...
- 1
1
vote
3
answers
41
views
How to convert nuxt props from typescript in to js
I was wondering how can I convert this little snippet from typescript into JS.
<script setup lang="ts">
import { type Content } from '@prismicio/client';
defineProps(
...
- 29
0
votes
0
answers
18
views
NuxtJS & Sanctum Auth Issue
I've nearly depleted all my mental energy on this.
I am working with NuxtJS and have created a page, /task2, to experiment with so that I don't interfere with other functions that are already working.
...
- 8,615
0
votes
0
answers
40
views
How to change custom selector for darkmode in tailwindcss?
I'm using tailwindcss with nuxt3, how can I change the selector for darkMode in tailwind.config.js?
I know tailwindcss using <html data-mode="dark"> selector for change the darkMode, I ...
- 31
0
votes
0
answers
18
views
Nuxt 3 + Prismic. Slide zone only displaying placeholder text for component
I'm working with nuxt3 and prismic as cms. For the page content I'm using the slice machine. When adding the slice zone to my template, it displays only "Placeholder component for hero (variation:...
- 29
0
votes
0
answers
51
views
Nuxt 3 app can not connect to database using SQL Server
I can not connect to the database using nuxt js and SQL Server
my error:
Database connection failed: sql.connect is not a function
at connectToDatabase (server\db\index.ts:21:24)
at sqlQuery (server\...
- 1
0
votes
0
answers
23
views
Nuxt3 i18n, Page route for only one locale
I want to create some pages on my Nuxt3 application that are available only for one locale.
For example I have these 2 locales:
i18n: {
locales: [
{
code: 'fr',
file: '...
0
votes
0
answers
80
views
useCookie in Nuxt 3
I use Nuxt 3, Vue 3 and pinia. I try to set cookies:
stores/auth.ts
import { defineStore } from 'pinia';
export const useAuthStore = defineStore({
id: 'auth',
state: () => {
return {
...
- 79
0
votes
1
answer
36
views
Page navigation with Nuxt3/Electron not working - not allowed to load local resource with '#'
I am using electron-forge to build a project using this nuxt-electron module with
npx nuxi generate && electron-forge make
the build works fine and I am also able to start the app and the ...
- 37
0
votes
1
answer
64
views
How to create sticky table headers in a Nuxt UI Table Component?
I am trying to create "sticky table headers" so that way when the user scrolls a long list of table data rows, the headers stick to the top and visible in the viewport and keep the user ...
- 5,149