173 questions
0
votes
0
answers
83
views
How to use VueX 3.6 mapActions in vue 2.7 script setup
we're using VueX 3.6 with Vue 2.7. The project is old We can't go to Vue3. For new components, we're trying to use script/setup for new components. How to use VueX mapper functions in this situation? ...
- 1,318
1
vote
1
answer
43
views
VueJS: Can a child component observe if a parent component has defined its event handler
given a child component Foo.vue
<template>
...
<button @click="emit('bah', ...)">...</button>
...
</template>
<script setup>
const emit = defineEmits(['...
- 1,025
2
votes
2
answers
63
views
How to pass data to child component using vue 3 h render after data is changed?
I have an issue that needs to be resolved.
a.ts
const open = ref<boolean>(false)
h(RowAction, {
open: open,
onDelete: () => {
Data.remove().then(() => {}).catch(() => {})....
- 21
1
vote
0
answers
575
views
Type of Vue reference in a component with a generic type
I am using Vue 3 (Composition API) with Typescript. Here is my code.
<script setup lang="ts" generic="T">
import { ref, Ref } from "vue";
const props = defineProps&...
- 131
2
votes
0
answers
188
views
Reset Pinia store nuxt3 with vite HMR
I am having issues with my store not resetting properly when locally developing, this is (i suppose) because of Vite HMR in my Nuxt3 application.
My store is defined as so:
import { defineStore, ...
- 3,860
1
vote
0
answers
87
views
How to stop executing rest of code in script setup syntax in composition api Vue 3
I have a page template that contains the following sub-component:
<template>
<ManageVacanciesAndMatchesTabVacancies @loading-data="setIsTabDataLoading" />
</template>
And ...
- 3,860
4
votes
1
answer
3k
views
why do I get this error when I try to use multiple defineModels in vue.js?
I am trying to use the v-model directive on two input elements. However, I am getting the following error: duplicate model name "modelValue". Below I show the code that generates this error:
...
0
votes
1
answer
91
views
$route throws an undefined error from inside script setup
I was wondering why this works:
<template>
<h1> You are on page {{ $route.params.page }}</h1>
</template>
but when I try to access the param from script setup as in
<...
- 15
0
votes
1
answer
82
views
Vue.js 3 SFC multiple lists
I am creating a vue.js3 SFC application where the list component is used multiple times. The aim is to produse a separate lists of items in each component from SingleList.vue. I wanted to use a v-for='...
- 15
0
votes
1
answer
215
views
Vue.js 3 SFC passing data to siblings
I am trying to pass a prop between sibling elements (a card and an input) and so far it has not been successful.
I have a button nested within a card element. When someone is pressing a button, I emit ...
- 15
1
vote
1
answer
426
views
vue3 script setup not working with revogrid
I have a vue3 app, in which I'd like to keep using the standard composition api style. Unfortunately, RevoGrid doesn't seem to like it. RevoGrid works with an options api style , but the equivalent ...
1
vote
1
answer
50
views
Component isn't updating from computed value [duplicate]
I have a generic component linked to a computed value to simulate routing.
There is a current page property, and three links, whenever the user clicks on a link, that property gets updated via the ...
- 15
7
votes
1
answer
14k
views
How to use defineModel (in Vue 3.4) for uses other than inputs
The examples given for defineModel in the Vue docs all relate to uses for data inputs. I was wondering if this construct could also be used elsewhere, thus avoiding the somewhat cumbersome props/emit ...
- 1,499
1
vote
1
answer
4k
views
Vue watchers and reactivity
In my vue app, I want to watch route changes, and then react to the change. Here is an example where I simulate a route change.
<script setup>
import { ref, watch } from 'vue'
import { ...
- 35
1
vote
1
answer
72
views
How can I get the argument type of an SFC component's event?
Say I have an SFC component with a save emit:
// ChildComponent.vue
const emit = defineEmits<{
save: [data: { new: Row[]; removed: Row[] }];
}>();
If I want to use the new & removed in a ...
- 388
0
votes
1
answer
36
views
VueJS passing parameter to bound property
I want to track the state of several buttons without having a tracker variable and function for each.
So I want to pass a parameter through to a computed property, something like this:
<div class=&...
- 2,160
-1
votes
1
answer
219
views
Vue composition typescript access props value in another props validation
i would want to access the props value from another props validator.
Here is my code:
<script lang="ts" setup>
import { PropType } from 'vue';
import { iStep } from '@/...
- 124
-1
votes
1
answer
93
views
Blank background-image in vue.js
For a website, i want 70% of the page to be covered with an image. However the image is just blank.
I use Vue.js as my frontend. Here is the code that results in a blank space:
<script setup lang=&...
- 59
0
votes
1
answer
159
views
Vue - Eslint Complaining About Missing Variable in Setup Script
Funnily the Vue js documentation is highly suggesting to use the <script setup> syntax of the Composition API, the problem with it is that the documentation is very basic and it interferes with ...
- 141
2
votes
1
answer
526
views
How to make vue testing library recognize script setup?
So I have an existing project where I wanted to add testing suite with jest + vue testing library.
Added necessary libs and configs and jest basic calc sum test passes.
After that importing basic vue ...
- 403
0
votes
0
answers
33
views
How to access current route name from App.vue in Vue 3 script setup [duplicate]
I'm having trouble with getting current route name in App.vue in Vue3 script setup.
I would like to get the current route name and check if it matches some conditions.
The route is /login.
and the ...
- 1
0
votes
1
answer
1k
views
Is there a way to pass a Object as param to router in VueJS 3 (Composition API + script setup)?
In this project, there's the user which is a js object, like this:
const user = {
"ID": id,
"NAME": name,
"EMAIL": email,
...
}
And here's the router on VueJS:
{
...
user22453190
1
vote
0
answers
1k
views
Using TipTap with Vue3+Composition API+TS
I'm using TipTap with Vue3, Composition API and typescript (script setup) and I've faced a problem. There is no documentation how to implement https://tiptap.dev/examples/interactivity vue ...
2
votes
1
answer
3k
views
Vue3 - script setup use 'withDefaults' for nested object,it attributes become required,how to fixed it?
I defined a props:
interface Props {
formList: BaseSearchFormListItemType[],
inline?: boolean
searchBtn?: {
show?: boolean
text?: string
type?: string
size?: string
}
}
const ...
- 23
1
vote
2
answers
735
views
Unable to reference slot props inside template
I get the following warning in the browser when I try to reference the slot props. What am I missing?
[Vue warn]: Property "disabled" was accessed during render but is not defined on ...
- 31
0
votes
0
answers
173
views
When Click on "Edit", the inputfields on the Editpage should be prefilled (VueJS, Pinia Store, API Platform)
Want to build a simple CRUD App to understand the Basics. I am using Vue3 + Pinia Store + API Platform.
What i have:
StudentsPage: here, i fetch Data from my API and display the Data in a Table (...
- 23
2
votes
1
answer
2k
views
Vue 3 Component losing reactivity
I've been learning Vue 3 for the past month or so and have gotten quite far but I can't fix this no matter what I've tried. I know I'm losing reactivity but I can't figure out how and it's driving me ...
- 319
1
vote
0
answers
751
views
Incorrect TS error in defineProps with vue 3
<script setup lang="ts">
import { computed } from 'vue';
type Props = {
duration?: '0'|'0.5'|'1'|'1.5'|'2'|'2.5'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'10',
//^^^^^^^^^ ESLint: Prop 'duration'...
0
votes
1
answer
789
views
How can I use a custom name for a vue component?
The component I want to use with a custom name is defined as:
@/components/MyCustomName.vue
<template lang="">
<div>I'm here</div>
</template>
<script>
...
- 796
1
vote
1
answer
852
views
Why some variables are inacessible in onMounted Lifecyle Hook in vue3 composition API?
I'm kinda new to composition API in vue3 and I'll be glad if someone could explain to me why...
this works:
<template>
<h1>{{ foo }}</h1>
</template>
<script setup>
...
1
vote
0
answers
358
views
How to use jest.spyOn in wrapper.vm function?
I'm using vue-test-utils to test my components. They are written in composition API with <script setup> tag. I'm facing some difficulties when spying the functions to test if they were called or ...
0
votes
1
answer
530
views
Tiptap2 floating menu giving me an error in vue 3 with script setup
I'm just following the tiptap docs trying to implement a floating menu in vue 3. Im using script setup and im not sure if thats the issue, but in either case im struggling to get this to work. The ...
0
votes
1
answer
527
views
How to load a dynamic image from a url in Nuxt3?
I have a nuxt 3 component which fails to load dynamic image that i'm getting from a specific URL(auth0 images).
My template looks like so:
<template>
<img class="h-28 w-28 rounded-...
4
votes
1
answer
3k
views
Is there any problem if I use two onMounted() per one component?
I have only seen examples of one onMounted() per one component.
I'd like to use onMounted() for each feature.
Is there any problem?
MyComponent.vue
<script setup>
import { onMounted } from 'vue';...
- 171
0
votes
2
answers
2k
views
Vue 3 composition API pass array props through many children
I need to pass an array from component A (App.vue) through component B to component C. What I do is this (this first step works, just read it to understand):
// A.vue
<script setup>
import B ...
- 147
0
votes
1
answer
624
views
How to do this with Vue SCRIPT SETUP
I am using this lib simple-vue-camera. Got it to work properly,but i wish I could use it with script setup. I cant access the snapshot method of the camera..
The problem i guess is in the 'const ...
- 67
1
vote
2
answers
625
views
How to export reactive Vuex state from setup in Vue2.7
Here's a reproduction link: https://stackblitz.com/edit/node-c6mn17?file=src/components/Test.vue
I want to be able to use reactive state from that store using setup in Vue 2.7.
I export a Vuex store ...
1
vote
4
answers
4k
views
Why doesn't the component tag in Vue3 work properly for dynamically rendering components?
I'm just learning Vue and trying to learn dynamic rendering using the component tag. What is the problem with this code? No errors are displayed in the console, but clicking on the buttons still does ...
- 17
3
votes
2
answers
5k
views
How to clear "Slot 'default' invoked outside of the render function" warning? Vue3, Composition API
The full warning message:
[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render ...
- 523
0
votes
1
answer
559
views
Why is my bound data in a Vue 3 form not being updated when printed on the console via a function?
I have created a form component in Vue 3 where I am trying to bind a reference object to input elements and from my understanding of two-way binding and how Vue behaved for my past works, I expected ...
2
votes
2
answers
4k
views
How can I focus on an input that is dynamic in Vue 3?
I'm building an application in Vue 3 using Script Setup and Quasar where the user can add new input boxes by pressing the "New Space +" button. It's super annoying to have to click the ...
- 514
1
vote
4
answers
456
views
Setting input attributes with props and <script setup>
Is it possible to set a form input type using a prop?
The below does not seem to work, any others ways to do this?
For example
<script setup>
defineProps({
InputType: String,
InputId: String,...
- 75
1
vote
1
answer
521
views
How to access SFC data properties from the parent not using $refs in Vue v3?
I have this Vue 3 SFC
<template>
<div>
Home component
</div>
</template>
<script>
export default {
name: 'Home',
icon: 'house-icon'
}
</script&...
- 5,219
1
vote
2
answers
1k
views
Can I import a component in Vue.js with path based on prop?
I am using the Material design Icons library for Vue.js.
This library contains a folder and every icon is a single file component in that folder.
I have another component, ToolbarButton, that has a ...
- 15
2
votes
1
answer
947
views
Vue3 ts script setup syntax, Vitest $setup.helperFunction is not a function
im trying to write tests with Vitest for my vue3 component
this is my component code:
<script lang="ts" setup>
import { reactive, computed, ref, onMounted } from 'vue'
import { ...
0
votes
2
answers
536
views
Vue component's button callback: Cannot read properties of undefined
Using Vue3+typescript, I'm trying to use a library called gtag-vue to send google analytics events to my account.
The idea is that in a Vue component, when the user clicks a div, I'll send a custom ...
- 4,053
0
votes
1
answer
2k
views
Merging interfaces and passing the result as a Prop to defineProps in Vue 3
In vue 3 composition API im trying to do the following:
<script setup lang="ts">
import { computed } from "vue";
// vue doesnt like this line (the export seems to be the issue)
export ...
- 334
5
votes
0
answers
697
views
How to unit test a vue script setup component?
We want to use vue composition api using the script setup in our company. How would one write unit tests for a script setup component?
We're using Vue 2.7.14 and vitest if that matters.
0
votes
1
answer
197
views
Why is my component not reacting to the changes? Vue3
I have a child component that takes in some props to decide for a state:
export interface IProps {
selected?: boolean,
answered?: boolean
}
const {selected, answered} = defineProps<...
- 385
1
vote
1
answer
1k
views
How to create a SetTimeout for a message alert component in Vue 3 Composition API?
I am getting started with Vue. I am struggling to create a SetTimeout for a message alert component.
My component looks like this:
<script>
export default {
name: "Message",
...
