How to bundle a Vue.js components in a single JS file, to be used in any HTML/JS app
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>
Components are registered in src/main.js
.
Component code is in src/components/ComponentName.vue
.
To add a component :
.vue
file in src/components
src/main.js
To test your components :
npm run dev
(watch mode)demo/index.html
in a browsersrc/main.js
or your component filenpm run build
File will be placed in dist/my-vue-component.js
.
Refer to webpack.config.js
for customization options.
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.