Category "vuejs3"

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

Is it possible to serve a folder other than src using Vue CLI?

The reason I ask is that I am trying to serve my nyc instrumented folder when running my tests to gain code coverage. I've been referencing Vue's documentation

When Importing Self Made Vue 3 Library Into Vue 3 Project: "Uncaught TypeError: Cannot read properties of null (reading 'isCE')"

I created a custom component library using Vue 3, and after installing it locally thru yarn and registering the components, I kept getting the following error i

vue-chartjs not able to update the chart

I'm trying to understand how can I render a chart dynamically so after I can adapt it so can I send data to it trough MQTT so I can display data in real time. T

Vue3 defineprops usage with v-model in child compoent

As I understand you can not change the props value directly in the child component. But I find out that this will work, I want to know the reason behind it. For

How to register store as global variable object?

Currently I'm using a reactive store.js like so: import {reactive} from "vue"; const re = reactive({}) export default { re } which then can be used in co