13,109
questions
0
votes
0
answers
26
views
Nuxt App in Monorepo Fails to Compile and Shows a Vanilla Template When Outside Repository
I have a monorepo containing two Nuxt 4 apps and a NestJS application. The NestJS app works fine as expected without any issues.
However, when I try to run either of the two Nuxt applications, I ...
- 474
0
votes
0
answers
5
views
Nuxt - CSP of defined css-files has no nonce and fails
Issue:
I have multiple css files which are defined in the nuxt.config.ts. I have the nuxt-security with strict enabled.
The issue i have is that the CSP fails cause the content of these css-files is ...
- 31
0
votes
0
answers
14
views
Issue with Nuxt’s useFetch returning null during SSR but working fine on the client
I am using Nuxt and have wrapped the useFetch function to handle API requests with a custom setup for headers, error handling, and other configurations. Below is my implementation:
// Core API wrapper
...
0
votes
0
answers
11
views
How to do a senseless refresh with ofetch in nuxtjs？
Interface returns 401 will enter the onResponseError function, onResponseError inside the token will be refreshed and resend the request, but no matter what the result of this function returns the ...
- 1
0
votes
1
answer
34
views
Nuxt Build Error: [vite]: Rollup failed to resolve import
I have a Nuxt app with Primevue library. Running the app in dev mode is perfectly fine. However when I try to build the app for production using npm run build. This error occurs:
Nuxt Build Error: [...
- 408
0
votes
0
answers
16
views
How to efficiently initialize pinia state like user auth in nuxt3 via api call
I have a nuxt 3 app, I use pinia to manage the user authentication state.
I defined the store like this
interface AuthUser {
id: number;
username: string;
email: string;
roles: string[]...
- 3,742
0
votes
0
answers
7
views
pageTransition after route change DOM not Updated - Nuxt 3
I have a component that I put in the layout. The component calculates the size of the layout and does something simple:
components/info.vue :
<script lang="ts" setup>
const info = ref()...
- 91
0
votes
0
answers
11
views
Flowbite bug: why does this dropdown have to be clicked twice before edit modal appears?
This is the dropdown button
<td class="flex items-center justify-end px-4 py-3">
<button
:id="`${el.id}-...
- 38
0
votes
0
answers
13
views
Why does my client-side script is not working on a SSR generated page with Nuxt2?
I'm building a SSR website with Nuxt2 (OK, I know, I have to migrate to Nuxt3 :)) and I'm facing a problem.
When I access a recipe page from another page on the website, the "servings" ...
1
vote
0
answers
20
views
Nuxt 2.17 server getting slow and stop working
I have a bunch of Nuxt 2.17 + Vuetify 2 apps that all share same core. (just imagine a SaaS app like Wix or Shopify where the cms is on a separate server and the actual user-end app is on another one. ...
- 1,274
1
vote
2
answers
21
views
Nuxt ionic bottom navigation bar Not fixed
use I used https://ionic.nuxtjs.org I created a bottom navigation bar using html css and placed it within NuxtLayout, but when the page is larger than the screen size (it has scroll), the bottom ...
- 91
0
votes
0
answers
38
views
Azure AD authentication token refresh not working in Nuxt 3 with @sidebase/nuxt-auth
I'm building a Nuxt 3 application using Azure AD authentication with @sidebase/nuxt-auth. I'm trying to handle Azure secrets securely in both development and production environments.
Initially, I ...
- 1
-1
votes
1
answer
33
views
How Nuxt is diffrent from Vue when it comes to reactive variables?
I used Vue for years for my frontend (amateur) development and decided to give a try to Nuxt.
After going though the tutorial I thought I had a general idea and created a simple project where:
I ...
- 29.7k
0
votes
0
answers
22
views
How to log the version of my Nuxt app on server startup?
I want to write out a log line that reads "started version 0.4.0" when I start up the server, where the version is taken from the package.json file.
I defined a module and I'm passing it the ...
- 2,484
0
votes
0
answers
13
views
Nuxt generate hangs on ci/cd
I'm working with a legacy website Nuxt.JS 2 that used to be built on Cloudflare, but now it's not possible (due to high memory consumption). Increasing memory with --max_old_space_size doesn't work, ...
- 690
0
votes
1
answer
53
views
Getting Prettier and ES Lint working on save with Nuxt 3
I've been having the hardest time getting linting setup in a Nuxt 3 boiler plate.
My requirements:
Prettier for formatting and stylistic rules
ES Lint for fixing problematic patterns and code
Vue ...
- 14.4k
0
votes
1
answer
35
views
setup script for more than one component from one place - Nuxt3
i use Nuxt3
I have an /components/icons folder
Inside the /components/icons there are many icons :
/components/icons/apps.vue
/components/icons/arrow-up.vue
/components/icons/bookmark.vue
/components/...
- 91
1
vote
0
answers
18
views
Nuxt 3 Route Groups and Layout Issues with Route Groups
I'm trying to create a layout that applies only to pages within a specific route group in Nuxt 3, but I'm running into several issues with different approaches.
Current Setup
My current directory ...
- 16.4k
1
vote
0
answers
27
views
Nuxt-UI: Select menu doesn't work in nested modals
I faced an issue with select-menu. When I use it in a nested modal it doesn't work as expected.
I have re-created a demo for it:
Check it
Sample.vue
<script setup lang="ts">
import { ...
- 1,124
0
votes
0
answers
19
views
Issue with unfilled Google ads on url path change
I am building a Single Page Application using NUXT 3 framework where user can generate new colors palettes by clicking on space bar (similarly to Coolors). Every time user hit the space bar, a new set ...
- 1
0
votes
0
answers
22
views
Nuxt assets/public SVG files don't reflect changes
When storing svg files for icons in either my assets OR public folder, If I make any changes to the svg, I need to rename the file and restart my dev server for the changes to be reflected. All past ...
0
votes
1
answer
18
views
Nuxt 3 - Props are not reactive or update properly when modified in parent component
I'm working on a Vue.js application and have encountered an issue where the tasks in a list (submissions) are not updating reactively when modified within the parent component. I have a ...
- 41
0
votes
1
answer
24
views
What is the equivalent of the asyncdata hook in Nuxt 3 for SvelteKit?
I just started learning SvelteKit and need to know the hook that does the same thing asyncdata does in Nuxt3 which is:
If a user makes a request to get a page and the request gets to the server first ...
- 161
3
votes
0
answers
31
views
How to prevent Nuxt state being serialized to DOM and served from CDN cache?
I need help about Nuxt that would help me prevent some of our SSR (Server-Side Rendered) pages when user information has been fetched and stored in our pinia store being cached.
Problem: Currently, ...
- 4,354
0
votes
0
answers
44
views
Nuxt Content - 500 Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue
I have an error when I go to a markdown document from my main page, and I click on the arrow to go back in my browser.
It notes me this error:
500
Failed to fetch dynamically imported module: http://...
- 29
0
votes
0
answers
29
views
Converting axios to useFetch Nuxt 3
The problem i am encountering is that i started a project , and i build the entire API call using axios. Since i am in Nuxt 3 , i am trying to convert it to useFetch. I am encountering a problem , and ...
- 51
0
votes
0
answers
12
views
WEB No camera found in nuxt js
I create a project with nuxt 3, and use qr-scanner package, my project run successfully and camera works, but when i shared my project to another device with my (ip and port) camera not working, it ...
0
votes
0
answers
41
views
How to hide API requests in Nuxt.js to prevent them from appearing in the Browser console?
I'm developing an application with Nuxt and using useFetch to fetch data from an API. In theory, with SSR rendering, these requests shouldn't appear in the browser’s console, but with Nuxt, I can ...
- 1
0
votes
0
answers
18
views
How do I set up a Nuxt + Nitro + TypeORM application?
So I'm new to Nuxt ecossystem, I'm coming from years of Laravel/PHP use, even tho I'm familiar with Vue/TypeScript.
I just can't make it work properly, the problem I'm facing is that I can't set the ...
- 711
1
vote
1
answer
42
views
Imports in Nuxt with @ or ~, which is better?
In Nuxt 3, imports can reference the project root using either ~ or @, for example:
import SubHeader from "@/components/SubHeader.vue"
vs
import SubHeader from "~/components/SubHeader....
- 10.4k
0
votes
0
answers
19
views
How to use Nuxt build project to my node express server
After building my Nuxt project, the dist folder generated on the client side contains both client and server subdirectories.
Unlike with a standard Vue.js app where I can simply copy the dist folder ...
0
votes
1
answer
29
views
Nuxt Fetch always return 401 using cookies
I have a problem that makes me confused, I created a web that runs on http://localhost:3000 and a backend that runs on http://localhost:5050 with a fetch data with useFetch and $fetch in it, when I ...
0
votes
0
answers
22
views
Nuxt 3 server middleware touching to client pages
I'm kinda new at nuxt.
I'm trying to protect my API endpoint with authorization middleware.
(Using auth-utils with default configuration)
I'm basically returning unauthorized error code if path is not ...
- 35
-1
votes
0
answers
27
views
Splash screens for PWA(IOS) on Nuxt2
I'm trying to set up a splash screen at PWA. I generated the pictures via pwa-asset-generator, connected the pictures in nuxt.config. When I open the application on IOS splash screen does not appear, ...
1
vote
1
answer
34
views
Nuxt + Zod: input type="file" does not display the file name on the first selection
I'm working on a Nuxt project using VueJS and Zod for form validation, and one field is a input type="file". The issue is that, on the first file selection, the input does not display the ...
- 162
0
votes
0
answers
25
views
Nuxt/Vue2 testing: "getActivePinia()" was called but there was no active Pinia
I'm converting a Nuxt/Vue2 app (which I didn't write) from Vuex to Pinia to prepare for upgrading Nuxt/Vue. After finishing the Vuex->Pinia migration the app runs but tests do not. Here's an ...
- 2,757
0
votes
1
answer
29
views
Nuxt/Vue error `slice` is not a function on computed property
I've been pulling my hair on the following issue for quite a while and can't seem to find what I am doing wrong.
I'm building a Nuxt/Vue app and I want to display a list of users fetched from backend/...
- 471
1
vote
0
answers
50
views
Vuetify 3, using a combobox in a v-for sends warning
I'm using Vuetify 3.5.14. I have a v-for for levels. On each level i have few spells represented by a combobox
When i select the value of a combobox, it works fine, but when i try to search inside the ...
- 520
0
votes
0
answers
21
views
Using Node.JS 'require' within Nuxt framework to send Twilio SMS text
This should be relatively basic to solve, but I'm spinning my wheels on whether I am using Node's CommonJS module's 'require' function in the wrong context (i.e. Nuxt folder structure) or if I can ...
- 13
0
votes
1
answer
12
views
Getting html from Vue 3 component for use in map marker
I'm migrating from Nuxt 2 to Nuxt 3 and trying to work out how to do the equivalent of this in Vue 3:
import MapIcon from '~/components/elements/geo/map/marker/MapIcon.vue'
const IconInstance = Vue....
- 5,958
0
votes
0
answers
37
views
Use v-for of number to load multiple <img>
I have an index.vue page that sends title (string) and picCount(number) to ShowPics.vue components.
I have multiple pics in assets\pics\gilmore_girls\ , like pic attached
assets\pics\gilmore_girls\
...
0
votes
0
answers
25
views
How to Use Secret in Amplify Nuxt App Sever
I'm trying to use Amplify's Secret as per https://docs.amplify.aws/vue/deploy-and-host/fullstack-branching/secrets-and-vars/#access-secrets .
My issue is that I seem to only be able to call the query ...
- 1,947
-2
votes
2
answers
75
views
Extra quotes when converting Date to string for fetching request
My Date objects from and to are incorrectly encoded with extra quotes which results in bad request URL. I've tried multiple functions to convert the Date to string (toJSON, toISOString, ...
- 467
0
votes
0
answers
18
views
How to connect supabase with the new version of nuxt
I get the following error:
Uncaught SyntaxError: The requested module 'http://localhost:3001/_nuxt/@fs/home/bobak/codehub/nuxt-mastering/node_modules/.pnpm/@[email protected]/node_modules/@...
- 469
0
votes
0
answers
57
views
PrimeVue dropdown with search filters' value reset issue
So I have been working on a project management tool's dashboard overview, where users can filter projects, statuses, due dates, etc. As the project list is a bit larger, I decided to add a filter in ...
0
votes
0
answers
45
views
How do I copy over static files to a firebase function
I have a nuxt 2.0 application in an Azure Devops Pipeline and being published to firebase.
In my deployment, I'm trying to copy over the static assets to the functions, but I can't get them to deploy. ...
0
votes
1
answer
64
views
How to Add Custom Colors to NuxtUI with Tailwind
I'm working on a Nuxt project and trying to add custom colors to NuxtUI components. I’ve managed to make it partially work, but the process feels a bit clunky. I’m looking for a more straightforward ...
0
votes
0
answers
54
views
Nuxt 3.13.2: nuxt generate build hydration completed but contains mismatches errors
I develop a website that runs with Nuxt 3.13.2, DaisyUI and TailwindCSS with bunch of nuxt modules, kindly please check the package.json details below:
{
"name": "the-website",
...
- 330
0
votes
0
answers
29
views
Does navigating between client components in Nuxt trigger a request to the server?
In nextjs when navigating between client components after already having the app loaded, it still triggers a request to the server which sends back a basic html file of the page requested.
I want to ...
0
votes
0
answers
28
views
Passing a `key` attribute from a native HTML element to a Vue/Nuxt widget
I'm developing a custom widget using Nuxt 3, and it's encapsulated within a shadow root. I need to pass an API key to this widget using the key attribute from a native HTML element like so:
<my-...
- 1,540