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,481
questions
0
votes
2
answers
18
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
0
answers
11
views
i use Vuexy template that is build on vite vue3 and vuetify and i use pinia store, i want to add SSR to my project
the problem is that i get errors in localStorage and window being undefined in all my pages like themes, plugins and etc
and my project is considered as a middle-large sized one so i can't update my ...
- 11
1
vote
0
answers
19
views
How can I display complete context menu when making use of v-menu in vue 3
I'm not able to display complete context menu without making use of a method which is implemented with the help of extensions.
I am displaying context menu by making use of @contextmenu in v-data-...
1
vote
2
answers
36
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
20
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
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
22
views
How to set the key attribute of one specific element in vuejs3
In Vue3 (version 3.4.21), I have an "single" component in the middle of a list and I want to set a special key value for this element so that transitions work as expected.
<transition-...
- 303
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
2
answers
51
views
CSS class disappeared without notice, where did it go?
I have this example table taken from https://element-plus.org/en-US/component/table.html#table-with-status
I would like to give some color for some rows.
Here is a minimal working example:
<script ...
- 4,058
0
votes
1
answer
31
views
Changing v-btn hover effects in vuetify 3
I am having trouble removing the background hover effect, well, manually changing the hover effects of the Vuetify v-btn component.
I have attempted solutions from this github thread(https://github....
-1
votes
0
answers
41
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
0
votes
0
answers
16
views
Vue I18n with variables
In vue2 I used to be able to have variables in my json translation file like this:
"info": "Email: <a href=\"mailto:@:contact-details.email\">@:contact-details.email</...
- 1,761
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
77
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
20
views
Set text of Loading component with new line characters
I am using the Loading component of Element-UI, I want to set the loading text that displays under the spinner with "\n" included for the new line characters. Following is the Vue component ...
- 467
0
votes
0
answers
37
views
Vuex don't change array after get date from back
I have been struggling for several days with the task of saving and changing the array in Vuex when receiving data in the back.
I found similar problems but their solution did not help.
actions.js
...
- 1
0
votes
0
answers
12
views
Using Instagram API to fetch a public professional account posts without tokens from their side
I'm currently building a portfolio for a social media celebrity using Laravel 11 + vue3 composition API
I am at the point where I created a meta dev account and created an app and setup IG basic ...
0
votes
1
answer
24
views
Getting response from PrimeVue FileUpload after uploading file
I'm currently using PrimeVue FileUpload.
How do I retrieve the response data from my API call after uploading a file using the PrimeVue FileUpload component? My backend API on localhost:8000 ...
- 37
0
votes
0
answers
14
views
VueJS 3 : reference value not updating on click
In VueJS 3, I have a parent Component Index:
<CreateReportButton>
<slot>
<PrimaryButton as="icon" size="xs" color="white" @...
-1
votes
0
answers
37
views
Send Whatsapp message programatically, continue manually [closed]
Objective: Initiate whatsapp conversation programatically when user takes some action on my firebase app, then be able to continue the conversation manually thru my whatsapp app on my mobile (all ...
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
1
answer
48
views
Laravel, Nuxt config for headers (cors)
error:
http://localhost:8000/sanctum/csrf-cookie' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
...
0
votes
0
answers
21
views
How to configure nuxt 3 to name components in dev tools according to their filepath?
In our nuxt 3 project, we have a project structure like this:
components/
MyButton/
index.vue
index.scss
index.composable.vue
For the most part this works as expected, where &...
- 2,274
0
votes
0
answers
13
views
Section Navigation via GSAP animation goes only forward Nuxtjs
I have a nuxt3 app, with an index.vue page in the pages folder. I'm using layouts/default.vue instead of app.vue
I'm have this animation were it looks like the pages are sliding on top of each other ...
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
39
views
"Contentediable" the old node is preserved when rendering new ones (Vue 3)
Input data:
{
parts: [
{
id: "part-1",
type: "part",
items: [
{
type: "content",
tag: "b",
content:...
- 1
0
votes
0
answers
46
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
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
45
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
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
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 ...
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 ...
0
votes
0
answers
23
views
nuxt3 couldnt import css files
enter image description heremy css file is under assets and when i try to use it as global in nuxt.config.ts couldnt get accept how do i fix this
I'm currently working on a Nuxt 3 application and ...
0
votes
0
answers
13
views
when debugging vitest unittest with vscode the Debug Console cannot access imported modules
I'm using vitest+vue3. When launching the debugger with launch.json pressing F5, in my Debug Console I can use modules imported by the script i'm debugging no problem.
but when I want to do the same ...
- 760
0
votes
1
answer
15
views
Vue3 composition api transform props multidimensional Array into list
I'm using vue3 with composition api and I receive a props from db as a multidimensional array on page loading like this:
[
{name: 'Jack', seat: '12', id: 1, ...},
{name: 'Jack', seat: '13', id: ...
- 25
0
votes
1
answer
23
views
How can I define an emit which doesn't have any args in Vue 3.3+ ? (TypeScript)
From Vue 3.3 is possible to define emits in TypeScript like this
<script setup lang="ts">
const emit = defineEmits<{
change: [id: number]
update: [value: string]
}>()
</...
- 235
1
vote
1
answer
43
views
How can you update a floating-vue dropdown popup in Vue3?
I am using Vue3, Pinia and the floating-vue library.
I am trying to dynamically create a popup at a position which depends on other elements that may move in the viewport. For this I place a dummy div ...
- 338
0
votes
1
answer
45
views
How to load js in laravel vuejs 3
I'm new to Laravel and VueJS, and I want to include JavaScript files in my project. Can someone please tell me how to do that? I watched a video on YouTube and got a solution, but sometimes it's not ...
- 3
0
votes
0
answers
31
views
Can I rename a Vue project? [closed]
I've got a Vue project that uses Vuetify, Pinia and Typescript. I'd like to re-create it and then copy all the code from the old version into the new one, then rename the new one to have the same name ...
- 1,611
0
votes
2
answers
136
views
How can I solve the issue of 'failed to resolve import "primevue/datepicker"'
enter image description here
I want to use the package in Vue JS - DatePicker from Primevue
The documentation says that you need to install the package using the command - npm install [email protected]...
0
votes
1
answer
38
views
Vue Generic Components 'T' is not defined
Simple question, I've updated to Vue 3.4.30, and am trying to use Generic components, but when trying to use T as a type for a property, I am getting this error.. Any suggestions would be welcome.
...
- 41
0
votes
1
answer
45
views
Why is my slot not rerendered when toggling v-if
I have 3 components like the following:
IsLoadingComponent.vue
<template>
<div class="loading-spinner" v-if="isLoading"></div>
<slot v-else></slot&...
- 490
1
vote
1
answer
46
views
PrimeVue styles as "no defined" on Nuxt 3 app
What is happening?
My goal is to register PrimeVue as a module and import PrimeVue components correctly in my layouts with the default preset styles.
Thing is that when I inspect the button in the ...
- 13
0
votes
0
answers
30
views
Can't position <NuxtImg /> with object-position
I am struggling to position my images inside the <NuxtImg /> so, that they would be rendered from the top.
I have tried the following (using tailwindcss):
<script setup lang="ts">...
0
votes
1
answer
33
views
Use Twilio in Vue 3 to send message on Whatsapp
i looking the best way to send message on Whatsapp using twilio.
so here is my code :
twilio.js file
import { Twilio } from 'twilio';
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const ...
- 11
1
vote
1
answer
117
views
PrimeVue InputNumber's width exceeds the width of its parent
I have a list of items in the cart that's presented in Bootstrap rows and cols. Each item has a PrimeVue InputNumber for changing the quantity of a specific product in the cart.
Here's a StackBlitz ...
- 39
1
vote
1
answer
39
views
How can I define an emit with a return type different from void in Vue 3.3+ ? (TypeScript)
From Vue 3.3 is possible to define emits in TypeScript like this
<script setup lang="ts">
const emit = defineEmits<{
change: [id: number]
update: [value: string]
}>()
</...
- 235
0
votes
1
answer
23
views
Reset a nested property in ref didn't update v-model
How can I reset a ref and update a v-model which is pointing to child property in my ref?
I create this initState object and set it to a ref object
const initState = {
text: {
value: ""...
