DEV Community

Cover image for Creating a Vue module with Rollup and Typescript

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
Collapse
 
simonmarcellinden profile image
Simon Marcel Linden •

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.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jesus9ias profile image
Jesús Escamilla Htech •

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

Collapse
 
simonmarcellinden profile image
Simon Marcel Linden • • Edited

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

Versions

Thread Thread
 
jesus9ias profile image
Jesús Escamilla Htech •

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

Thread Thread
 
simonmarcellinden profile image
Simon Marcel Linden • • 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';
Enter fullscreen mode Exit fullscreen mode

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 {

}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
simonmarcellinden profile image
Simon Marcel Linden • • 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);
Enter fullscreen mode Exit fullscreen mode

I then get the following error

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

Any idea how I can fix this?

Collapse
 
simonmarcellinden profile image
Simon Marcel Linden •

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.

Collapse
 
wobsoriano profile image
Robert • • Edited

Thanks!

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

Collapse
 
jesus9ias profile image
Jesús Escamilla Htech •

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.

Collapse
 
wobsoriano profile image
Robert •

Thanks! I'll try and let you know

Collapse
 
jaslioin profile image
jasonlyeroin •

Great article, but is the exported components tree-shakable?

Collapse
 
jesus9ias profile image
Jesús Escamilla Htech •

Hi @jaslioin , yes, it is tree-shakable thanks to rollup