13,731 questions
0
votes
0
answers
19
views
Vue: returning non-reactive values from a composable
Is it okay to return non-reactive values from a composable?
E.g., like so:
// useNavLink.js
import { toValue } from 'vue'
import { useRouter } from 'vue-router'
export default function useNavLink(...
- 341
0
votes
1
answer
46
views
local registration went wrong
I generated a new project using vue 2, then I wanted to apply local registration, but I"m getting compile errors
the following shows the changes files:
main.js
import Vue from 'vue'
import ...
0
votes
0
answers
9
views
How to use primary/secondary Vuetify colors in a SCSS gradient?
I wanted to create a linear gradient from primary color to fully transparent color to accent an element. I'm using SCSS in Vue 3 single-file components.
I tried, as guides suggest:
background: linear-...
- 19.9k
0
votes
0
answers
21
views
How to install meteor + vue
I'm trying to install / use meteor with vue.
Followed the installation guide step by step, but it's a struggle.
npm install -g meteor
meteor create myapp --vue
Using vue skeleton
=> Errors while ...
- 81
0
votes
0
answers
16
views
Vue Router: Force users to change password after first login
Basically, im creating users with a default password and a hasDefaultPassword boolean property set to true and after the login screen i want to force users to change the password and set ...
- 43
-1
votes
0
answers
36
views
404 Error on POST Request to /api/read-excel - Endpoint Not Found
👋
I’m working on a project that uses Flask as the backend and Vue.js as the frontend. The goal is to let users upload an Excel file, process it on the backend, and display the results in the frontend....
-1
votes
0
answers
28
views
Best way to access constant declared in onMounted [closed]
What is the best way to access or declare constants in on mounted, so they can be accessed from oher methods. This, of course, will not be it:
onMounted(() => {
const track = audioCtx....
0
votes
1
answer
29
views
VueJs can not fetch data from C# web api session
I have a problem with fetching data from C# web api session. Problem occurs only, when I try to fetch from https://localhost:8080 (vue js port) to my api (https://localhost:7251).
When I use insomnia/...
- 45
-1
votes
0
answers
19
views
How to prevent fabric's PenceilBrush from drawing beyond the specified area
As shown in the figure, the picture is in the group. I draw on the picture. How can I limit the drawing range to within the picture and prohibit drawing outside the picture?enter image description ...
4
votes
1
answer
3k
views
Vue 3: Error on creation "Expected identifier but found 'import'" [duplicate]
I try to create a new vue 3 application but i have a problem with creation.
Node version: 22.10.0
Npm version: 10.9.0
I create my project with:
npm create vue@latest
like in the docs
And when i try to ...
0
votes
0
answers
10
views
Css of data from CKeditor 5 doesn't work with Vue3 v-html built-in directive
I'm facing an issue with using CKEditor in a Vue project.
The edited data doesn't exactly match the displayed content using v-html, some CSS adjustments for images are not working as expected.
<...
1
vote
0
answers
12
views
TypeScript Error: "Return type of exported function has or is using name 'LoaderSlotProps' from external module" in Vuetify Drawer Component
I’m encountering the following TypeScript error in my Vue 3 + Vuetify project:
Return type of exported function has or is using name 'LoaderSlotProps' from external module "node_modules/vuetify/...
0
votes
0
answers
38
views
Vue 3.5 + TypeScriptt is possibly null error on useTemplateRef
I'm getting "value is possibly null" flags in VS Code with TypeScript in my when I use useTemplateRef.
Of this kind: audioPlayer.value.pause() is possibly null
Only if I add the non null ...
-3
votes
0
answers
23
views
Vue performance on safari incognito
my vue application is loading a few minutes in incognito mode on safari using mobile device. The issue is only during first loading, maybe someone experienced something similar?
- 148
0
votes
0
answers
16
views
+50
Embla Carousel Vue3 scrollNext Event
I'm hoping to get Embla Carousel setup in my Vue project, but I can't get the scrollNext function to work.
Here's where I am:
<script setup>
import { onMounted } from 'vue'
import ...
- 9,277
0
votes
0
answers
19
views
Open multiple Bootstrap Toasts instead of overriding the same Instance
I am trying to call multiple instances of a bootstrap toast in Vue3. When I call a new Instance the old one gets overwritten but I want the old one to stay. I saw some libraries with this ...
- 13
0
votes
1
answer
16
views
Props not available in Vue3 component
I have this in a Twig template:
<div
class="multiSelect"
id="{{ id }}"
data-options="{{ options|json_encode }}"
data-field="{{ handle }}"
>...
- 1,713
0
votes
0
answers
15
views
Error from nuxt-schema-org when I use nuxt 3
I installed the nuxt-schema-org library and used it in nuxt 3 version 3.11.2. However, when I tried yarn dev, this error occurred. Is it because it did not automatically create the necessary files and ...
0
votes
0
answers
20
views
Laravel Vue Inertia How to accept data from a checkbox and store it in the database?
It will read from the database and put an appropriate check in the checkbox (or leave it blank), but I can't get it to update the database when the user checks a checkbox. The other fields work, they ...
0
votes
0
answers
28
views
Vue.js: ordering of nested events [duplicate]
I am working on a search field component using Vue.js where I want to show a suggest box when an input field is focused and hide it when the input field loses focus. When a user clicks a suggestion it ...
- 1
0
votes
0
answers
21
views
Monaco editor cannot be highlighted in Vue3
I am using Vue 3 (3.5.13) + Vite (5.4.11) with "monaco-editor": "^0.52.2" (I also tried 0.30.1), but syntax highlighting is not working. However, it works fine in Vue 2 (2.6.12) + ...
- 26
-1
votes
1
answer
23
views
Nuxt v3 router is not working when trying to push or replace
I'm using Nuxt version 3.14 and whenever I try to use router.push or router.replace the tab freezes.
I tried all the possible fixes using setTimeout or debounce, but the only way I made it work was ...
- 425
0
votes
0
answers
19
views
V-List v-model:opened being cleared when added to DOM?
At work, I have a page with a context menu that contains subgroups.
<v-menu v-model="quickActionVisible">
<v-list v-model:opened="quickActionsOpen">
<v-list-...
- 24.6k
0
votes
0
answers
14
views
Issue with Printing Web Pages on Android OS Using Google Chrome
Description: I'm trying to print a web page from Google Chrome on my Android device, but I'm encountering issues. When I tap the menu button and select "Print," nothing happens, and no error ...
- 235
-1
votes
0
answers
17
views
In Vite, is there a way to fallback for not-found files in the `publicDir`?
I have a Vue3 + Vite app, with images in my public folder. The structure is something like
root/
public/
{guid}.png
{other_guid}.png
...
src/
components/
main.ts
In the ...
- 7,589
0
votes
0
answers
20
views
After the latest update of VSCode, my TSX code started throwing errors
The Vue code runs and builds without any issues, but it does show an error. Colleagues who haven't updated VSCode don't encounter this error, but those who have updated do.
Importing Fragment from ...
- 1
0
votes
0
answers
13
views
AWS sensitive data showing in chunk vendor js file
I am using vuejs3 and Laravel. My AWS sensitive data is showing in chunk-vendor.js file.
I stored the all sensitive data in .env file and accessing all the keys through env variables but still it is ...
2
votes
3
answers
98
views
How to disable first space in HTML input?
Consider a simple Vue component with text input (link).
<script setup>
import { ref } from 'vue'
const msg = ref('')
function onInput(e) {
let value = e.target.value;
if (value === ' ') ...
- 1,961
0
votes
0
answers
38
views
ESLint recognizes Vue Component as type?
I just implemented following rule to my eslint:
'@typescript-eslint/consistent-type-imports': 'error',
Everything works fine, unless In components where I do something like this:
<script setup lang=...
- 1
0
votes
1
answer
22
views
Change vuetify v-field label font size
Im trying to customize the font size of the label of a v-text-field. The problem im encountering is that when the field is clicked, the label normally transitions to the top of the field and becomes ...
- 25
0
votes
1
answer
43
views
Conditional rendering of multiple tables in Vue.js
I'm building a Vue.js application that requires conditional rendering of multiple tables based on certain conditions. I have a set of flags that determine which tables should be rendered, and I'm ...
- 9
-1
votes
0
answers
18
views
dynamical tailwind class not activated in vue3
I have a problem with a dynamic tailwind class in vue3.
The thing is, it worked perfectly, and suddenly the animation isn't triggered. The class is supposed to be activated at a certain value in the ...
- 1,273
1
vote
1
answer
30
views
How to forward v-model modifiers to child component
No idea on how to forward the v-model modifiers received by a wrapper component to a child component or element...
Sample App:
<script setup lang="ts">
import MementoField from './...
- 56
1
vote
0
answers
18
views
How to properly update reactive array items for the changes to reflect in UI in Vue 3?
I'm relatively new to VUE JS.
I have a menu, opening onclick of a button inside a component - SelectionMatrix.vue
Inside the menu, I have
one select box at the top which has options of 5 different ...
- 103
0
votes
2
answers
39
views
Expand select option from other element
Background:
I was trying to do some custom styling for my select element by changing the color and arrow example:
<select :id="'select' + index" class="w-full px-4 py-2 pr-8 bg-theme ...
- 695
1
vote
0
answers
19
views
Vue to Laravel page redirect is not working in Vite.js
I am using laravel 11 with vue3,
When I am trying to redirect from Vue page to a Blade page then it's not working,
I mentioned /profile route in web.php like this:
Route::get('/profile', [...
0
votes
0
answers
22
views
worker-timers package callback fires immediately after deep sleep, ignoring intended delay
I’m using the worker-timers npm package in a Vue 3 + TypeScript application to implement a lock/unlock mechanism of notes using Ably (where the notes are shared between multiple users). The idea is ...
- 2,062
0
votes
1
answer
68
views
+50
Subscribe to a child event programatically in Vue3
Is it possible to subscribe to an event given a reference to a component in Vue?
I would like to subscribe to any events fired by child input components.
In Vue2 this would work by simply using ...
- 2,789
0
votes
0
answers
22
views
Unhandled error during execution of component update when click vue3 simpletypehead
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length') this error was showing when i click the vue3 simple typeheaad
how to fix this error
when i click the input field in ...
0
votes
1
answer
19
views
Custom PrimeVue CSS
I'm using Vue3 and for theming I'm using Primevue which I find very pleasing but I came across a problem and I didn't find a way yet to solve it.
I have an accordion and I'm simply trying to put the ...
0
votes
0
answers
22
views
How to perform basic testing with FormKit and Vue/Vite?
I'm trying to figure out how to test a basic FormKit form using Vue and Vite. The form has a text field and a button. If you enter text and then click the button, it should display in another field ...
-1
votes
1
answer
21
views
How to resolve compatibility issues caused by fixed gaps to make the layout adaptable to different devices [closed]
Here is my code, it works great in my computer. However, "gap: 50px", this fixed gap makes it lose compatibility.On other computers, the content might overflow the container.
<style ...
- 53
2
votes
1
answer
36
views
How to dynamically update props of components created with h()?
I have a very simple progress bar component:
<script setup lang="ts">
defineProps<{ progress: number }>();
</script>
<template>
<div class="progress" ...
- 37.5k
0
votes
0
answers
37
views
How to implement a list item component with adaptive width to fill the parent container
The result I have right now is like this.
The result I need is like this.
Here is my code:
<template>
<t-space direction="vertical">
<div class="user-...
- 53
0
votes
0
answers
57
views
How to align Date regardless the length of comments
As shown in the picture
I want the date to always be aligned to the far right, regardless of the length of the comment, just like the longest comment.
My related current code is as follows:
...
- 53
1
vote
0
answers
35
views
How to get rid of build error "Maximum call stack size exceeded" (at hasSyntacticModifier)?
We have Vue 3 app (the migration from Vue 2 to Vue 3 is in progress) with Vite and TypeScript. There are a lot of .js files. When I run: npm run dev, the app is normally running. When I try to build ...
- 4,043
0
votes
1
answer
23
views
InvalidStateError when trying to upload multiple photos using shadcn-vue forms
Learning vue3, trying to create a form that takes multiple images as input for submission, but I keep getting these errors/warnings:
chunk-HSMNR5CP.js?v=f7f38f4d:2113 [Vue warn]: Invalid prop: type ...
- 86
0
votes
0
answers
36
views
axios error.response is undefined when CloudFlare turnstile returns 403
I have implemented CloudFlare turnstile so that when a certain API is called a 403 response is returned with an additional response header of cf-mitigated: challenge. I'm using axios to catch and ...
- 363
0
votes
0
answers
23
views
How to display Vue components in Tabulator cell
So, I've been doing a bit of searching on google and here on SO to figure out how to have a vue component displayed in a tabulator table cell. Most of what I've seen is very outdated (3-4+ years old) ...
- 301
0
votes
0
answers
15
views
Tabulator with Vue and Selectable Cell Range with Clipboard breaks after calling setData
I'm trying to set up a tabulator table with Vue and Selectable Cell Range with Clipboard based on this example from Tabulator and these Vue Integration docs from Tabulator
The problem is, after ...
