173 questions
3
votes
3
answers
8k
views
How do I clear a reactive array in Vue3 using composition?
I have the following in my project...
const basicRecords = reactive([]);
It basically just houses an array of objects. I want to be able to refresh this array, that would require me to remove all of ...
- 474
3
votes
1
answer
9k
views
Watch change in nested property in Vue 3
I have created a Simple State Management with Reactivity API
My Store file looks like the following:
import { reactive, watch } from "vue";
const state = reactive({
form : {
...
- 17.9k
26
votes
3
answers
21k
views
Use props in composables vue3
I am upgrading an app from vue 2 to vue 3 and I am having some issues with composables. I'd like to use props in the composable but it doesn't seem to be working. The code sample is pulled from a ...
- 2,884
17
votes
7
answers
52k
views
How do you export default from inside script setup in Vue 3?
The export default statement does not seem to work inside <script setup>.
If I try to export it in test.vue:
<template>
<div id="test" class="test">
</div&...
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
24
votes
5
answers
34k
views
Vue | Module has no default export
I'm facing an error with vue3, ts, vue cli where it says
Module '"c:/Users/USER/Documents/top-secret-project/src/components/Features/Features.vue"' has no default export.
when importing a ...
- 11
11
votes
5
answers
58k
views
defineExpose from component's <script setup> not working in vue 3
New to Vue in general and currently using 3.2.37, I possibly missunderstood the correct usage of composition api’s defineExpose directive as documented here: https://vuejs.org/api/sfc-script-setup....
2
votes
2
answers
2k
views
How to import nodeViewProps object from TipTap in Vue 3 script setup?
I'm using TipTap, a Rich Text Editor and the way they handle props in vue components (composition api) is by importing them like so:
<script>
import { nodeViewProps } from '@tiptap/vue-3'
...
- 81
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(['...
- 226k
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(() => {})....
- 26.1k
5
votes
2
answers
14k
views
Vue 3 template refs dynamic name
I noticed that to make a template ref in Vue 3 composition api <script setup>, I should make a variable name with the exact same as the ref value.
For example in Vue 3 documentation:
<...
- 2,764
30
votes
2
answers
34k
views
How to use <component :is=""> in vue 3 script setup
I am using the experimental script setup to create a learn enviroment. I got a selfmade navigation bar with open a single component.
I am having trouble using the <component :is="" /> ...
1
vote
0
answers
577
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
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 ...
- 443
105
votes
8
answers
136k
views
How to use props in <script setup> in vue3
Just like the title says,
related Links:
New script setup (without ref sugar)
<template>
<TopNavbar title="room" />
<div>
{{ no }}
</div>
</template>
...
5
votes
4
answers
8k
views
How to target elements inside <script setup> of Vue 3 component?
How can I target the element with test class inside this vue component:
<template>
<div id="test" class="test">
</div>
</template>
<script setup>
...
- 11
60
votes
5
answers
149k
views
Vue Composition API: Defining emits
When defining custom events Vue encourages us to define emitted events on the component via the emits option:
app.component('custom-form', {
emits: ['inFocus', 'submit']
})
Using Vue 3's ...
- 46.9k
3
votes
1
answer
1k
views
Vue - Why setup with reactive when you can do it easily with data option?
I am currently building a login for a Vue app. In a tutorial (02/2021) I see that the colleague creates a setup method and imports a Vue reactive object into the component. Just to collect the form ...
- 17.9k
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:
...
4
votes
2
answers
10k
views
Destructure Reactive object in Vue script setup
I'm following the Vue 3 documents on how to move to using the <script setup> tags to simplify my component code.
One of the perks of using this setup is that you no longer have to use the export ...
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
<...
- 149
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.5k
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
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 ...
- 26.1k
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 ...
- 26.1k
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 ...
27
votes
4
answers
48k
views
How to use v-model on component in vue 3 script setup
I want to add a v-model on a component but I got this warning:
[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.
...
1
vote
2
answers
614
views
How do I show options in select using v-for with Vue3?
The script part:
<script export>
let categories=ref({})
let selectedCategory
onMounted(async () => {
getCategories()
})
const getCategories=async () => {
...
16
votes
3
answers
23k
views
How to access this.$refs in <script setup> Vue
I'm trying to replicate this, only with <script setup> tag which doesn't have this keyword.
Template (from code that I'm trying to replicate)
<swiper ref="swiper">
<swiper-...
- 2,116
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 ...
- 61.4k
31
votes
4
answers
17k
views
How to define `name` and `inheritAttrs` in `<script setup>`?
Options API:
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'CustomName', // 👈
inheritAttrs: false, // 👈
setup() {
return {}
},...
- 473
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=&...
1
vote
1
answer
2k
views
VueJs 3 & InertiaJs Script Setup accessing global property
I'm trying to set up my InertiaJs / VueJs 3 / Laravel application with a simple way to emit and listen to the events - commonly known as an event bus.
I've done some digging and have come across the ...
-1
votes
1
answer
220
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 '@/...
- 873
-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=&...
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 ...
- 216
0
votes
2
answers
86
views
Vue3:How to pass updated props to child component
I'm trying to figure out how to pass updated props to child component.
For example,
// parent component
// temp is an reactive object
<Child :temp="temp">
and in Child component,when ...
- 13
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:
{
...
- 304
1
vote
3
answers
4k
views
vue.js 3 .value.click is not a function
<template>
<RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
</template>
<script setup>
import ...
- 17.9k
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 ...
- 1,192
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 ...
- 29
87
votes
7
answers
177k
views
Add global variable in Vue.js 3
How to add a global variable in Vue.js 3?
In Vue.js 2 we use this in the main.js file:
Vue.prototype.$myGlobalVariable = globalVariable
- 341
4
votes
2
answers
5k
views
Jest unit test cannot find component functions when using Vue3 script setup syntax (wrapper.vm property does not exist on type)
I am starting to use Vue3's SFC script setup syntax: https://vuejs.org/api/sfc-script-setup.html
When I try to write unit tests for these components the Intellisense complains that the functions ...
- 21
58
votes
4
answers
118k
views
How can I use async/await in the Vue 3.0 setup() function using Typescript
(This question has been answered for JavaScript, see below, but this question is specific for TypeScript, which behaves differently)
I'm trying to use async functionality in Vue3.0 using typescript.
...
- 1,846
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