Types for Vue libraries

I am in the process of developing a Vue library as an NPM package with the intention of making it available for use in other projects.

The main entry point is main.ts, which exposes a plugin and some commonly used functions. Here's a simplified example of what main.ts looks like:

import Vue from 'vue'
import Button from '@/components/button.vue'

const myPlugin = {
  install (vue: typeof Vue): void {
    vue.component('the-button', Button)
  }
}

function someFunction(a: number, b: number) {
  return a + b
}

export { myPlugin, someFunction }

To build the project, I use the command

vue-cli-service build --target lib --name myLibrary src/main.ts
.

Now, my question is: how do I specify or generate typings correctly? It seems there are two options available:

  1. Setting "typings": "src/main.ts" in my package.json and using the .ts files themselves as type references. While it appears to work, I have not come across any examples of this approach being used, so I'm unsure if it's considered best practice?

  2. Enabling "declaration": true and setting "outDir": "types" in my .tsconfig.json. With some adjustments in vue.config.js as mentioned here, typings seem to be generated correctly. In this case, I would specify "typings": "types/main.d.ts" in the package.json file. Is this the recommended method?

Answer №1

I prefer to implement the second approach, or even better, I always opt for the second approach when working with my packages.

Take for instance rotating-file-stream, while not a Vue library but rather a TypeScript package, I find that using this method allows me to include only the essential .js and .d.ts files in the npm distribution, resulting in a more lightweight package. The original .ts files are readily available on GitHub for further reference and documentation purposes.

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

Is it possible for an object to be null even when its type is object

There's an issue that I can't seem to replicate. Personally, I'm not experiencing any errors but bugsnag reports that some users are encountering them. Take a look at snippet line 6 for more information. let lang = this.$store.state.lang ...

Utilizing TypeScript to perform typing operations on subsets of unions

A TypeScript library is being developed by me for algebraic data types (or other names they may go by), and I am facing challenges with the more complex typing aspects. The functionality of the algebraic data types is as follows: // Creating ADT instatiat ...

Add a hyperlink within a button element

I am looking to add a route to my reusable 'button' component in order to navigate to another page. I attempted using the <Link> </Link> tags, but it affected my CSS and caused the 'button' to appear small. The link works if ...

Tips for disabling drag slide functionality in Vue with agility

I am working with vue-agile and encountering an issue where videos are causing the slider to move unexpectedly when dragging the player's pointer. Images display fine, but this drag/swipe behavior is disrupting the user experience. Is there a way to d ...

Terminal does not seem to be detecting Netlify

After successfully installing netlify-cli using npm with the command npm install netlify-cli -g, I received the following response: npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the ...

Why does the custom method only trigger once with the addEventListener?

I am attempting to connect the "oninput" event of an input range element to a custom method defined in a corresponding typescript file. Here is the HTML element: <input type="range" id='motivation-grade' value="3" min="1" max="5"> This i ...

Deactivating an emitted function from a child component in Angular 4

There is a main component: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { funcBoo():void{ alert("boo"); //return fal ...

What is the reason for the failure of the require("perf_hooks") function?

My understanding is that "perf_hooks" is a component of Node.js. However, when I run tests with npm test, it fails for me and shows the following error (some file names have been altered): Error: ENOENT: no such file or directory, open 'perf_hooks&apo ...

Enhance the variety of types for an external module in TypeScript

I am in the process of migrating an existing codebase from a JavaScript/React/JSX setup to TypeScript. My plan is to tackle this task file by file, but I have a question regarding the best approach to make the TypeScript compiler work seamlessly with the e ...

Incorporating a Link/Template Column into Your Unique Table Design

I built a table component following the guidelines from this article: Creating an Angular2 Datatable from Scratch. While I have added features like sorting and paging to suit my app's needs, I am struggling with implementing a "Template column" to al ...

Create a custom definition for the useSelector function within a separate TypeScript file in a React

Question: Is it possible to define a type like <TRootState, string> in an external file and use it directly inside multiple Component files? External file: export type TUser = <TRootState, string> // This method does not work Component's ...

Show a condensed version of a lengthy string in a div using React TS

I've been tackling a React component that takes in a lengthy string and a number as props. The goal of the component is to show a truncated version of the string based on the specified number, while also featuring "show more" and "show less" buttons. ...

Is it possible to dynamically create an interface using an enum in TypeScript through programmatically means?

Recently, I defined an enum as shown below: enum EventType { JOB, JOB_EXECUTION, JOB_GROUP } Now, I am in need of creating an interface structure like this: interface EventConfigurations { JOB: { Enabled?: boolean; }; JOB_EXECUTION: { ...

Cannot trigger event ascn.onchange does not exist as a function

Need to trigger the onChange function and pass parameters within it. Here's what I have tried: setTimeout(function() { document.getElementById(input.key)?.onchange({}) }, 200); Encountering the following error message: cn.onchange is not a function ...

Issue with comparing strings in Typescript

This particular issue is causing my Angular application to malfunction. To illustrate, the const I've defined serves as a means of testing certain values within a function. Although there are workarounds for this problem, I find it perplexing and woul ...

Unable to connect to the server launched by vue cli webpack-dev-server using localhost or 127.0.0.1

After setting up a new Vue project with vue/cli, I ran the command to start the development server with npm run dev. However, despite the output showing that the server is running on localhost:8080, I am unable to access it using either localhost:8080 or 1 ...

What's your go-to choice for installing dependencies in a React Native project - Yarn or

When installing react-native dependencies, I'm torn between using yarn or npm. While npm has given me some trouble with certain dependencies in the past, I still find myself using it at times. The decision on which one to use permanently remains uncle ...

Authentication with Express, Passport, and JSON Web Token (JWT)

When trying to access the "/secret" endpoint with a valid JWT token using passport authentication, the response returns a message saying "Success! You can not see this without a token". I will test this in Postman with the following authorization credenti ...

knex migration is unsuccessful and does not undo any modifications

I'm looking to incorporate Knex into my TypeScript project. Here's what the migration code looks like: export async function up(knex: Knex): Promise<any> { return knex.schema.createTable('first_table', (t) = ...

Transforming information into properties for the main component in Vue.js 2

I've been scratching my head over this seemingly simple issue... With Vue, I have a handle on passing props from parent to child components. I also grasp the concept of having an app state in the data property of the Vue instance. However, I'm s ...