Is there a specific type required for the Vue `install` function? Is it necessary to have the `directive` property on the `Vue`

I've been working on implementing a Vue directive in typescript, but I'm struggling to determine the correct types to use for the Vue install function.

Using install(Vue: any): void feels a bit strange to me.

I attempted importing Vue and using install(Vue: Vue), but it resulted in an error stating that there is no .directive property on Vue, which is confusing.

What should be the proper typing for the install function? Should the Vue type work in this scenario? Am I missing something, or is there something lacking from the Vue object?

import { DirectiveOptions } from "vue"


const directive: DirectiveOptions = {
  bind(elem, bind, vn) {
    console.log('bound')
  }
};

export default {
  install(Vue: any): void { // what types should be used here?
    Vue.directive("do-stuff", directive);
  }
};

Answer №1

To achieve your desired outcome, utilize the VueConstructor type. Below is an example of how a Typescript Vue plugin should be developed:

import { VueConstructor, PluginObject, DirectiveOptions } from "vue"

const directive: DirectiveOptions = {
  bind(elem, bind, vn) {
    console.log('bound')
  }
}

const plugin: PluginObject<any> = {
  install (Vue: VueConstructor): void {
    Vue.directive("do-stuff", directive)
  }
}

export default plugin

For further reference, visit https://github.com/vuejs/vue/blob/dev/types/vue.d.ts#L80

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

An error has occurred in the Next.js App: createContext function is not defined

While developing a Next.js application, I keep encountering the same error message TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function every time I try to run my app using npm run dev. This issue arises when attempting to co ...

Saving large amounts of data in bulk to PostgreSQL using TypeORM

I am looking to perform a bulk insert/update using TypeORM The Test entity is defined below: export class Test { @PrimaryColumn('integer') id: number; @Column('varchar', { length: 255 }) testName: string; } I have the f ...

Using Angular and Typescript to implement mathematical formulas involving date object subtraction

I need help converting the following Excel formula to Typescript. I keep running into an error that says 'The left-hand and right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type'. Can anyon ...

Leverage and implement a reusable class in Typescript

In a React Typescript project, I am facing a challenge. I want to utilize a base class component and add an additional property to its State. After attempting to modify the class from class ErrorBoundaryW extends PureComponent<any, State> {...} to ...

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...

Tips for building a diverse array of data types and effectively utilizing them based on their specific type in Typescript

Trying to store both custom types, Graphic and Asset, in the same array is proving to be a challenge. The goal is to access them and retain their individual type information. const trail: Array<Graphic | Asset> = []; for (let index = 0; index < t ...

Is there a way to search for multiple items using just one search term?

On my app, there is a search bar that currently only looks up data for one specific attribute. For example, if I type in "Hammer," it only searches for Tool names. Now, I need to expand the search functionality to accommodate different types of strings. F ...

A step-by-step guide on utilizing the v-for index loop to showcase a nested JSON array

My JSON Array has the following structure: items: [ { ID: 11, UserID: "test.com", UserRole: "user", timeStamp: "2021-03-23T15:54:02.125578", dialogs: [ { "Bot" ...

Identifying the End of an HTML Video in Angular 2

Seeking assistance with detecting the end of an HTML video in Ionic2 (Angular2 and Typescript). The relevant code snippets can be found below: Template: <video poster="" id="v" playsinline autoplay webkit-playsinline onended="vidEnded()"> <s ...

Mismatched non-intersecting categories with TypeScript

I have an object that I need to conditionally render some JSX based on certain properties. I want to restrict access to specific parts of the object until certain conditions are met. Here is my scenario: const { alpha, bravo } = myObject; if (alpha.loadin ...

Developing an npm module encapsulating API contracts for seamless integration with front-end applications using Typescript

I am curious if Typescript supports this specific idea, and I could use some advice on how to make it work. In my project, there's a frontend application and a backend REST API with clear contract classes for Inputs and Outputs. These classes outline ...

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

Avoiding Overload Conflicts: TypeScript and the Power of Generic Methods

I have created an interface type as follows: interface Input<TOutput> { } And then extended that interface with the following: interface ExampleInput extends Input<ExampleOutput> { } interface ExampleOutput { } Additionally, I ha ...

What is the process for importing a TypeScript module in the StackBlitz editor?

When I enter the editor at Stackblitz.com and start a new Angular project, it comes with default files and folders already set up. In the "Dependencies" section, I decide to add shortid. So, I input that in the designated box and it begins loading the cor ...

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

My first time posing a query on this platform, and certainly not my last. The issue at hand involves the ng-build --prod process failing to complete and throwing errors in my Angular 8.2.14 application. I've integrated Firebase into my project succes ...

Implementing dynamic components in Vuejs by passing props from objects

I have developed a dashboard application that allows users to customize their dashboard by adding widgets in any order. While the functionality is working fine, I am looking to address some technical debt and clean up the code. Let's simplify things ...

What could be causing the lack of updates in my SolidJS component when the data changes?

One of my components in SolidJS is an Artist page component. Here is a snippet of the code: export function Artist() { const params = useParams<{ id: string }>(); const [data, setData] = createSignal(null); createEffect(() => { fetchArti ...

Can a Vuetify datatable have a header that spans multiple lines?

Is it possible to create a table with a multiline header, similar to the one shown in this example? I came across this post, but the solution provided didn't work for me. I also checked the Vuetify documentation and Github issues, but couldn't f ...

The promise chain from the ngbModal.open function is being bypassed

I'm currently working on implementing data editing within a component. My task involves checking if any of the data fields have been altered, and if so, prompting a confirmation pop-up to appear. If the user confirms the change, the data will then be ...

Refresh the Angular view only when there are changes to the object's properties

I have a situation where I am fetching data every 15 seconds from my web API in my Angular application. This continuous polling is causing the Angular Material expansion panel to reset to its default position, resulting in a slow website performance and in ...