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!

craig_h · Accepted Answer · 2017-10-18 13:38:57Z

6

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

edited Oct 18, 2017 at 13:38

answered Oct 18, 2017 at 13:31

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Leon Schaffert Over a year ago

That still results in a failed to mount component: template or render function not defined error and does not display anything.

craig_h Over a year ago

How are you using the components? Have you defined a render function for your Vue instance? You might also like to check out a webpack config I wrote for one of my packages to see if it helps you identify the problem: github.com/craigh411/vue-rate-it/blob/master/config/…

Leon Schaffert Over a year ago

Thanks for the reference, i will try to get it to work tomorrow with that new input!

Leon Schaffert Over a year ago

Got it to work, the mistake was using export default instead of just export, i overlooked that. Thanks!

Collectives™ on Stack Overflow

Publish multiple Vuejs components in one project to npm using webpack

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related