108,137 questions
0
votes
0
answers
14
views
How to correctly set up Pinia with Inertia.js SSR in AdonisJS 6? Getting "getActivePinia() was called but there was no active Pinia"
I am building an application using AdonisJS 6, Vue 3, and Inertia.js. I'm trying to integrate Pinia for state management, but I'm running into an error:
I read online and see other issues here, but I ...
0
votes
1
answer
34
views
How do I enable stylesheet source maps in dev mode for VueJS+Vite (>3.0)?
I've setup a new VueJS project using the default scaffolding method npm create vue@latest (which right now is Vue 3.5.22), that uses Vite under the hood.
I want to use Sass for my stylesheets, and I'm ...
- 1,173
Best practices
0
votes
1
replies
31
views
How to reset a pinia store variable
I have a situation where a pina store variable should be reset as soon as it is consumed. Apparently because of reactivenes I cannot do:
defineStore('SystemStore', {
state() {
return {
...
- 3,071
0
votes
0
answers
12
views
NativeScript Android app closes when trying to add a marker in Google Maps
I'm having a problem with my code. I'm just trying to add a simple marker. Here's my implementation
<script setup lang="ts">
import { AbsoluteLayout, Page } from '@nativescript/core';
...
- 2,928
-3
votes
1
answer
96
views
How to move background while scrolling the page? [closed]
I`m just trying to figure out how to do a scroll effect. When background is moving with scroll, while you are on a certain block of the site. I tried something like this, but i feel wrong in here)
...
0
votes
1
answer
78
views
Laravel API returning HTML instead of JSON when served via NGINX
I’m running a Laravel backend alongside a Vue frontend on NGINX. The issue I’m facing is that my API endpoints are returning HTML instead of JSON. For example:
https://isuecampusmap.site/api/ → ...
- 1
0
votes
0
answers
29
views
Should I use both aria-errormessage and aria-describedby with the same value?
Pretty much the title.
I'm learning about accessibility. I want to display an error for my input and make it accessible but I found out that aria-errormessage was not fully supported by some assistive ...
Best practices
1
vote
1
replies
29
views
How to enable cross-feature communication in Nuxt without breaking DDD boundaries
I'm building a Nuxt 3 application using a feature-based architecture inspired by Domain-Driven Design.
Each feature is meant to be fully isolated, with its own components, state, API layer, and ...
- 81
0
votes
1
answer
16
views
Nuxt Seo from external api ssr
How can I get the seo of my Nuxt app from one external api, in this case strapi, and use it in my app, actually I have this, //
enter code here
import { getEnv } from "../src/utils";
import {...
- 38
1
vote
0
answers
34
views
How to create optional value with Tanstack form and Zod?
How to create optional value with Tanstack form and Zod?
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { z } from 'zod';
import { revalidateLogic, ...
- 19
0
votes
0
answers
73
views
MonacoEditor - Web Worker can't be created
I use https://nuxt.com/modules/nuxt-monaco-editor. I get this error and don't really know what to do against it:
Could not create web worker(s).
Falling back to loading web worker code in main thread,...
- 31
0
votes
1
answer
58
views
Vitest config for Laravel and Vue
I have a Laravel 12 project built with the Vue starter kit. By default, the project didn't have any frontend testing libraries. I want to add tests in Vitest. When I run vitest, I get the error: Error:...
- 304
0
votes
0
answers
32
views
offline.html not showing correctly in PWA 1.0.7 for nuxt 3.13
I have nuxt 3.13 with PWA module 1.0.7
the service worker is work fine but offline page not working.
I create offline.html in public folder and nuxt.config.js is like below
export default ...
- 4,131
0
votes
0
answers
33
views
Configuring VueJS to use a single runtime in multiple scripts
I'm using Vite and VueJS in order to build out an application which has the main application scripts, and various plugin scripts which can be loaded in completely independently of the main application ...
- 2,594
Advice
0
votes
2
replies
73
views
Watchers and computed properties - getter function
I've been learning Vue for my project (Composition API) and so far there is one thing that I can't get my head around. Let's say we have a reactive object:
const obj = reactive({ count: 0 })
And I ...
- 19
0
votes
2
answers
64
views
Highlighting selected v-list-item
I just started using Vue / Vuetify to build a frontend and I'm currently struggling with styling a navigation drawer, ie the list in it. The problem is that one an item is selected it's highlighted in ...
- 110
1
vote
0
answers
47
views
Vue/Nuxt app loads slowly on client side -- how can I identify and fix performance issues?
I’m working on a Vue/Nuxt project where my client reports that the website is slow — especially when loading a selection window and when fetching JSON data.
However, the slowness is not very ...
- 11
-1
votes
1
answer
44
views
Empty bar chart in Vue-ECharts despite working in ECharts playground
I have a simple template with a bar chart that doesn’t render properly in Vue-ECharts, even though the exact same options work fine in the ECharts playground. There are no console errors — the chart ...
- 1,534
0
votes
0
answers
26
views
Element Plus image preview not movable by touch in mobile devices
In element plus, images are movable by cursor pointer in desktop view but when you try to do the same on mobile devices, the image is not moving. Not sure the behind the scene engineering but I assume ...
Best practices
0
votes
2
replies
56
views
Set a computed property in a reactive store object in Vue
const store = reactive({
a: [],
b: computed(()=> a.find('needle')), use computed
c: ()=> a.find('needle') // or a method
})
How should one go about using a computed property in a ...
- 1,324
1
vote
1
answer
195
views
How can I install a new Laravel 12 project with Vue (Ziggy instead of Wayfinder)?
I want to set up a fresh Laravel 12 project that uses Vue.js for the frontend.
However, I don’t want to use the new Wayfinder package that comes with Laravel 12.
Instead, I’d like to configure it like ...
- 27
0
votes
1
answer
113
views
CORS error when calling RefreshToken from frontend (No 'Access-Control-Allow-Origin' header)
Here’s the error message from the browser console:
Access to fetch at 'https://orbis-api-web.azurewebsites.net/api/v1/UserAuth/RefreshToken'
from origin 'https://orbis-solidarity.com' has been ...
2
votes
1
answer
91
views
Template doesn't update with ref()
I have a component which needs some external data (API) to fill some content in the template through asynchronous functions. I reduced it the more I could and renamed some variables for better ...
- 69
-1
votes
1
answer
67
views
How to safely redirect to /login without crashing on heavy page renders?
I’m running into an issue with Nuxt 4 / Vue 3 where I need to redirect the user to /login immediately after logging them out or when a token expires. The problem is that if I call navigateTo('/login') ...
0
votes
0
answers
35
views
Horizontal scrolling on v-calendar
my vue site is simple as hell I think
<template>
<v-calendar
type="category"
v-model="focus"
:categories="categories"
:events="events"...
- 1
1
vote
0
answers
53
views
Vue 3 Component Typing Issues
I have a list of vue 3 editor components, that I dynamically display based on the "page" the user is currently on.
Currently they are stored in a Component[], but I would like to make sure:
...
- 2,727
1
vote
0
answers
61
views
Error: Module '"vue"' has no exported member 'ref', 'computed'. etc
Does anyone experience this issue? I have laravel + vue 3 project and I recently use typescript. I installed these,
"typescript": "^5.9.3",
"vue-tsc": "^2.2.12"
...
- 145
0
votes
1
answer
41
views
waiting for a page to load resources with vue-router - equivalent to window.onload?
i'm developing a game with vue.js & vue-router. this often involves fairly large image assets!
working in vanilla javascript, i've approached this with window.onload, displaying a div that only ...
0
votes
0
answers
34
views
PrimeVue DataTable not responsive?
I have the follwing:
<Panel header="SITE MANAGEMENT">
<template #icons>
<Button severity="secondary" rounded text @click="showAddNewModal = true"&...
- 1,740
0
votes
0
answers
44
views
How Can I Set the Options of CSelect Dynamically in CoreUI/Vue v3.0?
I have a trouble trying to find out how to make a little thing, let me explain more below.
I have a project using php-laravel, coreui vue and using a MVC Architecture, and i made my whole vue dynamic ...
- 1
1
vote
0
answers
38
views
How do I specify to WebStorm the canonical definition of the Vuex store?
Problem
I have a Vue project that uses Vuex for state management. Parts of the Vuex store are often mocked in unit tests (Vitest).
When Vuex stores are defined in both the main production code and in ...
- 1,176
0
votes
1
answer
118
views
How to properly configure Tailwind v4 with @tailwindcss/vite in a monorepo for shared UI components?
I'm working on a Vue 3 monorepo with the following structure:
packages/
└── ui/
├── src/
│ ├── components/
│ │ └── *.vue
│ └── assets/
│ └── tailwind.css
└── ...
- 397
0
votes
0
answers
52
views
Can vue-multiselect be used without an additional hidden input?
Since v3.1.0, vue-multiselect has had the required prop which states:
Passes the Boolean value to the inbuilt input element
There is also the name prop:
Name attribute to match optional label ...
0
votes
2
answers
57
views
Route Query Parameter not triggering re-render/logic on same page path
I'm new to Nuxt 3 (and Vue) and running into a issue with component reuse/caching in development mode. This problem never occurs when I build and preview the application.
The Problem
I'm using a ...
- 77
2
votes
1
answer
75
views
Custom pop up timer not working correctly
When socket messages come, I pop up divs in my page which disposes after 3 seconds themselves
<!-- I'm using vuejs -->
<div v-for='item in messageList'>
<!-- message body , -->
&...
- 112
1
vote
1
answer
70
views
better-auth: Unable to create schema for genericOauth with sqlite in nuxt
I'm setting up my nuxt project and I want to configure better-auth to use my companies Oauth2/OIDC provider to authenticate against with the genericOauth plugin. When running npx @better-auth/cli@...
- 407
0
votes
1
answer
43
views
Mocking Vitest functions for testing Pinia storage
I am struggling adding mocked methods when testing a Pinia store's functionality. There is very little documentation relating to actually testing the stores themselves, as most Pinia's official ...
- 1
2
votes
0
answers
70
views
Problem with frozen columns in Datatable component from PrimeVue library (gaps, shifting)
I have encountered a problem with the DataTable component from the Primevue library.
When I assign pagination to a table and set several frozen columns, if I switch the number of rows displayed in the ...
- 1,658
0
votes
1
answer
50
views
How can I customize style inside vu3Html2pdf?
How can I customize style inside vu3Html2pdf becuase when download it show incorrect template like blank at the 1 page and show my template at the second page.
It almost seems like it has padding or ...
0
votes
1
answer
53
views
How to show Laravel session flash messages in Vue component using Inertia?
I’m using Inertia.js with Vue 3, and I want to show a success message when a form is submitted successfully.
In my controller I have:
public function store(Request $request)
{
$validated = $...
0
votes
1
answer
61
views
How to use composable correctly - tree shaking
I'm learning about optimization and I've found that either I've misunderstood something or every article about Vue and the examples are basically wrong.
It's about bundle size and tree shaking.
When I ...
- 244
0
votes
0
answers
34
views
PrimeVue DataTable MultiSelect Filter Shows Incorrect Selected Count When Pre-selecting Values
I'm using PrimeVue DataTable with a MultiSelect filter on the "Project Status" column. I want to pre-select certain status values by default, but only those that actually exist in my data.
...
- 1
0
votes
1
answer
78
views
ref loses type information when passed from a composable in the context of a `v-model`
I'm using Vue 3.5.22 with the cool defineModel() macro. I'm editing in VSCode with the Volar extension and the latest TypeScript stuff. In my child component I declare a required model foo:
const foo =...
- 22.2k
0
votes
1
answer
110
views
Nuxt 4 build in production mode is trying to access public folder from .output/server/chunks/public instead of .output/public
I have a nuxt 4 app, with vuetify and sidebase nuxt auth. It runs normally during development, but when i build it and serve it using node .output/server/index.mjs, the page does not load, i can see ...
- 1
0
votes
0
answers
63
views
Why are my Laravel Inertia props not rendering in Vue component?
I’m using Laravel 10 with Inertia.js and Vue 3.
In my controller, I return a page like this:
use Inertia\Inertia;
use App\Models\User;
public function dashboard() {
$users = User::all();
...
0
votes
0
answers
29
views
ioredis not catching ERROR [ioredis] Unhandled error event: Error: read ECONNRESET
I have a Vue+Nuxt app that uses Redis as cache. It's is setup in the following files.
server/plugins/redis.js
import redis from "unstorage/drivers/redis";
import Redis from 'ioredis';
...
- 27
1
vote
3
answers
94
views
Vue form elements desync from computed refs
I have a situation where I have a checkbox. If the user unchecks the checkbox, I want to show a confirmation dialog before allowing the uncheck to proceed.
Here is my example code:
<script setup ...
- 12.5k
4
votes
1
answer
413
views
Nuxt 4 + shadcn/vue Overriding component You can specify a priority option when calling addComponent to avoid this warning warnings for all components
I’m using Nuxt 4 with [email protected], and I’m getting warnings for every shadcn-vue component:
WARN Overriding StepperDescription component. You can specify a priority option when calling ...
4
votes
1
answer
151
views
Vue VS Code and official Vue extension + TypeScript giving error when binding refs without `.value`
My understanding is that in Vue if you have a boolean reference named bar, in the templating syntax for v-bind you can pass :foo="bar" and Vue will dynamically unwrap the bar reference at ...
- 22.2k
2
votes
0
answers
67
views
Forge Viewer offline in Vue/Vite (iOS WebView) – call function across files without import/window/globalThis
We are building an offline Forge Viewer project using Vue + Vite, which will later be wrapped in an iOS app (Capacitor).
In offline mode, we need to serve model files and translations from a local ...
