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)
12,510
questions
0
votes
1
answer
12
views
VueJS/Nuxt.JS how to properly load state from localstorage using "useLocalStorage"
I am trying to use useLocalStorage from pinia, however on store's state, data is not fetched from local storage but getting the default value instead.
Here is the code in my store method:
import { ...
0
votes
0
answers
27
views
Alert Component does not show after triggering the same Error twice
I am currently working on a Website using Nuxt.js (Vue.js) and I am having trouble with my custom Alert Component.
I created a contact-form on my website that triggers a custom notification when the ...
0
votes
0
answers
6
views
Accessing rendered HTML in Nuxt hook in order to process and change the order of meta tags in nuxt2
I used the capo.js extension and my website has a critical ordering issue in metatags.
how can I find a way to reorder meta tags based on capo.js suggestions in nuxt2 SSR?
I tried to find a way to ...
0
votes
0
answers
7
views
Event Listeners Not Working After Route Change in Nuxt3
Stack Overflow community!
I'm currently working on a Nuxt3 project and facing an issue with mouseenter and mouseleave event listeners within my layout. These events work as expected on initial page ...
0
votes
0
answers
20
views
error when navigating via nuxt-link: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
I encountered a problem that when I go to nuxt-link I get an error:
runtime-dom.esm-bundler.js:39 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (...
0
votes
0
answers
17
views
Cannot Access Store Data after Initialization
I am developing a Nuxt 3 SPA that has a Single API call that I make in the onMounted() hook in my app.vue. I use Pinia and I have defined a function in my Pinia store and I call that function to ...
0
votes
0
answers
6
views
What is causing the error Cannot find name 'useSupabaseClient'. when using Nuxt 3 and Supabase?
Using npm I have installed Nuxt 3 and Supabase but in vs code I keep getting the following error;
Cannot find name 'useSupabaseClient'.
When I run npm run dev I get the following error message on the ...
-1
votes
0
answers
37
views
"nuxt.options._layers is not iterable" error. What to do ? First day with vue.js
I am totally new to vue.js and I got this error while trying to launch my first npm run dev :
nuxt error : nuxt.options._layers is not iterable
I can't find any help about this anywhere. What to do ?...
0
votes
0
answers
7
views
useFetch to authenticate token
I have a NUXT component that just needs to authenticate a users zendesk token, would the useFetch composable the correct way to do this?
I first gave this a go but looking to rewrite in the best way:
...
0
votes
0
answers
8
views
Is it possible to redefine the last nested layout instead of the first one?
This is the test repository: https://stackblitz.com/edit/nuxt-starter-dps2dp
As you can see on the Level 2 / v2 page the default layout will be replaced, but I'm looking for a way to replace the level-...
0
votes
1
answer
26
views
Issue with getting transitions to work on appear
Here is a reproduction link:
https://stackblitz.com/edit/github-vats7o?file=pages%2Findex.vue
The problem is that I want to make a transition on appear. I can't get it to work so it uses my custom ...
0
votes
0
answers
43
views
Component output renders incorrectly after running Nuxt production/build
I've got a headless Nuxt 2 (2.17.1) website running in production mode (NODE_ENV=production), which renders a component imported from a package incorrectly.
The problem is that the name of the ...
0
votes
0
answers
11
views
Custom routes for server handlers in NuxtJS
Currently, I have set some server handlers in my server/api directory.
However, due to some architecture constraints, the backend will take the same /api path.
To mitigate this, I found out that I can ...
0
votes
0
answers
14
views
Buefy "The client-side rendered virtual DOM tree is not matching server-rendered content" after adding password field
I am using Nuxt 2 with Buefy and FontAwesome here
All I did was add a /login route with a login form asking for email and password
I keep getting this error "The client-side rendered virtual DOM ...
0
votes
0
answers
12
views
Nuxt 2 layout/error.vue template is only rendered in development mode
When my API throws a server error (500), i am redirected to my layout/error.vue template in my development environment, but not in production, where the API call seems to be failing 'silently' in the ...
0
votes
0
answers
22
views
Nuxt3 - Route not Found
Before routing to any path it is showing but whenever my app contains some reloading, refreshing functions or even if I reload the website manually the nuxtapp is revealing 404 not found error.
So I ...
0
votes
0
answers
18
views
How to add a base64 image to tiptap editor?
I am using tiptap editor in vue and nuxt js and I wanted the user to upload images but the usual way is to ask them for url from the prompt and then show it or load it. I want an input tag which then ...
0
votes
0
answers
21
views
Nuxt 3 App Freezes Windows on 429 Response from Server - Need Help Resolving
I'm encountering a critical issue with my Nuxt 3 application that has been causing my Windows environment to freeze whenever the server responds with a 429 status code. To elaborate, when the server ...
0
votes
0
answers
23
views
useFetch composable in Nux.js 3 is not working for localhost endpoint
The backend is in python which has endpoint /blogs. When called from useFetch composable with http://localhost:8991/blog. I'm getting fetch failed error, but if I use http://127.0.0.1/blogs it works ...
0
votes
0
answers
20
views
How can I access context's req in Nuxt3?
How can I access context's req in Nuxt3?
nuxt2
asyncData({req}) {
const body = req.body;
}
I used useRequestEvent().req.body and useNuxtApp().event.req.body.
but both is undefined.
nuxt3
const event =...
0
votes
1
answer
36
views
Nested useFetch cause Hydration node mismatch in Nuxt 3
Inside a Nuxt 3 page, I fetch post data by calling an action from a pinia store:
<template>
<div v-if="postData && postContent">
{{ postData }}
{{ postContent }}...
0
votes
1
answer
29
views
How get route's params with Nuxt3
I used Nuxt3 with Composition API.
When moving from bakset to order, basket is using router.push, and is turning over parameters. How can I get these parameters from order? In the nuxt2 version, you ...
1
vote
0
answers
17
views
How to use a dynamic path with Nuxt-Content?
I'm trying to display a document of a Nuxt-Content folder with a dynamic path :
<script setup lang="ts">
const n = ref(1)
</script>
<template>
<div>
<...
0
votes
0
answers
27
views
Nuxt 3 project cannot locate PWA icons
DevTools Error
I'm currently trying to implement PWA functionality into my nuxt 3 project but I keep getting this issue: [Vue Router warn]: No match found for location with path "/icon_512x512....
1
vote
0
answers
23
views
Missing CSS and JS Files in Nuxt.js Build
I have made some configurations in Nuxt.js, successfully removing hash values from generated files. However, after running the build, I've noticed that there are no CSS and JS files in the 'dist' ...
0
votes
0
answers
12
views
Tailwind config not properly applied with nuxt-security. Content-Security-Policy for tailwind-css
I have a nuxt project with nuxt-security and nuxt-ui, which uses tailwind-css.
I have a tailwind.config.ts where I change the font-family:
// tailwind.config.ts
import type { Config } from '...
0
votes
0
answers
21
views
Tailwind config not properly applied with nuxt-electron
I have a nuxt monorepo with the following structure:
├──📁 apps
│ ├──📁 app1
│ │ ├──📁 electron
│ │ ├──📄 app.vue
│ │ ├──📄 nuxt.config.ts
│ │ └──📄 package.json
│ └──📁 shared
│ ...
0
votes
1
answer
17
views
How to properly check Firebase Auth with Nuxt Middleware?
I have a Nuxt app connected with Firebase. I have a composable useAuth() with the following code:
import { type User, onAuthChangedListener } from 'firebase/auth';
export default function () {
...
0
votes
0
answers
18
views
Swiper Nuxt3 - 500 ambiguous indirect export: Pagination
I would like to create a carousel in a nuxt3 application with swiper.
I have tried several ways but I always get the same error:
500 ambiguous indirect export: Pagination
Here is what I tried:
<...
-1
votes
1
answer
41
views
Why are my images not displaying properly on my web page?
So right now I am trying to make a staff page for a website for me and a few friends. Right now I am having an issue where my images on the staff page are not being shown properly. My components ...
0
votes
0
answers
28
views
Nuxt 3: SEO/Meta data from API not visible when sharing link on social media
I have a blog in Nuxt 3 and each blog content along with meta data is rendered through api response. The issue is when I share the blog on social media it do not show any meta data that received in ...
0
votes
1
answer
50
views
Cloud Functions (2nd gen) and the "onCall" method: Why is "request.auth" undefined in SSR page?
Why am I getting a request.auth is undefined in this onCall function?
I am using Firebase Function emulator for this test.
I am trying to call a Firebase function directly from my app like so:
/...
0
votes
1
answer
24
views
vue-select with tailwind css class for longer text the search input field goes to next line
I am using the vue-select with vee-validate within my Nuxt 3 application but the problem is that when the selected option text is too large then the <input> goes to the next line due to which ...
0
votes
0
answers
26
views
The exception occurs when I try to use Nuxt3 to add the nitro plugin
(My English is weak, the following text is translated by Deepl)
In the process of learning this framework by reading the Nuxt3 documentation, when I read the following section
https://nuxt.com/docs/...
0
votes
0
answers
23
views
Integrating Nuxt.js for SSR in a Dockerized Stack with Python FastAPI, Elasticsearch, MongoDB, and Vue.js
I'm currently using a Docker Compose stack that includes:
Traefik for SSL and proxying (all to the FastAPI).
Python FastAPI for backend API and serving static files.
Elasticsearch for search ...
0
votes
0
answers
21
views
How to use redirectTo during Sign In with Supabase and Nuxt?
This is the code that I use and works:
const redirectTo = `${window.location.origin}${query.redirectTo}`;
const { error } = await client.auth.signInWithOAuth({
provider: "google",
...
0
votes
0
answers
19
views
why I am getting `useCart/addItem Error: Product Type undefined not supported in add to cart yet` error in `vue storefront`?
script>
import {ref} from '@nuxtjs/composition-api';
import {useProduct, useCart} from '~/composables';
import {SfImage, SfTile, SfHeading, SfPrice, SfSelect, SfAddToCart} from '@storefront-ui/vue';...
0
votes
0
answers
9
views
NuxtJS- static files
so I have a file named config.js inside the public folder, the reason for that location is I don't want that file to get rendered after I run "npm run generate", but after I run the command ...
0
votes
0
answers
33
views
Using Nuxt Image Optimisation With Firebase Cloud storage
I employ Nuxt Image to reduce image sizes and quality.
Image URLs are obtained using nuxt server routes to obtain the download urls of the images.
In nuxt.config.ts, I've included the firebase storage ...
0
votes
0
answers
23
views
Nuxt 3: Nested dynamic routes not prerendering as expected
I'm working on a Nuxt 3 project with the goal of having every page prerendered at build time, except for specific dynamic routes like my shop and products pages, which should always be dynamic. I'm ...
0
votes
0
answers
13
views
How do I properly do API calls usin Nuxt 3 Generate method
As the title suggests, whenever I perform a search in production using npm run generate, I get a 404 response for the search API
I have the following structure
pages/search/index.vue
and
server/api/...
0
votes
0
answers
32
views
Create Nuxt 3 UModal (Nuxt UI) dynamically
I have a table with multiple rows, like the following sample:
Now I want to show modal to re-confirm the action before actually deleting.
Currently I use a global variable to pass deleteModalId data ...
0
votes
0
answers
35
views
Is there a way to only download the login.vue page of a client-side application until the user authenticates?
I am developing a Nuxtjs 3.x web app. And I am wondering if it is possible to hide any sensitive front-end code from unauthenticated users.
For instance, an unauthenticated user would load the website ...
0
votes
0
answers
17
views
Mock Service Worker warning in Nuxt3
While playing around with Nuxt3 for the first time, after some time I observed that the console issues a following warining:
[Vue Router warn]: No match found for location with path "/...
0
votes
0
answers
25
views
Nuxt3 + Vuex Basic example
I'm new using Nuxt3 and I want to add some state management with vuex
I have this App.vue file
<template>
<NuxtPage />
</template>
<script>
export default {
mounted() {...
0
votes
0
answers
15
views
Custom serialization and deserialization with pinia in nuxt3
I am working with Nuxt3 and Pinia. I love how the majority of the SSR hastle is managed automatically for you. However, I have a custom class that makes my life a lot easier. It has some convenient ...
0
votes
1
answer
22
views
How do I make a dynamic route in nuxt
I need help because I have a api route that works like this localhost:3000/api/info/${id}
and I want to set it up so I can go to localhost:3000/info/${id}
and it will have the data that gets returned ...
0
votes
1
answer
49
views
nuxt/image module in nuxt 3 causes problem in production
When using the Nuxt/Image module and building the application, the image URLs are being changed to https://domain.x/_ipx/_/images/foods/Appetizaer/Garlic-Bread.png. However, the images cannot be ...
0
votes
1
answer
35
views
Nuxt vuetify not recognised in Nuxt.config.ts
new error for me, trying to install Nuxt vuetify
Install with
npm install --save-dev @invictus.codes/nuxt-vuetify
npm install
Then I add the module to Nuxt.config.ts
export default ...
0
votes
0
answers
18
views
ckeditor5 duplicated modules error in nuxt 3
I have used the ckEditor 5 "@ckeditor/ckeditor5-build-classic": "^40.2.0", in my Nuxt 3 project and I want to upload images within the editor and for that I have used plugin CKBox &...