Questions tagged [vue.js]
Vue.js is an open-source, progressive JavaScript framework for building user interfaces that aims to be incrementally adoptable. Vue.js is mainly used for front-end development and requires an intermediate level of HTML and CSS. Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3] in addition to this tag.
vue.js
108,058
questions
0
votes
2
answers
15
views
Re-render a OpenWeatherMap component when switching language in Vue 3
I am a beginner using Vue 3, to learn it I am developing a simple weather webapp using OpenWeatherMap API. I have added multilanguage support using vue-i18n library and everything works fine. But ...
- 549
1
vote
2
answers
35
views
How to use provide in Vue's optional API to achieve bidirectional data transfer of basic data types?
There are two components. I want to implement two-way data transmission between parent and child by providing a responsive object. However, I found that the object type can correctly implement ...
- 23
0
votes
0
answers
19
views
How to add an extra class on highlightedwhich is added by highlighted props vuejs3-datepicker
I am using import Datepicker from 'vuejs3-datepicker';
and I am using highlighted props to highlight specific dates but I want to color highlighted dates with different color but 'vuejs3-datepicker' ...
- 81
0
votes
0
answers
11
views
How to style a iframe scrollbar in vue when utilziing a reactive variable for contents
I am loading an email template in to my application using the following code:
<v-col class="px-10">
<div v-if="selectedEmailLoading" class="h-100 w-100 d-flex ...
- 1,423
0
votes
0
answers
15
views
Best/Simplest Way to Incorporate User Routing or a Front-End Framework into an Existing Project [closed]
I am making a card game with Node.js, express, and socket.io. The game is written in 4 files with a server.js, index.html, index.js and style.css and works for what it is (the index.js handles the ...
0
votes
0
answers
11
views
How to Add a Trailing Slash to URLs in Nuxt 3
I have a Nuxt 3 project with a directory public/urlName/ containing an index.html file. When the page is accessed without a trailing slash at the end of the URL, the files and styles located in the ...
0
votes
0
answers
13
views
iag-grid data is not refreshing when i change the data from an external component
my aggrid is getting its data from a pinia store, bras is an array of the customer's branches
const { selectedCustomer } = storeToRefs(customerStore)
const rowData =selectedCustomer.value.bras
when ...
- 23
0
votes
0
answers
19
views
I have a vue.js & three.js code and how to hidden coordinate part in three.js?
Everyone, I have a vue & three.js code. and i wanna hidden the part which shows in the picture.
I have no experience in three.js and i don't know how to fix it.
i used scene, camera, renderer, ...
0
votes
0
answers
24
views
Twilio error while accepting the incoming call
Error of
@twilio_conversation…js?v=582255ec:11005 Uncaught (in promise)
Error: Forbidden
at Upstream2._callee$ (@twilio_conversation…v=582255ec:11005:27)
at tryCatch (chunk-NHAX666J.js?v=...
- 1
0
votes
0
answers
17
views
Nuxt3 clears inputs autocomplete
Clear Nuxt3 project. When i do "hard refresh" (cmd+shift+r) there are 3 states of form inputs: Empty, Autocompleted from browser, Empty. Example and code below:
HTML:
<form>
<...
- 1
0
votes
1
answer
46
views
How does work Vue v-model with update:modelValue and how to prevent it from default logic depending on modal
Can someone explain to me if v-model is:
:modelValue
update:modelValue
then what happen when v-model with update:modelValue used both.
So in my code I have this component:
<script src="https://...
- 39
0
votes
0
answers
46
views
Dropdown menu overlaps with component in Vue app
I had a Vue electron app, in which Home view component has 3 child components which are in single column one after the other, I have a b-dropdown in middle component when I scroll up the opened ...
- 19
0
votes
1
answer
32
views
Loading an email template into a vuetify app
I am displaying email from an outlook email using MS Graph API. The content of the body is in html format so I am trying to add it via the v-html prop such as:
<div v-html="emailContent"&...
- 1,423
-1
votes
1
answer
21
views
vue router installations to an existing Vue.js project returning error
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/vue
npm error ...
-1
votes
0
answers
40
views
Cannot read properties of undefined (reading 'Vue') at initBackend, how can i solve this error?
I’m working on a Vue 3 application using Pinia for state management, and I’m encountering an issue where added messages are not rendering on the screen. Additionally, I’m getting a persistent error in ...
- 1
-1
votes
0
answers
22
views
a intresting questring,for vue's 'name' [closed]
In Vue, multiple routers use the same Vue file, and they will click to switch, just like tab switching, but they are using the same. Vue file. How to use keep alive to cache this. Vue file
in my vue ...
0
votes
1
answer
29
views
Best way to implement conditional tabbed routing in vue
What I'm trying to implement is routing with tabs where the available tabs change depending on the user type (upon authentication the user type gets stored in a pinia store).
This is what I ended up ...
- 179
0
votes
0
answers
76
views
Do we need to clear class to prevent memory leak?
In the following script, this class is used to store a lot of Geojsons object (for google maps api):
class MapService {
private layers: Map<string, google.maps.Data> = new Map()
...
- 496
0
votes
0
answers
19
views
Handling Emits with Vue.extend in TypeScript
I'm following the Vue 3 migration guide and trying to declare all the $emit events in the emits array. My component is written in TypeScript, and I'm still using Vue.extend. However, I'm encountering ...
0
votes
1
answer
28
views
Vue Testing: Triggering Checkbox not working
I'm trying to test if a checkbox has been checked with Vue test utils and Vitest, but the test always fails and I don't understand why.
Component.vue:
<template>
<input type="...
- 15
0
votes
1
answer
19
views
Colon symbol in class names for tailwind break Pug files
I am creating a project in Vue where the HTML aspect of it is written in pug. When I add a tailwind class, (for example in this case I am trying to add the classes )
.w-16.md:w-32.lg:w-48
Since it is ...
- 29
-1
votes
1
answer
44
views
Sorting a object's properties after reducing
I am recreating the effects of an outlook mailbox by grouping a list of outlook emails by their conversation id. However, I need to sort my list twice such that the emails in each group are ordered ...
- 1,423
0
votes
1
answer
27
views
vue.js and Element Plus - use el-select with key
I intend to make a drop-down menu that can have three values: The first can be 'Father' or 'Mother' depending on the condition returned by the autoGender(index) method. The second is always 'Father'. ...
- 137
1
vote
1
answer
53
views
How to use Pinia with a Map of table configuration objects
I am using Pinia to manage the state of different DataTables throughout my application. It's possible for multiple tables to be opened "on top" of each other (i.e. in overlay(s) over each ...
- 3,500
-3
votes
0
answers
45
views
How to use vue quill?
If I use vue quill editor, I am facing this error in the console "[Deprecation] Listener added for a 'DOMNodeInserted' mutation event. This event type is deprecated, and will be removed from this ...
- 1
0
votes
0
answers
42
views
How to style Chart.js bar chart? I have an example of Chart
I need to create some bar chart.
This is a reference:
https://i.sstatic.net/Zj4G3BmS.png
This is what I have for now:
https://i.sstatic.net/pzPxKaZf.png
I marked my 3 questions on the reference with ...
- 1
0
votes
0
answers
21
views
Vue3 Openlayers + webpack = can't resolve modules
webpack fails to resolve modules dependencies when compiling
I got 94 erros like this:
ERROR in ./node_modules/vue3-openlayers/dist/vue3-openlayers.es.js 63:0-41
Module not found: Error: Can't resolve ...
- 1,713
1
vote
1
answer
56
views
two-way binding of a checkbox does not happen
For the code posted below vue component it is a child component and is hosted in a specific parent. When I make two ways binding via vModelCheckGeoTIFFOverlayBandAverages by introducing a change to ...
- 27
0
votes
0
answers
12
views
Failed to resolve vue/compiler-sfc when I try to install Caldera
I try to install Caldera by following the steps explained on this link https://caldera.readthedocs.io/en/latest/Installing-Caldera.html
I succeed to install every package on the file requirements.txt ...
0
votes
0
answers
16
views
Customize the dot marker with tooltip on line chart (ApexCharts)
I'm trying to create a custom library of chart component with Apexcharts and Vue3Apexcharts. I would like to be able to customize this little dot (marker)
Here is what I would like to customize
I ...
-1
votes
1
answer
14
views
Splash Screen is not showing ionic vue capacitor
I am experiencing an issue with the splash screen not displaying in my Ionic Vue project using Capacitor. Despite following the standard setup instructions, the splash screen does not appear when the ...
- 399
0
votes
1
answer
26
views
Adding attribute to HTML elements to whole code
I'm using Nuxt 2 in my project with Storyblok datasources as translations and e.g. I've:
<span v-text="$t('labels.cartSell')" /> and I need to add something like data-translation="...
- 113
1
vote
1
answer
48
views
Vue how to mock a ref value
I am writing a modal component in vue 3:
// MyModal.vue
<script setup>
const emit = defineEmits(['close'])
const modalDialog = ref(null)
const close = () => {
emit('close')
...
- 623
0
votes
0
answers
30
views
'stats' not allowed in Vue 3 cli?
I am trying to generate a stats report for my Vue 3 project. There is no way I can enable stats. I currently use webpack-bundle-analyzer to view a map of the bundles, but enabling a report for it ...
- 4,882
0
votes
0
answers
20
views
i am using vue-instantsearch with vue2，the ais-Hits widget work fine，but the ais-SearchBox can not render the form css
this is my code
<template>
<div id="app-search">
<ais-instant-search :search-client="searchClient" index-name="demo_ecommerce">
<ais-...
- 1
0
votes
0
answers
23
views
How to fix vue.js schedule d.cleartime error?
I want to make a scheduler with jqwidget and a java spring boot backend where i fetch data from my database.
Now I always run in following error:
main.js:8 [Vue warn]: Error in mounted hook: "...
- 1
0
votes
0
answers
11
views
run vue playwright e2e tests in GitHub actions
While trying to write my CI using GitHub actions,
This is one step that I'm not able to do, run the e2e tests.
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
...
- 149
0
votes
0
answers
45
views
Unable to send data through props in vue js
Context
I had created a product page which populate the products info from API. Now I am building the edit Product page. On edit product page, it contains 4 components which I am rendering through ...
- 3,733
0
votes
0
answers
31
views
Vue memory leaks in table using dynamic components
In our Vue/Vuetify 3 project we have generic table component which conditionally renders different components as table cells.
Unfortunately, tables are causing big memory leaks.
It is a big component, ...
1
vote
0
answers
31
views
Vuetify tabs system bug
I have a problem with the tab system in my project. When I want to have tabs in a dialog from Vuetify and I want to have inputs and things that should be there and how it's supposed to work correctly ...
0
votes
0
answers
25
views
Audio recording in front-end
I create a Vue application (using Vue 3.4.21).
I am interested in allow user to record an audio, and managed to create a component that does it, and saving it to local user machine.
Here you can see ...
- 5,492
0
votes
0
answers
24
views
TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'
I am new to vue.js and i'm trying to upgrade a relatively big vue 2 project to vue 3 and after i updated all the necessary files, i came across this TypeError: Failed to execute 'insertBefore' on '...
0
votes
0
answers
44
views
VueJS 3.4 - Computed value to get from two sources but set in one
The logic in my app is to fetch some array of objects from API with @tanstack/vue-query, update some of those objects and send a patch request only for the updated objects.
So I created an empty array ...
- 336
0
votes
0
answers
9
views
How to create a Q-Toolbar that becomes sticky on the top when user scrolls down?
I'm building a VueJS-Application using QuasarFramework that has a QToolbar inside a QHeader, so that the toolbar stays always on top.
Now I want to put the Toolbar little lower to have another ...
- 12.2k
0
votes
1
answer
20
views
Provide / Inject value not getting updated if its reactive value is changed - VueJS
I am quite new to Vue.js coming from a React background. I have a reactive variable config which is passed to provide() function in a component and used by other component using inject(). But the the ...
- 333
0
votes
1
answer
16
views
Fusion chart throwing error in Lazy loaded route vue
I have an existing project vue, in which case everything was running fine.
we decided to optimize the bundle size of the app because it was too large and implemented lazy loading routes,
e.g
const ...
- 89
0
votes
0
answers
20
views
Vue js with Express
how can i use Vue JS with Node js express.
Hello,
How can I integrate Vue.js with a Node.js Express server?
I want my Node.js server to provide data to my Vue.js site or for the Vue.js front end to ...
-1
votes
0
answers
28
views
Vue.js 3 mobile app from Capacitor error. No response from Laravel API with Sanctum
Good day, everyone! I have an issue with my Vue.js 3 mobile app which uses Capacitor runtime. There's no response from my Laravel API with Sanctum which hosted online. The following are my codes...
...
-1
votes
2
answers
36
views
Simple concat two array of objects problem
How can I remove the middle ] and [?
plan_cookie = plan_cookie.concat(JSON.stringify(protect_plan_from_db));
alert("2.1 after CONCAT plan_cookie = " + JSON.stringify(plan_cookie));
/*
2.1 ...
- 21
0
votes
1
answer
52
views
vue 3 composition api, can not return value from a helper function to component
i think this is a problem of scope inside my helper function, i have successfully implementing the same logic in my component and it works perfectly
i have already using a composable function to use ...
