├── .babelrc
├── .gitignore
├── README.md
├── demo
└── index.html
├── package.json
├── src
├── components
│ └── ShareButtonsComponent.vue
└── main.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | { "presets": [ ["es2015", {"modules": false}] ] }
2 |
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | /node_modules
3 | .idea
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue Custom Element Bundler
2 |
3 | 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.**
4 |
5 | Refer to [this post on vuetips.com](http://vuetips.com/vue-web-components) for more information.
6 |
7 | Check out [this example using rollup.js](https://github.com/kartsims/vue-customelement-bundler/tree/rollup) for a 25% lighter file (when gzipped) !
8 |
9 | ```html
10 |
11 |
12 |
13 | ...
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | ```
24 |
25 | ## How it works
26 |
27 | Components are registered in `src/main.js`.
28 |
29 | Component code is in `src/components/ComponentName.vue`.
30 |
31 | To add a component :
32 |
33 | - Add a `.vue` file in `src/components`
34 | - Register the component in `src/main.js`
35 |
36 | ## Development
37 |
38 | To test your components :
39 |
40 | - Launch webpack : `npm run dev` (watch mode)
41 | - Open `demo/index.html` in a browser
42 | - Edit `src/main.js` or your component file
43 | - Refresh the page
44 |
45 | ## Bundle a release
46 |
47 | ```
48 | npm run build
49 | ```
50 |
51 | File will be placed in `dist/my-vue-component.js`.
52 |
53 | Refer to `webpack.config.js` for customization options.
54 |
55 | ## Browser compability
56 |
57 | You may add the web component polyfill if you wish to support older browsers.
58 |
59 | ```
60 | import 'document-register-element/build/document-register-element'
61 | ```
62 |
63 | Thanks to @visualjerk for this proposal.
64 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Congratulations !
5 | Your have bundled your Vue.js component to fit any HTML/JS app.
6 | The result of your great work :
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-customelement-bundler",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "postinstall": "npm run build",
9 | "build": "rimraf dist && cross-env NODE_ENV=production webpack",
10 | "dev": "webpack --watch"
11 | },
12 | "author": "",
13 | "license": "MIT",
14 | "repository" :
15 | {
16 | "type" : "git",
17 | "url" : "https://github.com/kartsims/vue-customelement-bundler.git"
18 | },
19 | "devDependencies": {
20 | "babel-core": "^6.24.0",
21 | "babel-loader": "^6.4.1",
22 | "babel-preset-es2015": "^6.24.0",
23 | "cross-env": "^4.0.0",
24 | "css-loader": "^0.26.2",
25 | "file-loader": "^0.11.1",
26 | "rimraf": "^2.6.1",
27 | "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
28 | "vue": "^2.2.6",
29 | "vue-custom-element": "^1.0.13",
30 | "vue-loader": "^11.3.4",
31 | "vue-style-loader": "^2.0.5",
32 | "vue-template-compiler": "^2.2.6",
33 | "webpack": "^2.3.3"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/ShareButtonsComponent.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
25 |
26 |
41 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | // include vue-custom-element plugin to Vue
4 | import VueCustomElement from 'vue-custom-element'
5 | Vue.use(VueCustomElement)
6 |
7 | // import and register your component(s)
8 | import ShareButtonsComponent from './components/ShareButtonsComponent'
9 | Vue.customElement('share-buttons', ShareButtonsComponent)
10 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, 'dist'),
8 | filename: 'my-vue-component.js'
9 | },
10 | resolve: {
11 | extensions: ['.js', '.vue'],
12 | alias: {
13 | 'vue$': 'vue/dist/vue.common.js'
14 | }
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.vue$/,
20 | use: 'vue-loader'
21 | },
22 | {
23 | test: /\.js$/,
24 | use: 'babel-loader'
25 | }
26 | ]
27 | }
28 | }
29 |
30 | if (process.env.NODE_ENV === 'production') {
31 | module.exports.devtool = '#source-map';
32 | // http://vue-loader.vuejs.org/en/workflow/production.html
33 | module.exports.plugins = (module.exports.plugins || []).concat([
34 | new webpack.DefinePlugin({
35 | 'process.env': {
36 | NODE_ENV: '"production"'
37 | }
38 | }),
39 | new webpack.optimize.UglifyJsPlugin({
40 | // uncomment to enable sourcemap
41 | // sourceMap: true,
42 | compress: {
43 | warnings: false
44 | }
45 | }),
46 | new webpack.LoaderOptionsPlugin({
47 | minimize: true
48 | })
49 | ])
50 | }
51 |
--------------------------------------------------------------------------------