1,666 questions
Advice
0
votes
2
replies
77
views
Watchers and computed properties - getter function
I've been learning Vue for my project (Composition API) and so far there is one thing that I can't get my head around. Let's say we have a reactive object:
const obj = reactive({ count: 0 })
And I ...
- 19
0
votes
0
answers
83
views
I have a problem with insertContentAt with tiptap-pagination-plus
I’m trying to insert streamed Markdown chunks into a TipTap editor using Vue and tiptap-pagination-plus.
The issue is that when the streamed content causes a page break, TipTap adds unwanted ...
0
votes
0
answers
66
views
QuillEditor --> add Module Placeholder
I wanted to add the placeholder-module in my quill-editor. I have installed the quill-placeholder-module. Whenever I tried to register it in OnMounted, it throws an error:
index.ts:35 quill Cannot ...
- 2,650
1
vote
1
answer
55
views
Vue 2 + Composition API + vue-test-utils 1.3.6: `Cannot redefine property` and `setProps` doesn’t trigger `watchers`
Problem:
I’m migrating a Vue 2.6 app to the Composition API (via the plugin) and hit two testing issues with vue-test-utils (v1) + Jest:
Jest couldn’t mock functions from a plain TS module (not a Vue ...
- 1,192
0
votes
1
answer
56
views
Why does inject() return the value of a ref from a reactive object instead of a reactive reference?
I'm working with Vue 3's Composition API, and I’m trying to provide a ref that is part of a reactive object. However, when I inject it in a child component, I get the raw value, not the reactive ref.
...
0
votes
0
answers
72
views
Limit visible items in v-autocomplete
I'm working with a component that receives a large array (around 6000 items), but I want to limit how many of those items are actually rendered, ideally just 10 or 20.
Is there a prop or built-in way ...
0
votes
2
answers
101
views
Watching i18n-vue's locale doesn't work in production
This code works only locally. In prod or stg build there are no logs in console and language code doesn't change, but the language is updated correctly across the UI.
<template>
<div>
...
- 1,099
0
votes
0
answers
50
views
Vue 3 + Laravel monolith: How to prevent JS from crashing the entire frontend?
I’m working on a monolithic Laravel + Vue 3 app (using the Composition API), and I’m wondering what the best practices are to prevent JavaScript errors from completely crashing the frontend.
Ideally, ...
- 406
1
vote
1
answer
31
views
Global Data Flow Issue
On Vue-based environment, global products item state is declared to be used in products list component, and other components like navbar for categories dropdown:
import axios from "axios";
...
0
votes
0
answers
47
views
Vuetify text-area scroll not working when placed inside slot of custom component
My project uses Vue 3 (w/ Composition API) and Vuetify. I'm trying to create a custom container component that essentially adds a title bar to its content. This is the custom component:
// ...
- 83
1
vote
0
answers
145
views
Vue 3 Pinia State and Architecture Best Practices For Parent/Child Relationships With SignalR
My project is in Vue 3 (Composition API) w/ Pinia and SignalR
Here is an example of what I'm working with:
I have a parent object, let's call it Oven, and a child object called Bread.
There is a ...
- 83
0
votes
0
answers
83
views
404 error when refreshing browser in Vue app
I have a Vue 3 app that utilizes the Composition API, Vue Router w/ history mode, Vite, Vuetify and Typescript.
When I refresh the browser on a different page, I get a 404 error, and I'm pretty ...
- 83
0
votes
0
answers
55
views
Maximum recursive updates exceeded error when pushing/replacing existing route with different parameter
when using the selctCategory function to replace the existing route parameters, I receive an error that states
"devices:1 Uncaught (in promise) Maximum recursive updates exceeded in component . ...
0
votes
1
answer
192
views
Exposing actions in composable vs accepting reactive state to update internal state?
I'm starting to get comfortable with Vue's composition API, but every time I make a composable I ask myself which pattern to use. If I have a composable whose state depends on outside triggers:
...
- 841
1
vote
0
answers
64
views
Nuxt 3: Meta Tags Not Updating in "View Page Source" but Visible in DevTools
Description:
I'm using Nuxt 3 with useHead() to set dynamic meta tags based on locale. The meta tags appear correctly in the Elements tab (DevTools) but are missing in "View Page Source".
...
0
votes
0
answers
140
views
Difference between nuxtApp.provide and vueApp.provide
In nuxt 3 you have two alternative ways to provide something globally
// using nuxtApp instance
useNuxtApp().provide('key', 'value')
console.log(nuxtApp.$key) // value
// using vueApp instance
...
- 1,846
0
votes
0
answers
78
views
Composable reactivity within a mix of options and composition APIs
"vue": "^2.7.16"
"nuxt": "^2.18.1"
"@nuxt/bridge": "^3.3.1"
I have a composable that is using Composition api.
import {
ref,
reactive,
} ...
- 510
0
votes
1
answer
1k
views
PrimeVue - How to use reset emit to clear form?
I've been experimenting with PrimeVue and am trying to understand how to use their forms. They don't have any example of clearing the form fields. However, there is mention of a "reset" ...
- 1
1
vote
1
answer
81
views
How to use a store initial value in a template Vue 3
I haven't worked with Vue for a while and now I am struggling with something that seems simple.
I have a store where I plan to keep a state for the whole app. Currently I only have one boolean ...
- 7,290
1
vote
1
answer
137
views
Computed property lack of reactivity for deep nested object
EDIT01: I'm using "nuxt": "^2.16.0" with "@nuxtjs/composition-api": "^0.29.2".
I'm have been trying for days to figure this out but still dealing with this ...
- 208
1
vote
1
answer
52
views
How to use regEx in Vue3 CompositionAPI whth Vuelidate?
How to check a form for a regex rule by using Vuelidate. It is clear from the guide that you need to use "helpers", however, when checking for the validity of a regular expression, Vuelidate ...
0
votes
1
answer
207
views
How do I make my ApexCharts reactive with data in Pinia Store using Vue.js 3 and composition API?
I am building a dashboard using Vue.js 3 and ApexCharts with the composition API. The data for the charts is held in a Pinia data store.
I have a function that pulls data from a sample .json file (...
- 15
0
votes
0
answers
31
views
How to recover a file downloaded from a child component?
In my child component, I have an input file field that I need to retrieve from the parent component, to submit all the form data.
Unfortunately, I can't retrieve the data from my input file.
Can you ...
0
votes
1
answer
131
views
Is there a way to pass slots and emits as fallthrough attributes in vue?
With react i was able to do smth like this:
const Component = (props: BaseComponentProps) => <BaseComponent {...props} className={`my-class ${props.className}`} />
a simple way to modify ...
- 75
1
vote
1
answer
48
views
vuejs unexpected content behavior when changing array of child components with slots
I want to make a custom carousel which displays multiple slides at once and moves by one slide on a button press. In the main view this is how it is defined:
<MultiItemCarouselComponent>
<...
- 2,990
1
vote
1
answer
122
views
Programmatically calculate element height in vuejs 3
I have made myself a nice CarouselComponent based on bootstraps carousel, which can take children as slots and automatically creates slides for each of the children:
App.vue:
<CarouselComponent ...
- 2,990
1
vote
0
answers
420
views
Vue 3.5 + TypeScriptt is possibly null error on useTemplateRef
I'm getting "value is possibly null" flags in VS Code with TypeScript in my when I use useTemplateRef.
Of this kind: audioPlayer.value.pause() is possibly null
Only if I add the non null ...
0
votes
0
answers
29
views
Data Fetching with suspense and route params in Vue3 Composition Api
this is children component
<script setup>
import { computed, ref, watch, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import dataSource from '../../data.json'
import ...
0
votes
0
answers
53
views
give tab focus() on a component when rendering in vue
I have button icon which is a separate component. I need to give the tab focus on this element after page is rendered. I am using Composition API in Vue 3. I tried adding ref to this component but it ...
- 21
1
vote
2
answers
72
views
How can I render components dynamically with Vue 3?
I have a process which have many steps. Each one is implemented in a different component.
Initially I had this code:
<template>
<template v-if="process.currentStep === 0">
&...
- 6,020
1
vote
1
answer
98
views
What is 'effect' on Vue computed properties
If I inspect a computed property in Vue 2.7, I can see that, besides the well-known .value property, there's also .effect. I wasn't able to find any information about it, except that it's deprecated ...
- 101
0
votes
3
answers
78
views
Vue 3 rerun compute when element added to array
I have an object of documents that I manage by id within my composable, while to the outside revealing a computed (derived, readonly) state:
const state = reactive({})
export const useDocs = () => ...
- 8,471
0
votes
0
answers
68
views
Prohibit attributes for components in Vue Composition API
Allowance of any attributes for components creates problems for me.
Playground
For example taking this:
<script setup lang="ts">
import { ref } from 'vue';
import Checkbox from './...
- 26.1k
0
votes
1
answer
65
views
Vue 3 get delta object of reactive updates
Consider a reactive object (or array) that is dynamically populated with data:
import { reactive, computed } from 'vue'
const entries = reactive({}) // global state beyond Template level
const docs = ...
- 8,471
0
votes
1
answer
213
views
Vitest not registering that spy has been run
Here is my view component:
<template>
<begin-adult-app-form
:form-status="formStatus"
:form-submitted="formSubmitted"
v-on:form-valid=&...
- 47
0
votes
1
answer
119
views
Prop is undefined in child component ref()
I've been using Vue for about 7 years now but am new to the Vue 3 Composition API.
I am having an issue with a prop value being undefined when trying to access it in a ref object.
Parent component:
&...
- 1,616
0
votes
2
answers
363
views
Dynamically removing items from refs in Vue.js 3
I'm trying to toggle references on and off in Vue. This is how I'd like to do it (or something similar) by having a conditional :ref="option.selected? 'foobar': null" on the items:
<...
- 4,384
0
votes
1
answer
327
views
Nuxt app, page doesn't load data when navigating, but does when refreshing page
I'm using some third party api's and try to display data on a page. I use Nuxt (3.13) for this.
Nuxt documentation seems quite straighforward, but I can not get this to work properly.
I'm using ...
- 93
1
vote
1
answer
23
views
Check when data loaded using several composable files
i have several composable file like:
File one:
export const useLoadUserData = () => {
const loadData = async () => {
// some staff
}
onMounted(async () => loadData())
}
File two:
...
- 385
0
votes
1
answer
159
views
In vue-konva what is the type of proxy that has getNode() function
I'm writing application in Vue 3's Composition API with TypeScript.
In my view I want to get new position of dragged v-group. To do that I need to get reference to the v-group and unwrap it from vue-...
- 21
0
votes
0
answers
141
views
How to deal with <script-setup> component imports and eslint rules like no-unused-vars
When using Vue
composition API with <script setup>, components are just imported like
import Component from '@/components/Component.vue';
How do I keep eslint from applying the no-unused-var ...
- 27
0
votes
0
answers
59
views
Fallback an exposed in Vue Composition API?
I have a table component with an exposed:
const self = {
dispatchKeys: (e: KeyboardEvent) => (onInputKeydown(e), self),
assign, assignRow, selectCell,
selection,
columns,
get ...
- 26.1k
1
vote
2
answers
579
views
How can I make Axios globally available in a Vue 3 application using the Composition API with TypeScript?
I've tried using provide/inject:
plugins/axios.ts:
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { App } from 'vue'
export default {
install: (app: App, baseUrl:...
- 16.7k
1
vote
0
answers
822
views
Vue component error handling with onErrorCaptured
We have specific components that have to be handled specially in regard to error logging. We are using Sentry and need to apply specific tags to possible errors when they are thrown in a specific ...
- 831
1
vote
1
answer
1k
views
Route parameter typing error with TypeScript and unplugin-vue-router
I'm learning Vue 3 with the Composition API using TypeScript. One of the tutorials I'm doing suggests using unplugin-vue-router to autogenerate routes based on file naming/path conventions. The plugin ...
- 16.7k
1
vote
2
answers
64
views
Vue3 event listeners cannot set properties of undefined
I've recently started using Vue3 after a couple year gap and have opted for the Composition API.
The issue I have is with the 2 event listeners in the onMounted function.
This is what I get for the ...
- 3,126
4
votes
2
answers
204
views
Vue component not updating ref while using Pinia
Omitted import statements for the sake of being concise
inputData.ts
export const useInputDataStore = defineStore("inputData", {
state: () => {
return {
...
- 220
1
vote
2
answers
83
views
Get property types in Vue Composition API [duplicate]
When importing a component is it possible to get its properties type?
For example:
import MyComponent from '.my-component.vue';
const props: ComponentProps<MyComponent> = {
};
Any idea how to ...
- 26.1k
0
votes
1
answer
42
views
Infer type of callback argument into one of the returned function
I have composable function like this:
export function useAppModal(beforeOpen?: <???>) => void) {
const modal = ref()
// calling open with any arguments will be passed to beforeOpen ...
- 3,509
0
votes
1
answer
448
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 ...
- 263