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 • 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 • 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?

Jesús Escamilla • Aug 5 '21

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

Simon Marcel Linden • Aug 5 '21

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.

Jesús Escamilla • Aug 29 '21

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.

Simon Marcel Linden • Aug 30 '21

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

Simon Marcel Linden • Sep 1 '21 • Edited

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

thanks a lot

Robert • Jul 19 '21 • Edited

Thanks!

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

Jesús Escamilla • 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.

Robert • Jul 24 '21

Thanks! I'll try and let you know

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.

jasonlyeroin • May 5 '21

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

Jesús Escamilla • Jul 19 '21

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