How to build a reusable Vue.js web-component — (standalone web-component, vs. slim-build, vs. Vue component)
So you're using Vue.js and Webpack. Not for building a full web-application, but for building a reusable web component — i.e. a user-interface element that your consumers (=other developers) can use in their projects.
This project is a working webpack+npm configuration, that supports three types of consumers for your Vue component: • developers who use it as a standalone web-component; • developers who prefer to only use a slim component build; • developers who use it directly in their own Vue app.
Consumer type 1:
These developers don't want to deal with Vue or any Webpack setup.
They only want to add one extra <script src="__.js">
-tag in the html-header,
and use your component as a custom html-tag,
like: <my-component attr1="...">...</my-component>
.
Consumer type 2: These developers want to add multiple such web-components to their page. And they realize it would make their site slower, if the same Vue framework code would be included by each standalone component.
<script>
-tags.Consumer type 3: These developers just want to import your Vue-component into their own, larger Vue component, or into their Vue app.
There are small differences in how to programmatically interface with a component, based on these three output types. Therefore, if any of these differences pertain to your component, you should make your consumers aware of them. (This project fully describes them all).
This project includes:
package.json
: the scripts
section shows the different npm
commands
(after you ran npm install
first) :
npm start
bundles the code for the browser, starts a Webpack dev-server,index-dev.html
(incl. index-dev.js
).npm run build
launches two build processes: build:slim
and build:standalone
.
dist
folder,my-component.min.js
and my-component.standalone.min.js
respectively.npm test
runs the test code.npm run testw
runs the test code in watch-mode (auto-retests on file changes).npm run testwi
does the same but does not clear the console.npm run dev
runs start
and testwi
in parallel, so you can use a singlenpm run lint
runs style checks on the code.
webpack.config.js
: the Webpack configuration file.
Object.assign( {setting1}, DEV ? {setting2} || {} )
.npm install
ed packages. This is useful.eslintrc.js
: ESLint config options.
npm lint
, these are the exact options. But for other buildsrc/MyComponent.vue
: a small demo Vue-component. It is simply:
src/MyComponent.test.js
: a small demo of testing some aspects
of the Vue-component. This shows that tests are well integrated in
the webpack setup.
src/test-setup.js
: this file is included before any tests are run.
src/index-dev.html
+ src/index-dev.js
: the live demo of the Vue-component,
served in a webpage, used during development.
index-prod-slim.html
: demo of using the 'slim' build.
<my-component>
tag), <script src="https://unpkg.com/document-register-element"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-custom-element"></script>
<my-component>
tag must be located within another<div id="app">
<my-component attr="..."></my-component>
</div>
on which the Vue framework must be activated like this:
<script>
Vue.customElement('my-component', MyComponent.default);
new Vue({ el: '#app' });
</script>
index-prod-standalone.html
: demo of using the 'standalone' web-component
build.
<my-component>
tag can be used anywhere on the web page.index-prods.html
: this includes both index-prod-slim.html
and
index-prod-standalone.html
in two <iframe>s on the same web page.
This enables us to verify at one glance (automatically after npm build
)
that both bundle types still work correctly.
Read more in index-*.*
's comments, on the small differences in use
for the three build versions / consumer types.