title: Vue Component Library - Can't import from dist
body: <p>I've been trying to get a Vue Component Library setup for a couple days. I've looked over several tutorials and read through code of some popular existing UI libraries. My issue has come down to this:</p>
  
  <p>My library is called @company/vue-components</p>
  
  <p>I install my library into a project with npm:</p>
  
  <pre><code>npm install @company/vue-components
  </code></pre>
  
  <p>I then attempt to register my library as a plugin with Vue:</p>
  
  <pre><code>import Vue from 'vue';
  import VueComponents from '@company/vue-components';
  
  Vue.use(VueComponents);
  </code></pre>
  
  <p>I try to use my component in the vue-cli generated About.vue page (Called EButton):</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="about"&gt;
          &lt;h1&gt;This is an about page&lt;/h1&gt;
          &lt;e-button color="primary"&gt;Click this button&lt;/e-button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>But I get an error:</p>
  
  <pre><code>[Vue warn]: Unknown custom element: &lt;e-button&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option
  </code></pre>
  
  <p>If I go back to where I registered the plugin, I can make this one change and it'll work:</p>
  
  <pre><code>import VueComponents from '@company/vue-components/src/index';
  </code></pre>
  
  <p>So, I guess I am not building my dist package correctly, as that's what is referenced when I simply use "@company/vue-components". If I print each variable in the console, I can see that the import for the distribution bundle does not include the "install" function, but the source import does:</p>
  
  <p><a href="https://i.stack.imgur.com/4K2NM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4K2NM.png" alt="enter image description here"></a></p>
  
  <p>Here is all the source code I can think of that's relevant. This is a mash-up of using the vue-sfc-rollup cli tool and copying the Buefy library setup.</p>
  
  <h3>EButton.vue</h3>
  
  <pre><code>&lt;template&gt;
      &lt;button class="button" v-bind="$attrs" v-on="$listeners"&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'EButton',
      inheritAttrs: false
  };
  &lt;/script&gt;
  </code></pre>
  
  <h3>EButton/index.js</h3>
  
  <pre><code>import EButton from './EButton.vue';
  
  const Plugin = {
      install(Vue) {
          Vue.component(EButton.name, EButton);
      }
  };
  
  let GlobalVue = null;
  
  if (typeof window !== 'undefined') {
      GlobalVue = window.Vue;
  }
  else if (typeof global !== 'undefined') {
      GlobalVue = global.Vue;
  }
  
  if (GlobalVue) {
      GlobalVue.use(Plugin);
  }
  
  export default Plugin;
  
  export {
      EButton
  };
  </code></pre>
  
  <h3>components/index.js</h3>
  
  <pre><code>import EButton from './EButton';
  
  export {
      EButton
  };
  </code></pre>
  
  <h3>src/index.js</h3>
  
  <pre><code>import * as components from './components/index.js';
  
  const install = function(Vue) {
      if (install.installed) {
          return;
      }
      install.installed = true;
  
      for (let name in components) {
          Vue.use(components[name]);
      }
  };
  
  const Plugin = { install };
  
  let GlobalVue = null;
  
  if (typeof window !== 'undefined') {
      GlobalVue = window.Vue;
  }
  else if (typeof global !== 'undefined') {
      GlobalVue = global.Vue;
  }
  
  if (GlobalVue) {
      GlobalVue.use(Plugin);
  }
  
  export default Plugin;
  </code></pre>
  
  <h3>rollup.config.js</h3>
  
  <pre><code>import vue from 'rollup-plugin-vue';
  import buble from 'rollup-plugin-buble';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import { terser } from 'rollup-plugin-terser';
  import minimist from 'minimist';
  
  const argv = minimist(process.argv.slice(2));
  
  const baseConfig = {
      input: 'src/index.js',
      plugins: {
          preVue: [
              replace({
                  'process.env.NODE_ENV': JSON.stringify('production')
              }),
              commonjs()
          ],
          vue: {
              css: true,
              template: {
                  isProduction: true
              }
          },
          postVue: [
              buble()
          ]
      }
  };
  
  const external = [
  ];
  
  const globals = {
  };
  
  const buildFormats = [];
  
  if (!argv.format || argv.format === 'es') {
      const esConfig = {
          ...baseConfig,
          external,
          output: {
              file: 'dist/vue-components.esm.js',
              format: 'esm',
              exports: 'named',
              globals
          },
          plugins: [
              ...baseConfig.plugins.preVue,
              vue(baseConfig.plugins.vue),
              ...baseConfig.plugins.postVue,
              terser({
                  output: {
                      ecma: 6
                  }
              })
          ]
      };
  
      buildFormats.push(esConfig);
  }
  
  if (!argv.format || argv.format === 'cjs') {
      const umdConfig = {
          ...baseConfig,
          external,
          output: {
              compact: true,
              file: 'dist/vue-components.ssr.js',
              format: 'cjs',
              name: 'VueComponents',
              exports: 'named',
              globals,
          },
          plugins: [
              ...baseConfig.plugins.preVue,
              vue({
                  ...baseConfig.plugins.vue,
                  template: {
                      ...baseConfig.plugins.vue.template,
                      optimizeSSR: true
                  }
              }),
              ...baseConfig.plugins.postVue
          ]
      };
  
      buildFormats.push(umdConfig);
  }
  
  if (!argv.format || argv.format === 'iife') {
      const unpkgConfig = {
          ...baseConfig,
          external,
          output: {
              compact: true,
              file: 'dist/vue-components.min.js',
              format: 'iife',
              name: 'VueComponents',
              exports: 'named',
              globals,
          },
          plugins: [
              ...baseConfig.plugins.preVue,
              vue(baseConfig.plugins.vue),
              ...baseConfig.plugins.postVue,
              terser({
                  output: {
                      ecma: 5
                  }
              })
          ]
      };
  
      buildFormats.push(unpkgConfig);
  }
  
  export default buildFormats;
  </code></pre>
  
  <h3>package.json</h3>
  
  <pre><code>{
    "name": "@company/vue-components",
    "version": "1.0.0",
    "description": "",
  
    "main": "dist/vue-components.ssr.js",
    "module": "dist/vue-components.esm.js",
    "unpkg": "dist/vue-components.min.js",
  
    "files": [
      "dist/*",
      "src/**/*.vue",
      "!src/lib-dev.vue"
    ],
  
    "scripts": {
      "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
      "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
      "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
      "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
    },
    ...
  }
  </code></pre>