Exporting Vue components as npm module - vuejs2

Question

I have problem to make Vue component export work properly.
I can export the component successfully and when I try to import it in different project I get this error:
[Vue warn]: Failed to mount component: template or render function not defined.
This is the Webpack config that I use for export:
const webpack = require('webpack');
const path = require('path');
const utils = require('./utils');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
var config = {
entry: path.resolve(__dirname + '/../src/components/index.js'),
output: {
path: path.resolve(__dirname + '/../dist/timer-comp/'),
filename: 'timer-component.js',
},
resolve: {
extensions: ['.vue', '.js', '.json']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: false,
mangle: true,
compress: {
warnings: false
}
})
]
};
module.exports = config;
This is the code that I use to export the components:
import TimerComponent from './timer-component';
export {
TimerComponent,
};
And finally the component code:
<template>
<div>
<div class="time">{{time}}</div>
</div>
</template>
<script>
export default {
name: 'TimerComponent',
data() {
return {
time: ''
};
},
created() {
setInterval(() => {
let now = new Date();
this.time = now.getHours() + " : " + now.getMinutes() + " : " + now.getSeconds();
}, 1000);
}
}
</script>
<style scoped>
</style>
Does someone have a clue why I get this error Failed to mount component ?
by the way this is how I call the component in a different project:
import TimerComponent from 'timer-comp';
It seems that the issue is caused by the build somehow, but I can't figure out what could be the exact problem.

Answer 1

add output property in production webpack config file:
output: {
path: path.resolve(__dirname + '/../dist/timer-comp/'),
filename: 'timer-component.js',
libraryTarget: 'umd',
libraryExport: 'default',
library: 'TimerComponent',
umdNamedDefine: true
}