在Vue+TS+Webpack+ASP.NET Core项目中使用JS Vue组件及推荐模态框组件

Hey there! I’ve been in your exact boat before—building projects with Vue + TypeScript + Webpack + ASP.NET Core and struggling to leverage all those awesome JS-only Vue components without having to rewrite them in TS. Let’s tackle this problem step by step, starting with component integration, then moving to modal recommendations.

1. Using JS-only Vue Components in TypeScript (No Full Rewrite Needed) #

Here are the most practical, low-effort ways to use JS components in your TS setup:

• Declare custom type modules (cleanest long-term fix)
  Create a types folder in your project root (make sure it’s included in tsconfig.json’s include array), then add a .d.ts file for the JS component. For example, if you’re using a plugin-based component like vue-js-modal:

  // types/vue-js-modal.d.ts
  import Vue from 'vue';
  declare module 'vue-js-modal' {
    const ModalPlugin: Vue.PluginObject<any>;
    export default ModalPlugin;
  }
  

  For single-file JS components, adjust the declaration to export a component option:

  // types/my-custom-modal.d.ts
  import Vue from 'vue';
  declare module './MyCustomModal.vue' {
    const component: Vue.ComponentOptions<Vue>;
    export default component;
  }
  

  TypeScript will now recognize the module without throwing errors.

• Use // @ts-ignore for quick testing
  If you just need to prototype with a component without setting up full types, add this comment above the import to suppress TS errors temporarily:

  // @ts-ignore: No official type declarations available for this component
  import MyJSModal from 'my-js-modal-library';
  

  Pro tip: Don’t rely on this for production code—add proper type declarations later to avoid hidden bugs.

• Wrap components with Vue.extend()
  For single-file JS components, wrapping the import with Vue.extend() lets TypeScript infer basic component types automatically:

  import Vue from 'vue';
  import MyJSModal from './MyJSModal.vue';
  
  const TypedModal = Vue.extend(MyJSModal);
  
  // Use in your component's components option
  export default Vue.extend({
    components: { TypedModal },
    // ...rest of your component logic
  });
  

• Global component registration
  Register the JS component globally in your main.ts file. In Vue 2, TypeScript doesn’t enforce type checks on template-level component usage, so you can use it directly in templates without extra setup:

  // main.ts
  import Vue from 'vue';
  import MyJSModal from 'my-js-modal-component';
  
  Vue.component('my-js-modal', MyJSModal);
  

2. Recommended Vue Modal Components #

With Full Type Declarations (Ready for TS) #

These components work seamlessly with TypeScript out of the box:

• Vuetify v-dialog
  A robust, highly customizable modal with built-in animations, full-screen support, and responsive behavior. Vuetify’s first-class TS support means you’ll get autocompletion and type checks for all props and events.
• Element Plus/Element UI ElDialog
  A user-friendly modal with a clean design, support for custom footers, and intuitive props. Both Element Plus (for Vue 3) and Element UI (for Vue 2) include complete .d.ts files.
• PrimeVue Dialog
  A sleek, feature-rich modal with configurable styles, animations, and accessibility features. PrimeVue’s entire library is TS-ready, so no extra setup is required.

JS-only Components (Easy to Add Types For) #

These components don’t have official type declarations, but they’re simple to integrate with the methods above:

• vue-js-modal
  A lightweight, flexible library that supports multiple modal types (standard, full-screen, bottom sheet). Its simple API makes integration a breeze, and adding a custom type declaration takes just a minute.
• vue-sweetalert2
  A Vue wrapper for SweetAlert2, perfect for beautiful, interactive alert modals. It’s ideal for confirmations, notifications, and form-based modals—no complex setup required.
• bootstrap-vue b-modal
  If your project uses Bootstrap, this modal integrates seamlessly with existing Bootstrap styles. It supports all Bootstrap’s modal features, and you can quickly add a type declaration for TS compatibility.

内容的提问来源于stack exchange，提问作者ProfyTroll