13,114 questions
0
votes
1
answer
25
views
Does a Nuxt layout requires special arrangements for single file components?
I created a Nuxt project from scratch to learn about layouts.
I changed app.vue to
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
In layouts I ...
- 30k
0
votes
0
answers
17
views
Difference between nuxtApp.provide and vueApp.provide
In nuxt 3 you have two alternative ways to provide something globally
// using nuxtApp instance
useNuxtApp().provide('key', 'value')
console.log(nuxtApp.$key) // value
// using vueApp instance
...
- 1,829
0
votes
0
answers
14
views
Why does the token disappear from the cookie after several page reloads? @sidebase/nuxt-auth
I am experiencing an issue with the @sidebase/nuxt-auth library in my Nuxt.js application, where the authentication token stored in cookies disappears after several page reloads.
I have configured the ...
- 13
0
votes
0
answers
17
views
Nuxt Middleware in Playwirght e2e-tests
I use Nuxt Auth Utils which works great, but in my e2e-tests I can't access my protected pages because I check if the user is logged in (useUserSession()) with my middleware.
Can I simulate ...
- 21
0
votes
1
answer
25
views
Caching - watch, refs, and navigation behvior
I'm having this issue where I'm using Vue3 and Nuxt, and I need a loading function to run once everytime the user navigates to the page, but delay loading if the global data isn't available yet.
const ...
- 2,304
0
votes
0
answers
9
views
$t - global i18n function does not work in nuxt composables
so i have this in my nuxt.config
i18n: {
lazy: true,
langDir: '../locales',
locales: getLocales(),
defaultLocale: 'en',
strategy: 'no_prefix',
experimental: {
...
0
votes
0
answers
16
views
Nuxt layout rendering delay, content flashes
Using Nuxt 3, I'm switching from my "login" layout to my "admin" layout.
This works great except for one thing: When switching layouts, there are few milliseconds where the "...
- 617
0
votes
1
answer
26
views
How to pass data to a nested page in Nuxt 3
Let’s say I have a page with a list of articles and I want to display the selected article in a nested page. Can the selected article be passed down to the nested page so it doesn’t have to be fetched ...
- 1,621
2
votes
2
answers
93
views
How can I auto import component from @vueuse/component in nuxt 3
I'm new in nuxt 3, I want to auto import the component from @vueuse/component in nuxt 3, I have following this documentation but I still didn't get it why the auto import component from third party ...
- 89
0
votes
1
answer
18
views
Nuxt - How to load data in SSR in a pinia store?
I'm trying to create a pinia store that load data in SSR. How to load data in SSR in a pinia store ? Is that possible ?
I'd like to be able to do something like this in every component where i'll need ...
- 1
0
votes
0
answers
19
views
Component unit testing in a nuxt module
First of all I have to say that the nuxt documentation for unit testing a nuxt module is sooo bad, me and all my colleagues are not able to create even a tiny unit test. So what I am trying to do is ...
- 585
0
votes
0
answers
48
views
SyntaxError when using @nuxtjs/mdc in Nuxt.js – How to fix?
@nuxtjs/mdc SyntaxError
Okay, so I visited the official documentation at this link.
https://nuxt.com/modules/mdc
and wanted to add the MDC renderer to try using it for Markdown. I installed it using ...
- 173
0
votes
0
answers
27
views
Nuxt Vitest Error in component containing <img> tag with relative url
I'm trying to run Vitest in a Nuxt3 application and am getting the error below. The issue seems to be related to the use of a relative url in an img tag. If I remove it or replace it with NuxtImg the ...
- 2,777
0
votes
2
answers
247
views
An invalid components.json file was found at - ShadcnVue & Nuxt 3
So when I'm trying to do npx shad cn-vue@latest add toast. out of nowhere I'm getting
[5:28:37 PM] An invalid components.json file was found at /Users/****/Projects/****.
Before you can add components,...
- 2,918
1
vote
1
answer
24
views
How can I mock $csrfFetch in Vitest?
In my app, I use the nuxt-csurf module.
Meaning, I have to use useCsrfFetch and $csrfFetch.
This works fine during manual testing, but in Vitest I need to mock these functions.
I have tried:
vi.mock('....
- 21
0
votes
0
answers
28
views
Pinia getters are not reactive
I have defined a store as below:
export const useCartStore = defineStore('cartStore', {
state: () => {
let cart = null
let url: string = "cart/"
return { cart, url }
},
...
- 21
0
votes
0
answers
14
views
I can't make Nuxt ignore a folder at build time
My project has a folder named kaspa that was placed at the root directory. That folder are already been built by external parties so it must be left as is when running pnpm build.
I have set these ...
- 2,248
0
votes
0
answers
29
views
How to stop the selecting first suggestion?
If I don't select from the options, I want to search by query when I press enter.
I tried html element id keyup event what should i do?
<UInputMenu
v-model="query"
...
0
votes
1
answer
25
views
NuxtImg src intrinsic size doesn't change
I'm trying to use a NuxtImg to download a smaller image size depending on screen size, but the intrinsic size (dev tools) and download size never change.
I've ussed a deliberately small md: size to ...
- 1,477
0
votes
0
answers
33
views
how to import nuxt/content correctly?
I try to display a markdown file from content to some page and no matter what I do I get this error:
[plugin:vite:import-analysis] Failed to resolve import "#content" from
"pages/info....
- 2,375
0
votes
2
answers
44
views
How to create a url-indexed lightbox modal in Nuxt 3 without losing scroll position when it opens?
Problem: when opening a modal / lightbox in my Nuxt app, it resets scrolling of the parent page.
Two criteria seem to clash:
Keep the scroll position intact when opening the modal
Opening the modal ...
- 825
0
votes
2
answers
52
views
Remove default meta tag in nuxt 3
In Nuxt 3, the following tag is automatically added to the <head> of my pages:
<meta charset="utf-8">
I’ve tried removing it by setting charset: null in my nuxt.config.ts like ...
- 396
0
votes
0
answers
28
views
Why is useCookie in Nuxt 3 not reactive?
I'm using useCookie in Nuxt 3. Based on the documentation, after the cookie is updated, it can be refreshed manually using refreshCookie. However, the ref returned by useCookie does not seem to be ...
- 99
1
vote
1
answer
50
views
Nuxt3 data fetching from Directus
Nuxt Noob here. I want to create a Site that uses Directus as backend.
I followed tutorials about fetching data in Nuxt and using the Directus SDK.
On initial page load, everything seems fine and data ...
- 67
0
votes
0
answers
48
views
How to mock Nuxt 3 composables(useAsyncData & useRuntimeConfig) in unit tests
The page that I'm trying to write unit tests about is as follows:
<script setup lang="ts">
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue'
import { useRoute }...
- 11
0
votes
1
answer
31
views
BootstrapVue b-table not displaying received items when using pagination
I'm using the b-table from BootstrapVue with pagination. However, whenever I change pages, the items received from my REST API do not display, even though they are present. I have added a watcher to ...
0
votes
0
answers
39
views
Cannot set port for playwright test server nuxt 3/playwright
I have a Laravel 11 backend with a Nuxt 3 frontend project. I am use Laravel Sanctum which requires setting which domains/port can be used for authentication. Because of this, I need to use port 3000 ...
- 186
1
vote
1
answer
48
views
How do I serve static binary files in a web app using Nuxt/VueJS
I recently started experimenting with Nuxt to provide a full stack development of a self-tuition music app. One of the essential requirements is to have a library of musical snippets in the form of ...
- 308
0
votes
0
answers
36
views
Nuxt3 Nitro keeps disconnecting mysql connection
I've had a problem with Nuxt3 for some time, or more precisely with Nitro built into it. I'm using the experimental "database" option and I'm using mysql2 as a connector. The problem is that ...
- 27
0
votes
0
answers
21
views
Vue Nuxt 2 Middleware: Requests Conflicting Between Users
I have a Vue Nuxt 2 website where I use middleware to resolve URLs. However, I'm experiencing an issue where requests are conflicting between users. I am using vue storefront as well.
If one user ...
0
votes
0
answers
39
views
The accessToken and the refresh token are automatically deleted from the cookie in Nuxt app (auth with @sidebase/nuxt-auth library)
Authorization of the Nuxt(Vue+Quasar) application is done using the @sidebase/nuxt-auth library. I noticed a problem: The refresh token storage time in cookies is six months, the same amount is set ...
0
votes
1
answer
33
views
firebase.json rewrite for root to serve index.html with different server funciton
I have an SPA, created with Vue2.
Step-by-step I'm migrating routes to Nuxt(SSR)+Vue3.
With firebase hosting I serve the migrated routes via a different hosting function:
firebase.json:
"rewrites&...
- 73
1
vote
1
answer
41
views
why is the variable value different in NUXT?
async function getPosts () {
let total = ref(null);
const { data: articles, refresh } = await useFetch(url, {
method: 'GET',
server: true,
query: {
...
- 11
-2
votes
1
answer
30
views
`npm audit` Issue and `'defineComponent' Error` in `npm run dev` for Nuxt App
The package.json of my project is as follows. Everything in the project is fine, but the only problem is that the npm audit check fails.
{
"name": "nuxt-app",
"private&...
- 309
1
vote
1
answer
76
views
How To Use Refs As Props in Nuxt 3
I am making a web app using Nuxt 3, and I have a few refs in the app.vue file. I pass these refs as attributes to the NuxtPage element, and can then access them in all files in the pages directory. ...
0
votes
1
answer
25
views
Vuetify VDataTable footer width customization
I have been happily using Vuetify in my Vue/Nuxt app but I noticed that VSelect inside VDataTable's footer is quite narrow and it does not fit even three letters with a custom text 'Vše'.
However the ...
- 477
0
votes
1
answer
53
views
Refetching content with nuxt content using $fetch or useFetch with watch
I use nuxt with nuxt content (https://content.nuxt.com/).
I have a component that needs to refetch some content while watching content ids.
I don't know how I can use $fetch or useFetch together with ...
- 4,570
0
votes
1
answer
25
views
Not able to access value, _value or _rawValue fields of a RefImpl from a sanity query in nuxt typescript
I define my sanity query like this. I inspected the network tab, and the response was correct. The first object printed is a RefImpl. It contains the correct values when I inspect it in the console. ...
-1
votes
0
answers
23
views
How can I make my store only be called once in the nuxt vue component?
I'm having a problem: I have a component called FileGallery, which is an input that receives images. I call this component to a second component called the communication form, but I'm passing the ...
0
votes
0
answers
49
views
Nuxt 3 dynamic route not updating content when navigating between project pages
Problem
I'm experiencing an issue with my Nuxt 3 application where navigating between project pages isn't updating the content properly. When navigating through the application UI, the URL changes ...
0
votes
1
answer
26
views
Why does Amplify Nuxt build fail every time I change packages.json?
It seems like every time I add a new module via npm install, the build fails on Amplify on production. It works fine locally, but I get a fairly unhelpful error in the build logs:
> nuxt build
...
- 1,477
0
votes
1
answer
25
views
Using both FB Pixel and GTM
Probably a simple question but, I want to use both GTM and FB Pixel.
The code below:
const { proxy } = useScriptMetaPixel({
id: 'YOUR_ID'
})
const { proxy } = useScriptGoogleTagManager({
id: '...
- 23
0
votes
0
answers
23
views
Typescript allias does not work for certain files
We have an alias ~ in our code that we use to import stuff across the app. For example:
// plugins/integrations/ct/client.ts
import { MY_CONST } from '~/constants/http'; // works fine
But sometimes ...
- 624
0
votes
0
answers
52
views
Failing to run the Nuxt Project: Says Consolas does not provide an export named 'consola'
When I run de Nuxt project I receive this error:
ERROR [worker reload] [worker init] /home/mvarela/workspace/zafir/raviish-portal/.nuxt/dev/index.mjs failed ...
0
votes
1
answer
70
views
Nuxt 3 Custom $fetch with Token Refresh Not Updating Pinia State in Components
I'm building a Nuxt 3 app where I have a custom $fetch plugin to handle API requests, refresh expired tokens, and retry failed requests.
The fetch and retry mechanism work fine, but the state in my ...
- 13
0
votes
0
answers
12
views
nuxt-mongoose - Vue: Cannot find module #nuxt/mongoose
I installed the nuxt-mongoose module as shown in the documentation. https://docs.arashsheyda.me/nuxt-mongoose/getting-started/setup
but while importing the package, I get an error like this: Vue: ...
1
vote
1
answer
37
views
Problem with hydration nuxt app. @nuxtjs/svg-sprite
I have an issue with fixing nuxtjs hydration mismatch
rendered on server: href="/_nuxt/tabbar.DZ-rw7fi.svg#balance"
expected on client: href="http://stels-and-co-frontend-nuxt3.mt125.mt-...
- 443
0
votes
1
answer
52
views
How to properly set multi-language `title` and open graph meta tags in Nuxt 3?
Background
I am now setting up a new Nuxt 3 project and integrating Nuxt-i18n into it. My project would finally be deployed to Github Page after development.
prefix_and_default is used as the routing ...
- 47
0
votes
2
answers
90
views
How to store global user object in Nuxt3 server middleware?
Using Nuxt 3. Currently I can parse a JWT in the server middleware to get the logged in user, but I want to save that logged in user info to a global variable. Then, on the client side I want to get ...
1
vote
0
answers
45
views
Why are Amplify environment variables not loading in my Vue/Nuxt component?
I have set environment variables in AWS Amplify, with the VUE_APP_ prefix, but they aren't loading on production. Locally, they're pulled in fine from a .env file.
Here's an example of a variable in ...
- 1,477