Publish multiple Vuejs components in one project to npm using webpack

Question

Im trying to publish a project to npm that contains two or more Vue components so i can import, register and use both components like this:

import Component1 from 'npm-package'
import Component2 from 'npm-package'

this is my webpack file:

const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');

var config = {
  output: {
    path: path.resolve(__dirname + '/dist/'),
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        include: __dirname,
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.css$/,
        loader: 'style!less!css'
      }
    ]
  },
  externals: {
    moment: 'moment'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin( {
      minimize : true,
      sourceMap : false,
      mangle: true,
      compress: {
        warnings: false
      }
    } )
  ]
};


module.exports = [
  merge(config, {
    entry: path.resolve(__dirname + '/src/plugin.js'),
    output: {
      filename: 'vue-project.min.js',
      libraryTarget: 'window',
      library: 'VueProject',
    }
  }),
  merge(config, {
    entry: path.resolve(__dirname + '/src/index.js'),
    output: {
      filename: 'vue-project.js',
      libraryTarget: 'umd',
      library: 'vue-project',
      umdNamedDefine: true
    },
    resolve: {
      extensions: ['', '.js', '.vue'],
      alias: {
        'src': path.resolve(__dirname, '../src'),
        'components': path.resolve(__dirname, '../src/components')
      }
    }
  })
];

and this is the index.js file i'm using as the entry point for the build process

import Component1 from './components/folder1/Component1.vue'
import Component1 from './components/folder2/Component2.vue'

export default {
  components: {
    Component1,
    Component2
  }
}

The build process using npm run build works fine and i can publish the project to npm and install it using npm install. Importing and using it works fine to, but when i run my project i get the error:

failed to mount component: template or render function not defined. All other posts o found regarding this error did not solve my problem, as none of them tried to export multiple components.

Both components work completely as intended when im publishing them in two different projects.

What am i missing here? Thanks in advance!

Answer 1

You don't need to export using the components property, you simply need to do:

export {
    Component1,
    Component2
}

You would then do:

import {Component1} from 'npm-package';
import {Component2} from 'npm-package';

or

import {Component1, Component2} from 'npm-package';

see: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export