After successfully creating components using template syntax (*vue files), I decided to move common components to a library.
The component from the library (common/src/component/VButton):
<template>
<button
...
</button>
</template>
<script>
export default {
name: 'VButton',
...
}
</script>
Main file from the library (common/src/index.js):
import VButton from './components/button/VButton.vue'
import VButtonLink from './components/button/VButtonLink.vue'
import { ButtonType } from './components/button/ButtonType'
export default {
VButton, VButtonLink, ButtonType
}
Package file from the library (common/package.json):
"name": "zeus-common",
...
"main": "./src/index.js"
}
Now, here's how I'm utilizing this library:
app/package.json
"dependencies": {
"common": "file:../common",
...
}
app/src/component/page.vue
<template>
<div>
...
<v-button @click="onClick">Example button</v-button>
</div>
</template>
<script>
import VButton from 'common'
export default {
name: 'Page',
components: { VButton },
...
}
Although there are no errors in the console when running npm run serve, the component is not rendered. The browser console shows the following error:
[Vue warn]: Failed to mount component: template or render function not defined.