I built a small Vue component library with a VueCLI project I made using this tutorial: https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00
When I try to import these components into nuxt, say in the pages/index.vue file I get this error:
TypeError: Cannot read properties of undefined (reading 'call')
at __webpack_require__ (my-ui-components.common.js?75f2:7584:1)
at eval (my-ui-components.common.js?75f2:9788:1)
at eval (my-ui-components.common.js?75f2:12878:1)
at eval (my-ui-components.common.js?75f2:12880:1)
at ./node_modules/my-ui-components/dist/my-ui-components.common.js (index.js:10:1)
at __webpack_require__ (runtime.js:854:30)
at fn (runtime.js:151:20)
at eval (index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts&:5:80)
at ./node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts& (index.js:11:1)
at __webpack_require__ (runtime.js:854:30)
This however works just fine in another Vue-CLI project, it's just something with Nuxt.
Component Library
my index.ts file is where I am exporting all my
import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...
export {
ATag,
AnotherThing,
...
};
and 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/*"
]
}
The build script produces several JS files, a CSS file, and a folder for packaged images.
My Nuxt project is just a boilerplate project where I am importing the component library from our bit bucket account via ssh:
"dependencies": {
"my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}
and wherever I attempt 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,
AnotherThing,
}
...
}
</script>
and "ATag.vue" isnt anything special really:
<template>
<span :class="classes"><slot /></span>
</template>
<script>
import Vue from 'vue';
export default {
name: 'a-tag',
props: {
type: {
type: String,
validator(value) {
return ['is-primary', 'is-success', 'is-warning', 'is-danger'].includes(value);
},
},
shade: {
type: String,
validator(value) {
return ['is-light', 'is-normal'].includes(value);
},
},
size: {
type: String,
default: 'is-normal',
validator(value) {
return ['is-normal', 'is-medium', 'is-large'].includes(value);
},
},
rounded: {
type: Boolean,
default: false,
},
naked: {
type: Boolean,
default: false,
},
},
computed: {
classes() {
return {
tag: true,
[`${this.type}`]: this.type,
[`${this.shade}`]: this.shade,
[`${this.size}`]: this.size,
'is-rounded': this.rounded,
'is-naked': this.naked,
};
},
},
};
</script>
So what is it that I am missing? This will be my first type script experience so I dont know the ins and out of it all.