Questions tagged [vue-component]

Component is a powerful Vue feature that allows extending basic HTML elements to encapsulate reusable code.

Filter by
Sorted by
Tagged with
0 votes
0 answers
14 views

Vue-Router infinite loop with redirect route stuck

I'm trying to check authentication with in the route before loading. When I reach a route that needs to be authenticated, the checkRolePermission call gets stuck in an infinite loop and give error ...
Pradeep Kumar's user avatar
0 votes
0 answers
16 views

Typing Vue3 Dynamic Components

I can't stop my TS linter to complains about my dynamic component import CompONe from '../compONe.vue'; import CompTwo from '../compTwo .vue'; const dynamicComponent: any = computed(() => { ...
asiera's user avatar
  • 544
0 votes
0 answers
17 views

Convert between Gregorian and Hijri dates in Vue3 Component

I wrote a vue.js code component that shows two fields for the Hijri and Gregorian dates. When the user chooses the Gregorian date, the Gregorian to Hijri conversion function converts the value and ...
Programmer's user avatar
0 votes
1 answer
23 views

How to short-circuit component creation and redirect in Vue3?

In a dashboard layout, I'm rendering different components based on which menu the user navigates to. I have a parent component that contains a <render-view> inside a <Suspense>. What ...
victor's user avatar
  • 1,542
1 vote
1 answer
65 views

How to use data from one component in another component vuejs

I'm new to vue and I'm trying to use an array from one component to another but I cannot find how to do it. In component 1 I have this data that I want to transfer and use in component 2. const ...
Tibo Mertens's user avatar
0 votes
0 answers
21 views

Cannot call trigger on an empty DOMWrapper

I am upgrading a Vue 2 component library to Vue 3. I have upgraded all the packages in the project, and made some necessary changes to get the code to compile. The components work as expected in a ...
Mike C's user avatar
  • 3,077
0 votes
0 answers
23 views

Pagination with Nuxt UI

I'm trying to implement the pagination component from Nuxt UI, but I am unable to make it work.. I tried to read the docs and youtube, but nothing to be found. I don't understand how to bind my data ...
milonovich's user avatar
0 votes
1 answer
35 views

How to pass an attribute value from a parent scope template to a nested child in Vue3?

I'm trying to specify the class for an instance of a nested child class, but cant seem to pass the value to the child correctly. I've tried binding the $attrs, but no dice; was thinking that these ...
qodeninja's user avatar
  • 11k
2 votes
1 answer
61 views

Pass props after adding Vuetify to a Vue web component

I'm developing a web component in vue. A lot of it has been made using vuetify component library and I'm currently in process of trying to export to to a web component. I've followed the steps ...
orb-livan's user avatar
0 votes
1 answer
45 views

Is there a good way to remove the "next" and "prev" links from Laravel Paginate API, other than removing it in the frontend?

My response looks like this: "links": { "first": "http:\/\/localhost:8000\/api\/tasks?page=1", "last": "http:\/\/localhost:8000\/api\/tasks?page=...
ADHDisDEV's user avatar
  • 436
0 votes
0 answers
13 views

How to prevent test and storybook files included in the build?

I am creating a Vue 3 components library that uses 'unbuild' (which is based on rollup). build.config.js looks like: import { defineBuildConfig } from 'unbuild' export default defineBuildConfig({ ...
Shahid Shaikh's user avatar
1 vote
0 answers
61 views

Vue 3 CDN : can't include third party component library also from a CDN

I published a Vue 3 components library (using Vite), which works fine when imported as a package in a Vue application. However some conflicts appear when both Vue and the library are included via CDN. ...
alec_lloyd_probert's user avatar
0 votes
1 answer
25 views

how to get app instance for register component or plugin globally in vuejs

i have a two layout admin and user I want to register some specific component to register to admin layout how can I register components from adminlayout.vue
Akash's user avatar
  • 1
0 votes
2 answers
48 views

Typescript Error Property does not exist on type (TS2339, TS2365)

I have file HorizontalBarChartObeya.vue and below is the source code <template> <Bar :chart-options="chartOptions" :chart-data="chartData" :chart-id="...
wa1's user avatar
  • 27
0 votes
2 answers
62 views

vue3 - dynamic ref in computed status // repeating a player n times in a table and having a play/pause button

on the vue3 page below I have integrated a player that shows a "play" icon when the player is stopped, and a "pause" icon when it's playing. What I am now trying to do is to let ...
Benjamin's user avatar
1 vote
1 answer
27 views

How do I pass a prop as an argument in Vue.js

I am new to Vue and I am making a component that changes it's class property based on the style prop given by the parent component. When I try to invoke a substitution Vue does nothing Here is "...
Player_X_YT's user avatar
0 votes
2 answers
80 views

how to trigger a watcher even when assigned to the same newVal

i am using vue3 with options api as shown in the following stackbiltz link here i have a child-component that contains a button that when clicked, the method refresh should be invoked. the refresh() ...
Amrmsmb's user avatar
  • 10.8k
0 votes
1 answer
21 views

vue3: Optionally turning RouterLink into a link

I checked the docs but before opening a vue feature request I'd like to be sure if it's implemented already. I'd like 'My link text' to optionally become a link without having to duplicate the content ...
asiera's user avatar
  • 544
0 votes
1 answer
35 views

Vue 3 + Naive UI with importmap

Using Vue 3 without build. Trying to import naive-ui with importmap but got syntax error <script type="importmap"> { "imports": { &...
Hansen Chandrawinata's user avatar
0 votes
1 answer
58 views

Removing value from dropdown when adding a new value in vue application

I am trying to create date filter in my vue project. so for this, the view is: <div class="dropdown-item d-flex flex-column"> <div ...
Yellow rain coat's user avatar
0 votes
0 answers
16 views

VueCLI: v-text-field doesn't update value when v-date-picker changes

I have a component where you can specify the input type, and it will automatically create the correct input. It will work with a computed property that returns an array with the fields you want. One ...
user avatar
1 vote
2 answers
20 views

Update model when part of array vue3

How do I update an array when the model is in a loop for that array: eg I have an array const numbers = ref([1,2,3]); and I have a component that loops through the array using the values as the model: ...
Pete's user avatar
  • 57.3k
1 vote
1 answer
39 views

Vuejs 3 how to get component instance properties programmatically

I have function which is written in vue 2 and I need to modifiy for vue 3. there is component named Modal which is a confirmation box with lots of props and option. in codebase it call showPrompt ...
umut can topal's user avatar
1 vote
1 answer
29 views

Vue3.js why doesn't my passing of a prop work (or raise an error)?

I have a component (a <select> menu) which I need to render more than once. I set it up to receive a prop to determine which of its options is selected in each case (the first menu should have ...
AmbroseChapel's user avatar
1 vote
1 answer
98 views

Exporting a function from Vue's "<script setup>" like from a module

I would like to export a function from a component from within the "" section and use it in another component. I tried it like this: <!-- TestHeading.vue --> <template> <h1&...
betterworld's user avatar
0 votes
0 answers
24 views

How can I pass form data from a nested component to a outer component using Vue2 and Nuxt2

I am fairly new to view and learning as I go. I am trying to get data from a form that is built in different components. The flow is outer component calls inner component calls nested component. I ...
user22869368's user avatar
0 votes
0 answers
27 views

How to add many v-slide-group-item?

how i can add one more component in v-slide-group? I have one v-for in v-slide-group-item, but in the end i need to put another component, i try to put 2 v-slide-group-item but functional is broken in ...
Pogor Cristian's user avatar
0 votes
1 answer
15 views

Adding data to App's vue file breaks imported component

I'm a beginner in vue and I'm trying to add data to my vue App file, but when I add data() the imported component it doesn't render. I wanted to add links' label and url as an object, but it just ...
Eetu Lehtovirta's user avatar
0 votes
0 answers
34 views

How can I import custom js files of my project inside vuejs 3 component?

I want to import custom js file in vue3 component. Please, Help me out for fixing my the problem. I have try this: <template></template> <script src="filePath/file.js"></...
Md Rezaul Karim Shanto's user avatar
0 votes
1 answer
51 views

How to transfer object via data binding to parent componen - Vue.js

In my Vuejs application I have a select element, where the user can select a country. A country element looks like: country { id: 1, name: 'Germany', sort: 1 } I get a list of these ...
Florian Haberfellner's user avatar
0 votes
0 answers
70 views

Failed to mount app: mount target selector "#app" returned null

I just started to use Vue.js, I'm trying to trigger the muose click when I press the button. The message problem is: Failed to mount app: mount target selector "#app" returned null. This is ...
Mattia's user avatar
  • 3
0 votes
1 answer
103 views

newVal of a watcher does not change

i am using vue3 with options api as shown in the following stackbiltz link here i have input and i want to set the value that to be displayed in the input to, for example, to 4 whenever the user ...
Amrmsmb's user avatar
  • 10.8k
0 votes
0 answers
9 views

Vue JS 3 component toast auto hide

<template> <Transition name="slide-fade"> <div v-show="showToast" class="fixed top-4 right-4 z-50" :class="[classesPosition]"> ...
Joami's user avatar
  • 1
1 vote
1 answer
34 views

Best practices for consuming css in a web component library for multiple themes

We are currently developing a design system to use with multiple projects for 2 separate products. Each product has a corresponding brand styleguide that uses design tokens, i.e: Theme 1 primary: 'red'...
BorisAtLast's user avatar
0 votes
1 answer
26 views

After Publish in Vue js app , i can open the component (.vue) from browser and see all files and app structure , how can i hide those files

for more information : The dist files are chunked, also the js, I want a way to minify the files and no one can open the files (.vue) Note: I meant files not the element of HTML, I mean vue component ...
Hamza abu-othman's user avatar
0 votes
0 answers
39 views

Jest test case stack trace pointing to the wrong line number in the Vue3 project

After upgraded the Vue framework version 2 to 3 I faced an issue with the jest test case where the stack trace line number was showing as wrong and it affects the sonarqube coverage report for vue ...
Prem's user avatar
  • 11
0 votes
1 answer
37 views

Vue doenst update modelValue inside watch

Emitting update:modelValue event inside $watch doesnt update modelValue if I dont pass modelValue by props. How I can make sure modelValue is updated without passing modelValue by props? MyComponent: ...
Qba's user avatar
  • 148
0 votes
0 answers
40 views

Update the value in a component using another component

Inside of my Parent I have 3 Components, NavigationBar (that displays the number of cart items), ViewCart (Side bar that displays the cart item list), and the CartButton (updates the cart items) What ...
AGirlisnoone's user avatar
0 votes
0 answers
16 views

how its different run on localhost and vercel

on vercel it have just $vuetify: (...) how to make it the same because i want some data from this proxy object this project is "vue": "^3.2.13" and the data from this lib "v-...
MYBLUE's user avatar
  • 11
0 votes
0 answers
13 views

How to inspect temporary variables of VueJS component methods in production build?

My VueJS components have to be built as main.js + main.js.map and run from IIS server with Asp.Net Core. From Chrome DevTools' console, I can set breakpoints on any method of Vue components. But when ...
Shangwu's user avatar
  • 1,471
0 votes
1 answer
89 views

Vue 3 equivalent of Vue.extend()

I'm trying to migrate to vue3 piece of next code from vue2: Vue2 to vue3 options api code in callback of other function that used in 3party pure js library const cls = Vue.extend(extendComponent); ...
Alex's user avatar
  • 1
0 votes
0 answers
37 views

npm library does not show content - Vue.js

With Vue.js I'm using the VueGoodTable library to have a table. Let me start by saying this is my first experience with Vue. I created my own component called VueTable.vue and defined it as follows: &...
karlcess's user avatar
-1 votes
1 answer
23 views

Hello, I am trying to work with mounted function in vue.js and it is not working

I am trying to getallproducts automatically when the following url loadsk '/Admin/ProductsAdmin' but the mounted function is not working it doesnot load anything when url has been loaded the follwing ...
prajwal lama's user avatar
0 votes
0 answers
21 views

How can I make element draggable except the button

I am using vue-draggable for my project. It is something similar like this. <draggable v-if="isOpen || (isOpen && isAllOpen)" v-model="...
Yellow rain coat's user avatar
0 votes
0 answers
25 views

How can I make vue-draggable element with button

I want to have a draggable element with a button for my vue 2 application. For this, I am using vue-draggable. So something like that in the picture: So currently, when I click the button (the one ...
Yellow rain coat's user avatar
1 vote
1 answer
71 views

How to sync a dynamic property from a parent component to a child component in Vue 3

I have some products that I want to filter based on their category using checkboxes. To do so, I have a parent component which passes the possible categories (e.g. A, B and C) to the child and keeps ...
Jason's user avatar
  • 37
0 votes
0 answers
14 views

How can I drag element into another one with vue-draggable

I have nested elements that need to be draggable in between. My problem is at the same level there are elements and when I drag one into another one I want them to have a parent-child relationship but ...
Yellow rain coat's user avatar
1 vote
2 answers
60 views

Manage v-model value in a v-select created in a v-for

I have a table of members created by a v-for and some users can manage other members based on their role. I implemanted some check to prevent some role to intervene but the complete list of check is ...
Baptiste Rousseau's user avatar
0 votes
0 answers
21 views

Previous text field shows replaced input when typing in another field

When using @input/@focus/@blur handlers on text field inputs in Buefy, I am able to replace event.target.value temporarily. In my case I'm trying to remove non-digit characters from the text field on ...
Hitari's user avatar
  • 1
0 votes
0 answers
39 views

vuejs Swiper component for vertical swiper with sticky section

i am creating a swiper component in vuejs for my site i want to make the section sticky and after the section is made sticky i want the swiperscroll to enable over the whole section and it show two ...
Galaxy Mail's user avatar

1
2 3 4 5
213