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...
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

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

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?

Thread Thread
 
jesus9ias profile image
Jesús Escamilla

The new error seems to be the app requires eslint in some process, do you have installed locally or globally?

Thread Thread
 
simonmarcellinden profile image
Simon Marcel Linden

Hello, is installed locally and globally. But it looks like a problem with

npm link

. Before I publish my packages, I always test them.

To do this, I use

npm link

and then link my package with my test project. The error mentioned above then appears.

But if I publish the package and then install it with

npm install

the error disappears.

Thread Thread
 
jesus9ias profile image
Jesús Escamilla

Hello @simonmarcellinden in that case you can try to test locally using npm pack and install them referencing the created tgz file instead of npm link. It is more similar to installing from public npm.

Thread Thread
 
simonmarcellinden profile image
Simon Marcel Linden

thanks for the tip, I'll try this and report me

Thread Thread
 
simonmarcellinden profile image
Simon Marcel Linden • Edited

@jesus9ias , great tip. It's work fine.

thanks a lot

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

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
 
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
 
jaslioin profile image
jasonlyeroin

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

Collapse
 
jesus9ias profile image
Jesús Escamilla

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