I recently created a Vue component library using a tutorial I found at:
Creating the Component Library
The VueCLI project I set up included Typescript, which resulted in the creation of some *.d.ts files:
// shims-tsx.d.ts
import Vue, { VNode } from 'vue';
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
// shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
In my index.ts file, I have exported all my components:
import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...
export {
ATag,
AnotherThing,
...
};
Here is the content of my package.json file:
{
"name": "my-ui-components",
"scripts": {
"build": "vue-cli-service build --target lib --name my-ui-components ./src/index.ts",
},
"main": "./dist/my-ui-components.common.js",
"files": [
"dist/*"
]
}
When running the build script, it generates several JS files, a CSS file, and includes a folder for packaged images.
In my Nuxt project, I simply imported the component library from our Bitbucket account via SSH:
"dependencies": {
"my-ui-components": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfbf5e8dcfef5e8fee9fff7f9e8b2f3eefb">[email protected]</a>:my-account/my-ui-components.git",
}
However, when attempting to import my components downstream in my Nuxt app like this:
pages/Index.vue
<script>
import { ATag, AnotherThing } from my-ui-components;
export default {
...
components: {
ATag,
}
...
}
</script>
I encountered an error stating: "Could not find a declaration file for module 'my-ui-components' implicitly has an 'any' type". So it seems that my "ATag.vue" component is not being recognized properly.
<template>
<span :class="classes"><slot /></span>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'a-tag',
props: {
// prop definitions here
},
computed: {
// computed properties here
},
});
</script>
It appears that there might be an issue with how the upstream declaration files are being used in the build process or potentially a problem within Nuxt itself. Since this is my first experience with TypeScript, I'm still learning the nuances of it all.
If you have any insights into what I might be missing or where the problem lies, I would greatly appreciate the assistance! Thank you!