Questions tagged [vue-component]
Component is a powerful Vue feature that allows extending basic HTML elements to encapsulate reusable code.
10,604
questions
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 ...
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(() => {
...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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=...
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({
...
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.
...
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
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="...
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 ...
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 "...
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() ...
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 ...
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": {
&...
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
...
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 ...
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:
...
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 ...
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 ...
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&...
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 ...
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 ...
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 ...
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"></...
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 ...
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 ...
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 ...
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]">
...
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'...
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 ...
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 ...
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:
...
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 ...
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-...
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 ...
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);
...
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:
&...
-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 ...
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="...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...