132 questions
1
vote
0
answers
142
views
"ReferenceError:Vue is not defined" occurs when writing vitest tests for a Vue component with vue-class-component
I have a component OverviewMapView.vue written in Vue 3 with a Map component from MapBox and the component is defined with vue-class-component.
I want to write unit tests for it but at this point ...
- 11
1
vote
0
answers
386
views
Are Vue 3 facing decorator properties reactive?
this is my sample vue code
<script lang="ts">
import { Component, Vue, toNative,Prop,Inject,Watch,Provide } from 'vue-facing-decorator'
@Component
class Demo extends Vue {
title=&...
- 1,229
0
votes
1
answer
453
views
How to use vue-i18n in Class Style Component(vue3)
I'm trying to migrate vue2 to vue3 which is "Class Style Component".
It is using vue-i18n. Can I use vue-i18n in Vue3?
package.json
"dependencies": {
"vue": "^...
- 25
0
votes
0
answers
221
views
Not able to register Lit component in Vue 2 class components
I have created a Lit component in typescript. It is being exported as a named export. I am not able to register it in Vue 2 class component. Here are the issues I am facing:
Issue 1:
import { ...
- 11
0
votes
1
answer
2k
views
how to fix this issue / TS2740: Type '{}' is missing the following properties from type 'Readonly ':
what are the solution that screenshot , how to do it
I want to know how to add component to App.tsx file
what are the solution that screenshot , how to do it
I want to know how to add component to ...
1
vote
0
answers
92
views
vue-chartjs vue-class-component chartOptions not working
I am busy migrating to [email protected] from [email protected] and found that during the upgrade for some reason vue-chartjs chartOptions is not working.
I defined my lineChart like this in html:
<line-chart v-if=&...
- 51
0
votes
1
answer
2k
views
Vue 3 + Class Components + Typescript: How to append html element to class component on click
Precondition: Vue3 + typescript + vue-class-component
Im trying to append a dynamic created div to a div element inside of the template tag on focusin on an input template Element.
I tried two ways to ...
- 75
2
votes
0
answers
77
views
Vue class components dynamically add component depending on answer from backend
So from the backend I get a array of objects that look kind of like this
ItemsToAdd
{
Page: MemberPage
Feature: Search
Text: "Something to explain said feature"
}
So i match these ...
- 911
3
votes
0
answers
374
views
TypeError: SomeClass_vue_1.default is not a constructor in Jest test
I need to test Line class. But I see only this error TypeError: Line_vue_1.default is not a constructor in Jest test.
If I test class that extends only Vue - it works fine.
But if it extends ...
- 31
1
vote
1
answer
1k
views
Mixing Vue Composables with Class Based Components
I'm attempting to mix composables into a class based component setup, as part of a slow migration from Vue 2 to Vue 3. However, I am struggling to referenced return values from the setup function ...
- 4,260
2
votes
1
answer
897
views
Vue (volar in vs-code) does not recognizes filters
I just created a simple test component like this:
<template>
<div>{{ value | currency }}</div>
</template>
<script lang="ts">
import { ...
- 16.4k
0
votes
1
answer
998
views
Property 'method' does not exist on type 'Vue'.Vetur(2339) when trying to access parent method from child component (with class-based vue components)
I am using class-based vue components and am trying to access a parent's (of a parent's) method within a child component for various reasons. The syntax is as follows for the definition of my class-...
- 2,613
0
votes
1
answer
792
views
Vue.js: reactive not working on class service instance
I have a logical component that doesn't have a template, but only stores the active/not active state.
So. It works, but without ID.
I use the id when necessary to make the block's state consistent ...
- 93
0
votes
1
answer
463
views
vue.js - class component - Update view when RxJs Observable change data
Disclaimer: I'm a beginner in using Vue.js, and being used to Angular I went the Class Component way. I know that not the proper Vue.js way, but this is a fun pet project, so I elected to do it in a ...
- 831
0
votes
1
answer
655
views
vue class component props: Expected indentation of 8 spaces but found 4 indent
I have vue class component like this
export default class MyText extends Vue {
@Prop({ type: String, default: 'id-rt' })
id!: string; // ERROR: Expected indentation of 8 spaces but found 4 ...
- 42.8k
0
votes
0
answers
516
views
Toggling A boolean property in Vuejs is Not working
I have a Vue component that has Container that I use v-if to control its visibility.
I set isModalOpen to false ant first but When I create a function to toggle the property to true but it seems it's ...
- 172
0
votes
1
answer
305
views
Passing the default value of props to data in @Component
Having the code, I am getting State: undefined and clicking the toggle button does nothing.
How to get the default value from @Prop to some data correctly using @Component?
<script lang="ts&...
- 42.8k
0
votes
4
answers
3k
views
Vue.js with TypeScript - getting the type of the ref child component
My parent component has a child component called with reference passed to it:
<child
ref="childRef"
/>
Now from the parent component I want to run the function which is inside child ...
- 1,198
0
votes
1
answer
1k
views
Vue return undefined during emit event
I read a code, where it allows user to download attachment
<template #link="{ item, rowdata }">
<attachment-link
v-test-id="'attachment-link'"
:inventory-...
- 4,774
1
vote
1
answer
547
views
My Vue3 Class Component Typescript application gets slower to compile/build when I import bootstrap
I realized that my application was much slower to build with vue-cli (either a build production or a simple dev server).
I import bootstrap this way in a SCSS file that re-writes some rules that is ...
- 21
1
vote
1
answer
1k
views
How does vite2 use cdn to load packages such as vue
The production environment reports an error, but the development environment is normal.
error:
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start ...
- 11
0
votes
0
answers
522
views
How to use vuex mutation in Nuxt
I am not able to use this mutation to change the state of a value in Vuex
pages/example.vue
<template>
<div class="pa-md-10 mx-md-10">
<v-row>
<div>
...
- 311
0
votes
1
answer
427
views
Vue and vue-property-decorator. TS error in beforeRouteUpdate hook
I'm writing application using Vue 2/typescript and vue-property-decorator. In my component I use beforeRouteEnter/beforeRouteUpdate hooks. My component has method findProjects, and I want to invoke ...
- 316
1
vote
1
answer
426
views
How to access Getters in Nuxt using vuex-class
I am building an application using Nuxt. I am playing with vuex for the first time. I have followed a bunch of tutorials to get this set up, but I am running into issues accessing the store and I am ...
- 311
2
votes
0
answers
2k
views
Vuelidate with Vue 3 & vue-class-component & TypeScript
I'm trying out Vulidate with Vue 3, but I can't get it to fit into my typical pattern using the vue-class-component & Typescript syntax. I see this similar question, but I expect there have been ...
- 440
0
votes
1
answer
919
views
This expression is not callable for vue 2 with composition api and class component
I am trying to use the composition api plugin on a vue2 project + class components + typescript. The composition itself works fine, but the does not seem to be working.
composition api: https://...
- 3,232
1
vote
1
answer
1k
views
Into what we need to convert the TypeScript class using decorators to get the valid Vue component?
If I asked "How vue-class-component works", most likely this question has been marked as too wide. By the way, I checked it's source code, but did not understood how it works, so I need to ...
- 1,015
1
vote
1
answer
1k
views
How to define $refs and $root type in Vuejs with typescript?
I am using Vue3(class type components) with typescript. Please find below code
export default class MyClassextends Vue {
$refs!: {
locationSearch: any;
};
$root!: {
$on: any;
};
}
...
1
vote
1
answer
4k
views
Failed to resolve component in same folder Vue 3
I am using Vue 3 with class based components and Typescript. If I try to use a component inside another component I get this error:
[Vue warn]: Failed to resolve component: Button
If this is a native ...
- 806
3
votes
2
answers
6k
views
Why my vue3 could not work with vue-class-component
<script>
import * as Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
//my operation
}
</script>
It's a simple ...
- 33
0
votes
0
answers
882
views
Vue 3 (Typescript + Class Components + Composition API): How do define Props in the Setup method
When using the Composition API with Class Components in Vue 3 and when using Typescript, how can properties be defined in the setup method? For example:
export default class Test extends Vue {
...
- 5,282
2
votes
1
answer
469
views
Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3
I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3-migration.vuejs.org/breaking-changes/introduction.html#overview. I have ...
- 23
3
votes
1
answer
1k
views
What is the difference between extends and mixins when using the vue-class-component library?
Heads-up: We are using Vue 2 and are not planning to switch to the Composition API (yet). This question is about vue-class-components.
Question: The documentation of vue-class-components states that ...
- 12.8k
1
vote
2
answers
1k
views
Is it possible to use Vue 3 with the composition API and vue class components?
We've built a project for the last 8 months using vue 3 and and the class components, but as it seems like it's no longer maintained, we'd like to gradually switch to the composition API, and more ...
- 160
0
votes
1
answer
733
views
How to register Additional Hooks in a NuxtJs project with Vue Class Component
I am building my first NuxtJs project and I am also using Vue Class Component to write my components as classes.
I am facing trouble in accessing the beforeRouteEnter component hook after applying Vue ...
- 471
1
vote
1
answer
3k
views
Webpack can not resolve "vue-property-decorator" (v10.X) library while it has been installed
I got the error Module not found: Error: Can't resolve './decorators/Emit' when tried to import some functionality from the library vue-property-decorator... Well, I did not ask this question if the ...
- 1,015
1
vote
1
answer
74
views
TypeScript: mix in plain object into class
Basically I'm trying to create a function that dynamically defines class that extends another class from passed object. Something like this:
const ObjectMixin = function<T>(obj: T): new () => ...
- 283
2
votes
2
answers
204
views
How to use dynamic component in vue-class-component
I use vue vue-class-component and it works fine:
import vuetify from '@/plugins/vuetify'
@Component({
components: {
vue2Dropzone
},
vuetify
})
But when I try to add new component ...
- 1,492
0
votes
0
answers
585
views
Vue unnecessarily re-renders entire all children components at every small change
I have an issue within a complex project: Somehow, Vue re-renders all children at every change
We use vue 2.5.17 with typescrip, class components and decorators.
I created a new, clean component ...
0
votes
1
answer
2k
views
Casting a component with vue typescript - accessing child methods
I am trying to access a child component method. Usually this is fine
this.$refs.searchInput.reset()
To keep typescript happy this is required.
(this.$refs.searchInput as HTMLFormElement).reset()
I ...
- 1,043
6
votes
4
answers
4k
views
(How) Should I use access modifiers (public, private etc.) in Vue.js components (TypeScript)?
I have a Vue.js v2.6 project with TypeScript v.4.3 "under the hood".
My problem: I cannot find any documentation that clears up, if it makes sense to use access modifiers in Vue components ...
- 2,472
0
votes
1
answer
797
views
How to use vue-class-component
<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '/@/hooks/web/useScript';
const BAI_DU_MAP_URL = 'https://api.map....
- 33
2
votes
1
answer
1k
views
How to set up PayPal Smart Buttons with Vue.js class components
I'm trying to add PayPal buttons to an existing checkout page. However, I've had quite a bit of trouble because our project uses Vue.js class components, while examples that I've come across don't (...
- 155
0
votes
1
answer
1k
views
Vue Class Component: How to custom options
Currently I use Vue 2 with Typescript, but I can't add options to the component
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld ...
0
votes
2
answers
1k
views
pass data from child component to parent component without any click in vue
I have a parent component ChangeInfo, inside it is a child component ShowWorkInfo. Inside the ShowWorkInfo component, I have several input forms to update the job information. I created a variable ...
- 39
6
votes
1
answer
16k
views
Vue 3 using v-model as props instead of :prop and @emit
So I've read this article a couple of times and as I understand, I can use v-model, instead of props, to pass values from a parent to a child component and automatically emit event when prop's value ...
- 917
0
votes
1
answer
223
views
Array of parse objects is not reactive in (Nativescript) Vue
I seem to break the reactivity of my objects, and the v-if's don't work. My array is an array of Parse Objects, which require me to use .get() to get the values, which is working on initial load on ...
- 342
0
votes
1
answer
1k
views
Vue2 class based data property is not reactive
I was using typescript in a vue2 class based components. sampleData prop is not reactive in a component while using a custom type KeyValuePair.
export type KeyValuePair<T> = {
[key in string | ...
0
votes
1
answer
462
views
How to do annotating correctly in Vue2.x Class component with TypeScript
I've adopted my project with @vue/composition-api
// main.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
But when setting setup() in a Class ...
- 33
0
votes
0
answers
356
views
How can I use the "ngx-doc-viewer" package in the vue 2 class style with typescript project?
i want to use "ngx-doc-viewer" package in vue project. But i can not understand how to use this in vue 2 class style with typescirpt project .
Here is the link
ngx-package
i am thinking ...
- 121