Vue3 + typescript (vue-cli-service): How to create Vue NPM library?

[skyhos]

Hi, nice to meet you!
I am new to frontend work and trying to make my own Vue UI library.
Before the actual work, I needed to learn how to create Vue library, so that I created test projects:

https://github.com/skyhos/vue-lib-test-1
https://github.com/skyhos/vue-lib-test-2

But there are problems which I guess is related to typescript declaration or exporting.
I've tried to search some use-cases but I can't find the case that matches my environment. (e.g. Vue2, No Typescript, No SFC, ....)

Anyway, let me explain the detail:

I created a library project: vue-lib-test-1:

1. Create a project with vue create vue-lib-test-1 command.
2. Write .vue files which are UI components: https://github.com/skyhos/vue-lib-test-1/tree/main/src/components
3. Write src/index.js and src/index.ts files:

// index.js
import HelloWorld from './components/HelloWorld.vue';
import CustomTitle from './components/CustomTitle.vue';

export default {
    HelloWorld,
    CustomTitle,
};

// index.ts
import HelloWorld from './components/HelloWorld.vue';
import CustomTitle from './components/CustomTitle.vue';

export default {
  HelloWorld,
  CustomTitle,
};

4. Write src/types/index.d.ts file:

import { VueConstructor } from 'vue';

export const HelloWorld: VueConstructor;
export const CustomTitle: VueConstructor;

Then I published the project with following command to my own private NPM server.

npm publish --repository=http://my.private.npm....

Then I created a project vue-lib-test-2 which would use the HelloWorld.vue and CustomTitle.vue in vue-lib-test-1.

1. Create a project with vue create vue-lib-test-2 command.
2. Change the generated src/componenets/HelloWorld.vue to src/components/ByeWorld.vue (Because, I worried about the ambiguity issue of same name.)
3. Add vue-lib-test-1 in the dependencies section in package.json file and run npm install. I checked the vue-lib-test-1 was downloaded well in the node_modules directory.
4. Modify the generated src/views/HomeView.vue file to use HelloWorld.vue from vue-lib-test-1:

<template>
  <div class="home">
    <HelloWorld msg="Test!!!" />
    <img alt="Vue logo" src="../assets/logo.png" />
    <ByeWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ByeWorld from "@/components/ByeWorld.vue"; // @ is an alias to /src
import { HelloWorld } from "vue-lib-test-1";
export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld,
    ByeWorld,
  },
});
</script>

Then I ran the test server with npm run serve and got the warning message as follow:

export 'HelloWorld' (imported as 'HelloWorld') was not found in 'vue-lib-test-1' (possible exports: default

And the module does not show in the browser.

Can somebody correct me?
Sincerely,
Thanks!

[chenxch]

import libs from "vue-lib-test-1";

export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld: libs.HelloWorld,
    ByeWorld,
  },
});

[Vue warn]: Failed to resolve component: HelloWorld
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[chenxch]

or

import HelloWorld from "vue-lib-test-1/src/components/HelloWorld.vue";

export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld: HelloWorld,
    ByeWorld,
  },
});

Since vue-lib-test-1 is directly used as a package reference without compilation, it needs to be distinguished from the reference on the conventional component library in the way, and it cannot be directly used as an object structure reference.

[skyhos]

@chenxch Thank you, Both solutions are worked for me.

Can you tell me what I should do if I want to use a package WITH Compilation?

And, can you explain more why I can not use the following importing statement?

import { HelloWorld } from 'vue-lib-test-1';

Actually, I don't know the conventional component library which seems to be a key conception...

Thanks again!

[chenxch]

Generally, the content of export default needs to be received directly using import xxx from 'xx' and cannot be deconstructed at the time of import

import { HelloWorld } from 'vue-lib-test-1';

in webpack's build is transformed into something like

vue-lib-test-1.default.HelloWorld 

What we want should be vue-lib-test-1.HelloWorld ,So got undefined

Then we need to modify the export method if we want to get HelloWorld correctly.

import HelloWorld from './components/HelloWorld.vue';
import CustomTitle from './components/CustomTitle.vue';

export  {
    HelloWorld,
    CustomTitle,
};

[skyhos]

@chenxch
Oh, Great!! Now I understand!
Thank you!