Vue extended types - The specified property (XYZ) is missing from the type

I am currently utilizing Vue Class Component alongside TypeScript and I find the need to enhance the types in order to incorporate a third-party module.

component

export default class TestComponent extends Vue  {

   private created() {
     this.$snotify.success('test')
   }
}

shims.d.ts

import Vue from 'vue'
import { Snotify } from 'vue-snotify'

declare module 'vue/types/vue' {
    interface VueConstructor {
      $snotify: Snotify
    }
  }

"Property $snotify does not exist on type TestComponent"

Although Vue.$snotify exists, it appears that this.$snotify is not recognized even when extending Vue itself.

Can you spot where my mistake lies?

typescriptvue.jsvuejs2vue-component

Answer №1

Consider enhancing the Vue category rather than using VueConstructor:

declare module 'vue/types/vue' {
  interface Vue {
    $notification: Notification
  }
}

Answer №2

The solution provided as the accepted answer does not appear to be functional. Instead, I recommend taking a look at the response from @RomainLanz in reference to a similar issue regarding vue-snotify on GitHub: here:

import Vue from 'vue'
import { SnotifyService } from 'vue-snotify/SnotifyService'

declare module 'vue/types/vue' {
  interface Vue {
    $snotify: SnotifyService
  }
}

I am sharing this information here because when searching for the same problem, this page was one of the results that appeared.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered an issue with Cypress when attempting to utilize a custom command. The error message "TypeError cy.login is not a function" keeps popping up. Any suggestions on how to resolve this

I am currently working on a TypeScript project and I am attempting to write some tests using Cypress. However, I encountered the following error: TypeError - cy.login is not a function. This error occurred during a before each hook, so we are skipping the ...

typescriptcypresscypress-custom-commands

What is the best way to run a scheduled task automatically using node-cron?

I have a custom function that saves data to the database using the POST method. When testing it with Postman, I send an empty POST request to trigger the controller. Upon execution, the function triggers two more functions. One of them is responsible for ...

javascripttypescript

The Updating Issue: Angular 2 Table Fails to Reflect Value Changes

I have initialized a table with user details using the ngOnInit() method. When I click on the "create user" button, it opens a form to add a new user to the database. However, the table does not update automatically with the new user's information. H ...

angulartypescript

A solution for resolving the RuntimeException in genuitec's TypeScript Editor for Eclipse Oxygen

After setting up a fresh Eclipse Oxygen and installing the Angular IDE from Genuitec, I encountered an issue on the second day when I opened a project and accessed a *.ts File. The error message displayed was: java.lang.RuntimeException: java.lang.Illegal ...

eclipseangulartypescripteclipse-plugin

Utilizing an Apollo query that relies on the outcome of a previous query

I’m in the process of constructing an Apollo query within a Vue/Nuxt environment that relies on the outcome of another query. The sessions query requires the presence of person to access this.person.id. How can I make sure that person is available befor ...

vue.jsapollonuxt.js

Comparing the functions of useMemo and the combination of useEffect with useState

Is there a benefit in utilizing the useMemo hook instead of using a combination of useEffect and useState for a complex function call? Here are two custom hooks that seem to function similarly, with the only difference being that useMemo initially returns ...

javascriptreactjstypescriptreact-hooks

Inspecting an unspecified generic parameter for absence yields T & ({} | null)

Recently, I came across a perplexing issue while responding to this specific inquiry. It pertains to a scenario where a generic function's parameter is optional and its type involves the use of generics. Consider the following function structure: func ...

typescript

Issue with passing a prop in Vue 3

I'm attempting to send a simple prop to another component in Vue 3.0.11, but for some reason, I can't seem to make it work. Here's the code snippet from my App component: <template> <Loading :message="Importing"></ ...

vue.jsvuejs3propvue-props

Encountering the Vue.js TypeScript error "Property '[RefSymbol]' is not found in type" occurs when implementing a Floating UI

Our implementation involves using floating UI along with Vue and Typescript. import { ref } from 'vue'; import { ReferenceElement, useFloating } from '@floating-ui/vue'; const reference = ref<ReferenceElement>(); const floating = ...

typescriptvue.jsfloating-ui

Error Encountered - Parsing Failure in SPFX React Extension for botframework-webchat

Check out the following Screenshot of Error As I develop my SPFX Extension and use Chatbot Farework, I encounter the error depicted in the image above. The error message indicates that a loader is required to handle this file type. Currently, no loaders ...

reactjstypescriptchatbotsharepoint-onlinespfx-extension

What is the most effective method for sharing a form across various components in Angular 5?

I have a primary form within a service named "MainService" (the actual form is much lengthier). Here is an overview- export class MainService { this.mainForm = this.formBuilder.group({ A: ['', Validators.required], B: & ...

javascriptangularperformancetypescriptangular-reactive-forms

"Ionic 3: Utilizing the If Statement within the subscribe() Function for Increased Results

I added an if conditional in my subscribe() function where I used return; to break if it meets the condition. However, instead of breaking the entire big function, it only breaks the subscribe() function and continues to execute the navCtrl.push line. How ...

javascripttypescriptionic-frameworkionic3

Encountered an error while trying to generate the Component class for the ColorlibStepIcon from Material UI in TypeScript

I am trying to convert the ColorlibStepIcon functional component into a class component for my Stepper. Unfortunately, I have not been successful and keep encountering errors. I have attempted some changes but it is still not working as expected. You can ...

reactjstypescriptmaterial-ui

Tips for including extra space before or after '{' and '}' in WebStorm?

While I have some experience with JetBrains products and setting styles for my files, I am struggling to configure my .tsx file to display the desired style. It appears that changes made in the TypeScript section are not affecting my .tsx file. In the ima ...

typescriptreact-nativewebstormtsx

Pixi3D attempting to cast ray onto a plane

Having trouble with raycasting in the pixi3D library and finding the documentation lacking. I'm attempting to make a 3D object track the mouse coordinates on a 3D plane in space. https://i.sstatic.net/DiTzY.jpg The goal is for the black box to foll ...

javascripttypescriptraycastingpixi.jsplane

Vuex: Error - Namespaced action "is not a function"

After importing a Vuex module, everything is working smoothly without any issues. However, as soon as I try to namespace it, an error message pops up saying that the action is "not a function" when it is called. This is how it looks like in index.js: imp ...

javascriptvue.jsvuex

Lazy-loaded modules in Angular that contain services provided within the module

Currently, I am facing a challenge with lazy-loaded modules and services that are provided in these modules. My folder structure looks like this: app -> featureModule1 (lazy loaded) -> featureModule2 (lazy loaded) -->services --->servi ...

angulartypescriptdependency-injection

I am facing an issue with updating the mat-table after pushing values to a

I have a uniqueFormGroup with UniqueFormArray and a special-table that displays the array. When I add new uniqueFormGroup to UniqueFormArray, the special-table doesn't add new row. I was attempting to implement trackBy, but I am unsure of where (and ...

angulartypescriptangular-materialangular7angular-forms

Navigating Assertions within Functional Code

When working with functional programming, I often encounter situations where my knowledge exceeds the type system of the language. Take for example this TypeScript scenario where I parse a UUID and display its embedded fields to the user. The program ini ...

typescriptfunctional-programmingassertfp-ts

Is there a way to verify an if-else statement in the ngStyle background property with Angular 7?

I have a collection of cards that need to be shown in a component. Each card contains a cover-image with an URL fetched from the server. In my component.html, I am using ngFor as follows: <div [style.background-image]="'url('+row.companyId?.c ...

angulartypescriptng-style