Category "vuejs3"

v-slot attribute recieving an object as value

So, before anything else, I know that the v-slot attribute receives an object as value, but written like this: v-slot="slotProps" But I stumbled over this piec

Vite outDir outside of the project root

I am building Vue3 project with Vite and I am using Vite build.outDir option to build the project outside of the Vue3 app root. This is my project structure, wh

Pinia: $reset alternative when using setup syntax

I have a pinia store created with setup syntax like: defineStore('id', () => { const counter = ref(0) return { counter } }) Everything has been worki

How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project

I'm working on VueJS 3 inside Laravel project and I'm using a JS file which providing me with elements that I use for markdown toolbar. Basically it's a set of

Vue3 v-for Maximum recursive updates exceeded in component <Carousel>

New to Vue and JS. I have a vue page myLists which takes an array of lists (containing media IDs for a title) which I used to make axios API calls and build a c

How to use class style components in nuxt.js?

I setup a nuxt3 project. and I want to use class style components but when I am installing vue-property-decorator, I am getting below error. Can anyone have ide

Other ways of showing prop-based conditonal text in Vue?

I have a component that renders text based on the users membership status and I want to change the interpolated text based on that prop value. Is there a more e

Is there any way to add ui-element, ElMessageBox confirm button click event?

When I delete a data from the table, I want it to pop up a warning in the middle of the screen first.Delete function is ready,i just want to add confirm button

Vue.js 3: Store videos offline in a Vue PWA

I am using Vue 3 with Typescript. I am trying to show a video in the PWA. It works online great but when i try it offline the video is not loading. I store the

Vue dynamically added :ref in v-for are not shown in this.$refs

I'm new to vue.js, and I have a vue.js component that basically shows numbers from a data array when the button "Add elements" is clicked, the code is the follo

How to mock a quasar component

This is my code for a quasar component that I want to mock emits: [ "buyer-protection", ...useDialogPluginComponent.emits ] But I get the following error: Type

Quill Editor won't display v-model in input field (Vue 3)

I want to display some html, fetched from a database inside of quill editor. The html seems to be fine (displayed in <p> paragraph) and is bound to quill

How do I instrument `.vue` files using the istanbul/nyc command line

Ultimately, I am trying to instrument my Vue 3 app so that I can get code coverage that includes my .js and .vue files using the below command: nyc instrument -

VueJS - create readonly copy of a ref object (Composition API)

I am getting data from db by onMounted hook and showing object in a form. When user clicks to save, I just want to check if object data has changed or not. onMo

How to Target Object in Object in v-for

I have a list that displays all the songs in all of the artists. I am able to do this by having v-for in a v-for. However, i need the list to show a-z, I am abl

vitest test await async completion of onMounted callback in vue3 component

I'm playing around with Vitest and want to wait for the completion of a couple mocked fetches in the onMounted lifecycle hook in my component: My test: import {

VUE3 dataLabels stacked column apex chart

I want show only top total datalabels but is dublicate label dataLabels: { enabled: true, offsetY: -20, style: { fontSize: "12px", colo

PrimeVue3 MenuBar Customization

I'm using the PrimeVue MenuBar component for the Header/NavBar. I wanted to show some text in b/w the menu items. I was just able to add the text, but I need to

How to write a global store plugin?

I'm trying to make a reactive $store object globally available via plugin but am failing to make it work. store.ts: import {reactive} from "vue"; export defaul

How to make a reactive copy from props with Vue3/TypeScript?

How can I take a value (in this case, an object) outside of the props it was provided in and place it into a reactive variable without affecting the original pr