Packaging Vue Components for npm: use via <script> tag in the browser directly problem

[mkastner]

I've tried to apply the example

https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#Base-Example

to a simple simple vue component but that didn't work. I am not even sure, if your example could work at all.

The section "Base Example" says:

"Or even used via <script> tag in the browser directly:"

followed by a html snippet:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/my-component"></script>
...
<my-component></my-component>
...

It would be great, if this would be working, but I dont't think vue custom tags can be run without declaring some kind of a root element for the vue-instance to hook up to.

The example is not very specific about how a standalone custom tag can be achieved. So, I might as well have missed something.

Here's my code example on codepen:

https://codepen.io/mikekastner/pen/wvBgJEq

The component's code was generated with his rollup config:

// rollup.config.mjs
import path from 'path';
import vue from 'rollup-plugin-vue';
import alias from '@rollup/plugin-alias';
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 projectRoot = path.resolve(__dirname, '..');

const baseConfig = {
  input: path.resolve(projectRoot, 'entry/wrapper.rollup.js'),
  plugins: {
    preVue: [
      replace({
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      commonjs(),
      alias({
        resolve: ['.jsx', '.js', '.vue'],
        entries: {
          '@': path.resolve(projectRoot, 'src'),
        },
      }),
    ],
    vue: {
      css: true,
      template: {
        isProduction: true,
      },
    },
    postVue: [
      buble(),
    ],
  },
};

// ESM/UMD/IIFE shared settings: externals
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
const external = [
  // list external dependencies, exactly the way it is written in the import statement.
  // eg. 'jquery'
];

// UMD/IIFE shared settings: output.globals
// Refer to https://rollupjs.org/guide/en#output-globals for details
const globals = {
  // Provide global variable names to replace your external imports
  // eg. jquery: '$'
};

// Customize configs for individual targets
const buildFormats = [];
if (!argv.format || argv.format === 'es') {
  const esConfig = {
    ...baseConfig,
    external,
    output: {
      file: 'dist/mk-vue-flex-text.esm.js',
      format: 'esm',
      exports: 'named',
    },
    plugins: [
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      ...baseConfig.plugins.postVue,
    ],
  };
  buildFormats.push(esConfig);
}

if (!argv.format || argv.format === 'cjs') {
  const umdConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/mk-vue-flex-text.ssr.js',
      format: 'cjs',
      name: 'MkVueFlexText',
      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/mk-vue-flex-text.js',
      format: 'iife',
      name: 'MkVueFlexText',
      exports: 'named',
      globals,
    },
    plugins: [
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      ...baseConfig.plugins.postVue,
      /* 
      terser({
        output: {
          ecma: 5,
        },
      }),
      */
    ],
  };
  buildFormats.push(unpkgConfig);
}

// Export config
export default buildFormats;

This is my entry:

// Import vue component
import component from '../src/mk-vue-flex-text.vue';

// Declare install function executed by Vue.use()
export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('mk-vue-flex-text', component);
}

//  Create module definition for Vue.use()
const plugin = {
  install,
};

// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

// To allow use as module (npm/webpack/etc.) export component
export default component;

[LinusBorg]

The example is not very specific about how a standalone custom tag can be achieved. So, I might as well have missed something.

You were mislead by the too contrieved pseudocode, we need to improve that.

This recipe is not about turing a component into a custom element. It's about making a component usable in other Vue apps as an npm package or via a script tag.

If you need to wrap a component as a custom element (web component), consider Vue CLI docs or roll your own with the wrapper lib:

https://github.com/vuejs/vue-web-component-wrapper

About the config that you posted: please understand that this repo is concerned with the documentation content, and issues are not meant for support requests on indiviual problems.

We have forum.vuejs.org and chat.vuejs.org for that.

Thanks :)

[mkastner]

@LinusBorg I understand the focus of this chapter on how to publish vue components on npm. I also understand that the specifics of how to build the respective component types lies not at the core of this chapter.

That said (or written, in this case) I was trying to check, if your code might be working at all. Maybe, I have missed an important detail of the Vue API.

And I didn't want to write that there might be a misconception, without showing that I've made some efforts to understand it.

[mgdodge]

As the author of that cookbook entry, I already have a pull request pending review/approval, so I just updated it to include a better example that should clear up the confusion. Yet another reason I hope that pull request gets reviewed/merged soon (wink wink).

The auto-install section will have to change when Vue 3 lands, however, due to the global mounting/configuration change:

Vue.use(MyComponent);

to

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(MyComponent)

Just waiting for more infon on Vue 2 => 3 migration recommendations, etc.