Questions tagged [vuejs3]
Use this tag for questions specific to version 3 of Vue.js, an open-source, progressive Javascript framework for building user interfaces.
vuejs3
13,533
questions
0
votes
0
answers
22
views
Resolve cors error for Nuxt 3, for embedded app making request in project
CORS ERROR
I have an issue in my project, I understand the error, as well as I tried to find answer for it but no luck so far.
Here is my scenario:
I have nuxt 3 app, where I am embedding one of the ...
- 2,291
0
votes
0
answers
15
views
Vue3 Typescript Sum all values of a column in an array
I'm still very new to this programming language and I'm trying to take an array column and sum its values so I can show a total amount on the webpage.
Question #1
I was attempting to use a computed ...
0
votes
0
answers
5
views
Passing an object to a route with vue-router
Based on this from vue-routers site it seems as though you can pass an object as a prop. However, everytime I try to do this it seems to it fail saying invalid param
My route is defined as follows:
...
- 1,483
0
votes
1
answer
16
views
How to build a Vue web component which reflects an internal state as an attribute?
I am building a web component input which looks like this with Vue 3:
<my-input value="Search"></my-input>
How can I make sure that the value attribute is always equivalent to ...
- 19.9k
0
votes
1
answer
31
views
Vue 3 and Vitest focus input sets document.activeElement to HTMLBodyElement in test in composition API
Given a Vue 3 component
<template>
<input id="input" type="text" @focus="handleOnFocus($event)" />
</template>
<script setup type="ts">...
- 2,750
0
votes
0
answers
19
views
element plus key How do I set the key for select v2 [closed]
How do I set the key for select v2 to prevent the entire visual list from being refreshed during virtual scrolling and reuse the dom using vue's diff algorithm
<template>
<el-select-v2
...
0
votes
0
answers
11
views
Where to store a frontend-environment variable in Jhipster (Stripe publishable key)
Stripe accounts come with test and prod, publishable and secret keys.
The application is generated by Jhipster.
Regarding the publishable keys, I want to pass them as environment variables to use ...
- 1
0
votes
0
answers
10
views
Vuejs Page break problem in jsPdf when print receipt
I have 2 problems, my receipt is very long and when I export the pdf it has a page break, so I am keeping pdfHeight fixed. How can I make pdfHeight calculate the height automatically and not have a ...
- 55
0
votes
1
answer
28
views
"if regex.test" doesn't works properly on javascript vuejs router [duplicate]
const router = createRouter({
history: createWebHistory(),
routes,
});
// ...
const allowedToAnonymous = [
/^\/login$/g,
/^\/signup$/g,
/^\/home$/g,
/^\/emailconfirm\/[0-9a-zA-Z]{8}$/g,
...
- 143
-2
votes
0
answers
17
views
Laravel with Inertia.js and Vue 3 performance issue when disabling hardware acceleration
hello I have a problem with Laravel Inertia with Vue 3
the problem is that I'm having high CPU usage when launching the Laravel server although I don't have much content on the website yet I have only ...
0
votes
1
answer
32
views
Transition Issue with Layout in Nuxt 3
I am facing an issue with route transitions when conditionally disabling layouts on specific pages. I have a <NuxtPage /> in app.vue wrapped in default <NuxtLayout />, which contains a ...
- 319
-1
votes
1
answer
28
views
Nested v-for for image grid
For a component in Vue I want to achieve the following layout, but exchange the img src with a path from an array of images with a v-for loop .
<template>
<div class="grid grid-cols-2 md:...
- 366
-3
votes
0
answers
28
views
Why is it that when I use a third-party packaged js file and modify its source code, the page does not take effect? [closed]
i used called maotu third-party lib [enter link description here][1] ,There are two features I don't need. I modified the source code, but it doesent't work.Specifically, on the page of the ...
- 15
0
votes
1
answer
27
views
Component is missing template or render function
This is a stupid question, but I can't figure out what I'm doing wrong.
Trying to setup CK5 in Vue and I'm running into some issues. Getting this error: Component is missing template or render ...
- 253
0
votes
1
answer
48
views
How to show data in Vue JS without click paging
I have an issue when I want to show data in VueJS. Previously I have successfully displayed "User Online" data, but the problem is why do I have to click on the page if I want to display the ...
- 63
0
votes
1
answer
20
views
Vuelidate: Validate object with dynamic keys
I have a Vue form that contains a variable-length record with a language code as key and an object with a repeating structure as value.
const form = reactive({
record: {
en: {foo: 'bar' },
...
- 812
0
votes
1
answer
27
views
VUE can not display Chinese
I want to show Chinese in VUE, so I set utf-8 in index.html
However, when I finish coding and enter "npm run dev" to run this web app
there is still messy string on browser
Why does utf-8 ...
- 41
0
votes
1
answer
40
views
Some Tailwind classes are not applied
I'm using Tailwind in a Vue3 project and I'm encountering weird behavior with some classes. For examle, I have this code :
<li class="border-solid border-l border-red-500">
In VScode,...
- 103
0
votes
0
answers
17
views
Button within Select list that makes a POST call to add a new item to the list Primevue
I have a Primevue Select dropdown list that retrieves the items from the datatable. I want to add a button to that same list that makes a post call to add another item to the datatable. Have no idea ...
- 11
0
votes
3
answers
49
views
vue3: how to access variables in <script setup> from export default
When I make a project migration from vue2 to vue3, in the vue3 script setup segment, there is a variable, but I need to access it in the method in export default part which is from vue2 project. If I ...
- 1,725
0
votes
1
answer
32
views
Unable to Add Product to Cart in Vue.js + Nuxt 3 + Pinia Store
I've been struggling for days to get my Vue.js application to add products to the cart using a Pinia store. My backend is built with Laravel, and I'm making API requests to add items to the cart. ...
- 562
0
votes
0
answers
31
views
EsLint in Laravel 11 + vue3 and Vite
I am getting this error:
-> npm run lint
Oops! Something went wrong! :(
ESLint: 9.7.0
No files matching the pattern ".js,.vue" were found.
Please check for typing mistakes ...
- 579
0
votes
0
answers
24
views
Result Object object when i using VAutocomplete from Vuetify
I'm using vuetify in my project and I have an object object error on all dropdown entries, the bug only occurs when there is nothing selected in the dropdown and it should come with a select ...
0
votes
1
answer
23
views
How to control vue-router and nginx
I have a fronted vue3 web application.
I am currently experiencing the following problems.
But i don't know why happened and how fix it..
I think the error is due to looking for a static file ...
0
votes
0
answers
30
views
Vue modal won't show but load perfectly fine in the web page
I'm trying to create a modal with Vue to display some information of a post so i created a component Modal.vue and loaded into the page that list all the posts, and when you click on a post you should ...
0
votes
0
answers
18
views
vue3 Generic component instancetype
<template>
<div class="record-warpper">
<div class="history">
<SessionHistory
ref="sessionRef"
v-model:sessionId="...
- 1
0
votes
1
answer
54
views
vuejs @input is getting called only after onfocusout, i want to call it when user is typing
i am trying to use @input on input field in vuejs, but the function assigned to it gets called only after user has stopped typing and the focus is out of the input field, that means it is getting ...
0
votes
1
answer
25
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,...
- 11
0
votes
1
answer
16
views
How can I prevent the click event of the parent card element from being triggered when clicking on the child dropMenu? Vue 3
There is a certain case card, when clicked on, the transition inside takes place
v-for="caseInfo in casesInfo"
:key="caseInfo.id"
:caseInfo="caseInfo&...
0
votes
0
answers
35
views
How to create a standalone embeddable script from an internal Vue component?
I have a Vue application, and within, I have a component, which I reuse throughout the app. It's located in src/components.
I'd now like to make it so this component can be embedded into other ...
- 111
0
votes
0
answers
27
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 ...
- 319
-1
votes
1
answer
42
views
Vuejs guard router failed with infinite loop
Hellop, I have a vue3 app consume laravel 11 api,
I want to develop a router guard to redirect unauthenticated users to the login page. When the Laravel server is not running, the code works and ...
- 184
0
votes
1
answer
32
views
Why is my ref-Element sometimes just NULL instead of being the actual Element in VueJS?
I want to assign a reference to my VueJS-Component:
<audio
ref="audioPlayer"
controls
controlsList="nodownload"
preload="metadata"
>
<source
:src=&...
- 12.2k
0
votes
0
answers
49
views
Javascript regex is working on desktop but not working on mobile
I am using regex in vuejs to manipulate input field data.
below is the code:
<input
v-model="inputValue"
type="text"
:placeholder="placeholder"
:class=&...
0
votes
0
answers
28
views
VueJs 3 production build looks different then local served
I am newbie to VueJS and using VueJS 3 to build a basic portfolio website with backend as GoLang and VueJS as frontend. I am facing issue where local build when we run server saying "npm run ...
- 3
-2
votes
0
answers
21
views
SVG Spam in chrome with VueJS [closed]
I'm new with template developement, but i do use it for save my time, but now, it's a problem..
When a tring to access at my site in production version, it spamming SVG request in network tab and the ...
1
vote
1
answer
34
views
How to listen changes in slots vue
I come with a quick questions for you guys, I've one component who can receive many child (as slots). the problem comes when some of these childs are async (using suspense). My component apply some ...
0
votes
0
answers
14
views
Update data after query fetching on success with vue query v5
I am using @tanstack/vue-query package, and I am not sure how to update data after the query fetching is completed successfully.
I can write data update logic in query function but I want to extract ...
- 47
0
votes
0
answers
12
views
Fullcalendar with vue using eventResize and eventDrop, work when dragging time or changing time
I use editable = true and use eventDrop and eventResize to be able to move times, locally it works perfectly, but when I play for production (npm run build), when dragging the time, the screen ...
0
votes
0
answers
36
views
Links not longer working when navigating to another view
So, when I used this code to go from the view to another with props.
this my first view :
<template>
<Spinner />
<Header />
<main class="main">
<...
- 33
0
votes
0
answers
38
views
font-family is invalid in list
The font family of li in v-for is fine, but when I add an additional li element, the font family of the li element is using the font family of the system
I'm sure I've defined font-family correctly, ...
- 1
-2
votes
0
answers
25
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 ...
- 319
0
votes
0
answers
19
views
Why do I have this execution sequence in a Vue 3 program?
I am working on a project with Vue 3, Vuetify 3 and Pinia. Out of simple curiousity, I put a console.log() statement at the start of the following files in my project: main.ts, App.vue, Tracker.ts (my ...
- 1,611
0
votes
0
answers
39
views
TypeError: Cannot read properties of null (reading 'insertBefore') when adding vuetify to existing vue 3 app
I'm trying to add vuetify to an existing vue3 project but it triggers this error in some views:
TypeError: Cannot read properties of null (reading 'insertBefore')
Removing <v-app> and <v-...
- 313
0
votes
0
answers
14
views
Ant design vue upload-dragger prompt if for than max count files are uploaded
I have the below code in Vue3 app using ant design Upload Dragger
<a-upload-dragger
:showUploadList="false"
accept="image/jpeg, image/png, application/pdf"
name=&...
- 502
1
vote
2
answers
63
views
this.$.... not working after migrating Vue2 -> Vue3
So I just started migrating using the migration guide and the Compat build so we could more smoothly transition. I have setup the vue.config.js like:
chainWebpack: (config) => {
// Set alias for ...
- 911
0
votes
1
answer
21
views
Tailwind width transition for non specific values
I got a button styled with Tailwind and Vue js 3. This button contains a classic "Login" text. I want to achieve that when the user clicks and a loading status is triggered, the button ...
- 109
0
votes
1
answer
36
views
Vue 3 Splicing an array does re-render the contents correctly
I have an array of the following structure:
[
{
start: "str",
end: "str",
},
...
]
and template similar to:
<templateList v-for="(item, index) in itemList&...
- 179
1
vote
2
answers
66
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
0
votes
0
answers
17
views
Unexpected Movement in Vue Slider Component on Template Loading
I am using the vue-slider-component in a Vue.js project, and I'm encountering an issue where the slider unexpectedly moves or resets when opening a snapshot template from a download archive. The ...
- 557