How to bundle a Vue.js components in a single JS file, to be used in any HTML/JS app
JavaScript Vue
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Vue Custom Element Bundler

Example using Webpack to bundle one or many Vue.js components into a single .js file that can be used in any HTML/JS application.

Refer to this post on vuetips.com for more information.

Check out this example using rollup.js for a 25% lighter file (when gzipped) !

<html>
  <body>

    ...

    <my-vue-component/>
    <!-- you can add many instances of the component in the same page -->
    <my-vue-component/>

    <script src="my-vue-component.js"></script>

  </body>
</html>

How it works

Components are registered in src/main.js.

Component code is in src/components/ComponentName.vue.

To add a component :

  • Add a .vue file in src/components
  • Register the component in src/main.js

Development

To test your components :

  • Launch webpack : npm run dev (watch mode)
  • Open demo/index.html in a browser
  • Edit src/main.js or your component file
  • Refresh the page

Bundle a release

npm run build

File will be placed in dist/my-vue-component.js.

Refer to webpack.config.js for customization options.

Browser compability

You may add the web component polyfill if you wish to support older browsers.

import 'document-register-element/build/document-register-element'

Thanks to @visualjerk for this proposal.