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,073
questions
0
votes
0
answers
3
views
TailwindCSS with Nuxt 3 application: how do I use custom class in the Nuxt 3 component with @apply?
Sometimes I get the error when using the custom TailwindCSS class with @apply in my Nuxt 3 component <styles>. The issue is during the build npm run generate or npm run build but most of the ...
- 3,310
0
votes
0
answers
11
views
Nuxt Vercel Deployment Failing
Worth a shot asking here. I am having trouble deploying my Nuxt app onto Vercel for some strange reason, I can't pinpoint the error. When I deploy, everything seems fine in the deployment script, but ...
- 87
0
votes
0
answers
5
views
Automatically prepend image URLs in Nuxt Content
With Nuxt Content v2, is there a reasonable way to provide front-matter data in markdown documents to components used inside the markdown without passing it as explicit props?
For example:
---
title: &...
- 9,843
0
votes
1
answer
16
views
Can't access Nuxt Studio data inside of Nuxt application
I have this nuxt.schema.ts it loads perfectly on https://nuxt.studio without any issues and I can alter the options, how do I access this object in my app? If I use const config = useAppConfig() it ...
- 49
0
votes
1
answer
19
views
How to set proxy in Nuxt3?
I can't understand why setting proxy in nuxt 3 doesn't work
When im trying to get data i see incorrect url in development tools
Below is my code, what am i doing wrong?
nuxt.config.js
export default ...
- 11
0
votes
1
answer
14
views
Hi, I have only basic knowledge on web dev and I need help on my project to start a new intern job, I need to know where to start and steps to follow
Food recipe site
The goal is to build attractive food recipe website that people can browse and can signup/login and share their recipe
any user visiting the site should be able to browse recipes ...
0
votes
0
answers
13
views
How to prevent gtm sensetive data sending?
I`ve got Nuxt 2 + nuxt-gtm and there is a problem
I`ve got oauth2 scheme of auth and when login user returning to /callback page with query like code=some_code&state=some_state
How to prevent ...
0
votes
0
answers
9
views
How can I using common routes for multi-projects
I am using NuxtJs 3 and I have 3 folders containing 3 different nuxtjs projects in which the "packages" folder contains 2 subfolders "cms" and "monitor". When I run the ...
0
votes
1
answer
28
views
How to redirect to a specified route in Nuxt server api?
I am currently doing a project using Nuxt and I am using the Nuxt server/api folder for all of my external API. What I'm trying to do is that, I want to redirect back to the / page if there are any ...
- 47
0
votes
0
answers
10
views
How to handle folders in nuxt content? And how to connect with a nuxt app?
currently this is my nuxt content application:
components/
Report.vue
content/
index.md
report1/
report.md
index.md
report2/
report.md
index.md
where content/index.md contains a list of the ...
- 3,958
0
votes
0
answers
19
views
How to include highcharts in Nuxt 3.7.0?
How can I include this combination graph https://www.highcharts.com/demo/highcharts/combo-dual-axes chart in my nuxt vue application ?
I followed this https://www.npmjs.com/package/highcharts-vue docs,...
0
votes
0
answers
23
views
Implementing SwiperJs Thumb Gallery In Nuxt 3
I'm working on a Nuxt 3 project and trying to implement a SwiperJS thumbs gallery - https://swiperjs.com/demos#thumbs-gallery. I want the thumbnails to synchronize with the main slider so that ...
- 317
1
vote
0
answers
25
views
Always getting PaymentIntent status: requires_payment_methodThe PaymentIntent requires a payment method
I am always getting this after a purchase in a Nuxt 3, stripe project: PaymentIntent status: requires_payment_methodThe PaymentIntent requires a payment method.
Here is my frontend function:
try {
...
- 13
0
votes
0
answers
10
views
Upload large files to Vercel (using CSR?)
I have a Nuxt3 project that is hosted on Vercel. Currently, I added an upload-file functionality that sends the data to an API (the API is hosted on Firebase). The API stores the files in Firestore.
...
- 95
0
votes
0
answers
25
views
Supabase logging in is too slow for Nuxt
I am making a simple Nuxt3 and supabase app that simply handles authentication through GitHub. My goal was to have middleware in place to protect pages from users that weren't signed in but when I had ...
0
votes
0
answers
13
views
How should I use Nuxt Apollo outside of vue component or script setup to create repository for API calls?
I'm not a software engineer or nothing close to it and I'm in the process of learning to create a web app.
I'm playing with a NUXT app and Graphql, in which I'm trying to call a NESTjs API from ...
- 1
-2
votes
0
answers
24
views
Managing Repeated Data: Script Array vs External JSON [closed]
I'm working on a Nuxt project where I have a section with 8 <li> elements, each containing an image, alt text, class, and a link. I want to avoid repetitive code by using a loop to render these ...
- 317
0
votes
0
answers
14
views
Performance disadvantages of splitting every component into separate chunks in Nuxt?
So I'm working with Nuxt 2.15 (Vue 2.6). Usually if we have a component that is rendered using v-if (so it is not always needed) we import it like this:
components: {
SideCategory: () => ...
- 613
0
votes
3
answers
21
views
Nuxt, .env and plain .js files
This relates to an app running Nuxt 3.12.4.
I need to set a variable in a .env file, but that variable is needed in a plain .js file within the application's /lib. This, in nuxt.config.js, should make ...
- 2,612
0
votes
0
answers
26
views
What causes Cannot find module '~/pages/index.vue' or its corresponding type declarations. ts(2307) error while using router.options.ts?
see sample image here
I have a nuxt 3 project and I would like to use custom routing with it. I followed nuxt documentation on custom routing and added a folder named 'app' and inside I created router....
0
votes
0
answers
15
views
Try to set false value using UseQuery Vue
I am learning Vue at the moment. I'm trying to create a loader from the front-end for a table. I set the value true first before getting results from the endpoint so that the loader can work in <...
- 301
0
votes
1
answer
31
views
+50
How Do I Pass Streaming Data from Nitro API to Pinia Store so I can use it in Nuxt Component?
In my Nuxt app I have a Pinia store and am making an API call via the Nitro server that gets streaming data in response. When I try to update the Pinia store with the streaming data it does not update,...
- 1,937
0
votes
0
answers
18
views
Nuxt.js global middleware keep redirecting me to login after refershing a page after authentification
So i have a globabl middleware that is supposed to portect other routes based on if a token is in local storage
import { parseCookie } from '~/utils/parseCookie';
export default ...
1
vote
1
answer
50
views
+50
How to set loadingTemplate inside custom Nuxt Module
I'm building a nuxt module, and want to set loadingTemplate within this module.
What I tried so far is modifying devServer inside module like below (But no luck)
import { loadingTemplate } from './...
- 4,048
-1
votes
0
answers
32
views
Nuxt App Error: Package import specifier "#internal/nitro/virtual/app-config" is not defined
I'm encountering an issue while trying to run my Nuxt application locally after i install nuxt content module before it the project is woring normally . The app fails to start and throws the following ...
0
votes
0
answers
42
views
Nuxt 3 Supabase - 500 auth Session missing
I am trying to integrate Supabase Github OAuth with Nuxt 3 but I am having an error "500 auth session missing" and it's very slow!
The server middleware causing the Error: (user.ts)
import {...
- 285
0
votes
0
answers
14
views
Deploying nuxt/laravel site to forge laravel give me an error 500 concerning nuxt chunks
I have an error when deploying the nuxt part of my nuxt/laravel site to forge laravel. I get the following error Cannot find module '/home/forge/my-site.com/.output/server/chunks/app/_nuxt/index-...
- 57
0
votes
0
answers
39
views
Open/Close a Sheet component from shadcn-vue using a button in a parent component
I am using Nuxt and have added a Sheet component from shadcn-vue (https://www.shadcn-vue.com/docs/components/sheet.html) into my project. The example provided in the documentation uses a SheetTrigger ...
- 317
0
votes
1
answer
38
views
How do I trigger hot reloads for my custom CSS in my vue component?
<template>
<div class="binav" ref="binav">
<div class="nav-content" ref="content">
<component :is="item&...
0
votes
1
answer
15
views
Nuxt 3 HMR Module not reloading changes
I have nuxt 3 project and installed couple of packages .
the hmr was working fine .. it just stopped suddenly no clue why .
there's no errors in the console . the cmd shows the files are being updated ...
- 1
0
votes
0
answers
11
views
Why does the language setting not work for input error in vee-validate?
I think I have set all the language settings for vee-validate but it still defaults to the English language error! I want to display the errors in Farsi language. I have also installed the necessary ...
- 15
0
votes
1
answer
30
views
Optimizing Background Images In Nuxt 3
I'm developing a Nuxt.js application and I need to set a decorative background image for a <div>. I prefer using background-image for decorative elements, as it is semantically more appropriate, ...
- 317
0
votes
0
answers
9
views
How to import input in select field with vee-validate 4
I am going to put an input as an input to filter the options at the beginning of the options.
But when I put the input inside the field, it is not rendered and displayed at all.
<script setup>
...
- 41
0
votes
0
answers
21
views
nuxt - router.getRoutes() hydration mismatch
A basic implementation of router.getRoutes() to print routes to screen causes a strange hydration mismatch.
// implementation
<template>
<div>
<v-list>
<v-list-item v-...
- 2,144
0
votes
0
answers
24
views
Can't build a dynamic link on nuxt 3
I need to create a link like this for password-reset
http://localhost:3000/password-reset/d866f5fa974450aabc5fe0943d7266c6659f43e28f1a7a3cda94957374e55974?email=ospreystudio2020@gmail.com
I compiled ...
0
votes
0
answers
33
views
Nuxt 3 / Nuxt UI / Vuedraggable - Is it possible to reorder table rows in <UTable> using Vuedraggable?
I need to create a table with the possibility of reordering items via drag&drop but no idea if that's possible. I am using many v-slots to adjust the styling and content.
<UTable
...
0
votes
0
answers
12
views
How can i add custom html tag with features and styling in Nuxt Js 2 - Vue Js
I'm currently engaged in developing a significant Nuxt.js website for my company. My objective is to eliminate redundant HTML, CSS, and JS code across multiple pages. I'm actively researching methods ...
0
votes
1
answer
25
views
Use Nuxt's useHead with visibilitychange event
On every page I set title using useHead({title: ""});.
In layout/default.vue file, I added:
useHead({
titleTemplate: title => {
let titleDefault = 'Company suffix';
if (title) {...
- 2,920
0
votes
0
answers
13
views
How to use codemirror in Nuxt Content?
I´m new with Vue and Nuxt3 Content and I can't insert Codemirror code editor. I want to create a component for use it inside a markdown file for show a code and allow the users to edit it.
- 31
0
votes
1
answer
16
views
useAsyncData status returning idle
const { data, status, error, refresh, clear } = await useAsyncData(
'campaign',
() => $fetch(`${$request.baseUrl}/cs/v1/campaign/find/${route.params.campaign}?mode=${route.query.mode || ''}`, {...
- 65
0
votes
0
answers
20
views
Nuxt 3 locale javascript files not working after page changes
i added some locale javascript files to my nuxt app but after changing page the javascriptp file are not working of course because they couldn't catch necceserry DOM elements , in this case what ...
- 19
0
votes
0
answers
25
views
When using ESLint in a Vue component, do I need to set the lint rules for the <script> and <template> separately?
I have a Nuxt 3 app that uses the new Nuxt ESLint module for linting and formatting (using ESLint Stylistic). The relevant bit of my ESLint config looks like this:
import withNuxt from './.nuxt/eslint....
- 193
1
vote
0
answers
15
views
Nuxt to Next app migration - do I need API Gateway?
We are building an ecommerce app in Nuxt and want to migrate to Next.js page by page, while the service is running.
Currently frontend is served from a docker image in AWS AppRunner.
I see two options ...
- 696
0
votes
0
answers
5
views
Nuxt running on CMS - how to ignore part of the path?
I am deploying an app on a CMS. The path that is requested might look like this:
https://preview-blockstest-chesheast.cloud.contensis.com/roads/potholes
However, my app doesn't know about this path (...
- 37
0
votes
0
answers
32
views
Nuxt 3 dynamic page after refresh redirect to 404
can someone help me?
I have such a dynamic page
on the host the page opens upon click, but after the refresh I get 404
pages/blog/[slug].vue
<script setup>
import { useBlogStore } from '@/store/...
- 11
0
votes
2
answers
38
views
Default layout is not appearing in error.vue using Nuxt 3
What is happening?
I am creating a ~/error.vue file to display a custom error page.
I need the default layout to be applied as I want the design of the app to be as most uniform as possible.
Default ...
- 13
0
votes
2
answers
43
views
Nuxt.js localhost redirects to /login automatically, resulting in 404 error
I created a new Nuxt project and want to use the pages/ directory, therefore I deleted app.vue as it is no longer needed. The /pages directory until now only contains the index.vue file with the ...
- 33
0
votes
1
answer
48
views
Issue with Upgrading @nuxt/image Module in Nuxt 3
I'm encountering an issue while upgrading from @nuxt/image-edge to the latest stable @nuxt/image in my Nuxt 3 project. My current setup includes:
Nuxt version: "^3.1.1"
Vue version: "^...
- 1
0
votes
0
answers
22
views
Dynamic url with Nuxt 3 SSR. Metadata seen in the browser are not seen in bots
I'm trying to do this with Nuxt 3 (SSR). I will use an SEO friendly url structure. Example;
Product;
abc.com/lace-up-sports-shoes
Category;
abc.com/shoes
Brand;
abc.com/bysho
I need to make a query ...
-2
votes
0
answers
31
views
How use nuxt middleware in client-side?
Please advise how to implement client-side middleware?
//is deprecated :c
process.client == true
- 432