DEV Community

Creating a Vue module with Rollup and Typescript

Jesús Escamilla on February 02, 2021

Summary: Install vue-sfc-rollup for scaffolding. Create a Vue2 module setting with typescript support. Run for internal development. Pack and ins...

Read full post

Simon Marcel Linden • Jul 29 '21

Hello, I wrote and exported some components. Now i have the following problem if i install and import this components to another project.

No overload matches this call.
  The last overload gave the following error.
    Type 'PluginFunction<any>' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
      Type 'PluginFunction<any>' is not assignable to type 'AsyncComponentPromise<any, any, any, any>'.
        Types of parameters 'Vue' and 'resolve' are incompatible.
          Type '(component: Component<any, any, any, any>) => void' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 10 more.

Jesús Escamilla Htech • Jul 31 '21

Hi @simonmarcellinden , what Vue version are you using in the components and project? I think it's a version problem.

Simon Marcel Linden • Aug 1 '21 • Edited

Hello @jesus9ias I am currently using Vue version 2.6.12 and the following versions of Typescript and co

Jesús Escamilla Htech • Aug 1 '21

That's looks ok, how are you importing and setting the components? I see there is a type mismatch in the error

Simon Marcel Linden • Aug 2 '21 • Edited

I export the components in my package ("@ simon.marcel.linden / ExampleComponents") in the index.ts under src / lib-components as follows

export { default as component1 } from '@/lib-components/component1/component1.vue';
export { default as component2 } from '@/lib-components/component2/component2.vue';
export { default as component3 } from '@/lib-components/component3/component3.vue';

And then I import them in another project

import { Component, Vue } from "vue-property-decorator";

import {component1} from "@simon.marcel.linden/ExampleComponents";
import {component2} from "@simon.marcel.linden/ExampleComponents";

@Component({
  components: {
    component1,
    component2,
  }
})
export default class AwesomePackage extends Vue {

}

Simon Marcel Linden • Aug 2 '21 • Edited

Hi @jesus9ias , I updated vue-sfc-rollup to the latest version and copied my components. Now it seems to be working. It's strange. I haven't changed anything in my code.

Currently, I am importing the components all individually as shown in my example above. If I want to import everything at once, I do this as follows:

import MyComponents from @ simon.marcel.linden / ExampleComponents';

Vue.config.productionTip = false
// Vue.use (lNavbar);

I then get the following error

Syntax Error: Error: No ESLint configuration found in 'packagename/dist'

Any idea how I can fix this?

Simon Marcel Linden • Oct 4 '21

Hey @jesus9ias any idea how i can use scss-files global for all components of my Library? I try to import my global files into entry.esm.ts but when I build my library my components used allways scoped styles but no global.

Robert • Jul 19 '21 • Edited

Thanks!

Can you publish a Vue 2 component with Composition API plugin instead?

Jesús Escamilla Htech • Jul 21 '21

hi @wobsoriano , I didn't make a test with composition api plugin, I think it's possible with properly extra configurations, but may be for other post.