{"_id":"@altipla/vue-hot-reload-component","_rev":"2-b056b7a255e2d5a5d8eb4aa550e7f13d","name":"@altipla/vue-hot-reload-component","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@altipla/vue-hot-reload-component","version":"0.1.0","description":"Init Vue components in different files with Hot Reload support.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-hot-reload-component.git"},"keywords":["vue","hot-reload"],"author":{"name":"Altipla Consulting"},"license":"MIT","bugs":{"url":"https://github.com/altipla-consulting/vue-hot-reload-component/issues"},"homepage":"https://github.com/altipla-consulting/vue-hot-reload-component","gitHead":"d8f1e6a5d4aec9e0cca17064da22128e59a608d2","_id":"@altipla/vue-hot-reload-component@0.1.0","_npmVersion":"6.1.0","_nodeVersion":"10.5.0","_npmUser":{"name":"ernestoalejo","email":"ernestokarim@gmail.com"},"dist":{"integrity":"sha512-MIt+L+oI9L0yLpY4snKs505BuSOqccVgEB5dXw7PASxDHe8+Pp/5cMuI0bWKkn0A1WLGb/bpr95eCEcobxNoUw==","shasum":"2654b637929267633a22c662909a37b7156c1f37","tarball":"https://registry.npmjs.org/@altipla/vue-hot-reload-component/-/vue-hot-reload-component-0.1.0.tgz","fileCount":4,"unpackedSize":4642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMNiHCRA9TVsSAnZWagAA8v0P/jwuoH5N2zJ/yNL/TbAa\nr4Sy/i2GUryMwknDk1mnf0UWUuSW9sxIUmZmCndSKw5hRrrFVPLaaAvLOxmI\ntJoRaBED3De4nHjvShTWqVUj/UhKe+n7yAD6rUiPcTHNDNnjz668rzs6WW13\nRSz8j7GbYmBv4SXsylbCIQSoUDu45+xZktTGhxlkfTx5vBRKUSgENhAHZlKj\n8tH5alU679iX9fjE/FnGb8QM65CDSy+0pwALEaDhWoCvxcdF7BdAwncexNoi\ndwv6u6Pi5uaBKhjdJ+1siz6ybNylvEiOH1KeD6N1ZQnEA+d6o74GdsRXn7WB\nrlGKdGDrqfT9rOKxiC00CkVrI5Nso7itOrZpy5AwHc6iXG5DdLZl1wZam9IF\nPSfn/uooyqY+pwIRJWGP1OgFOKTr40v8gX9CgqwgWJZ+Pwhiauw4oWohNFSf\nb6LclajQ03tHlo1MHSn4BNq8zb898eO05Ci9SHe9jA0FOFrmkXxdcV6a1T8Z\nk7wHev1FhDV3zlr/PWHwksIdaMRtLODLRdlde9s7i5d4M+aM1o4gFdzwrSv3\nKMKH+wmUKQIhRXITOq+mnWIIUj5bJDyo3GMw21xBgjnFOXd5hu6rEY6ZUj0Y\nKPhOrZI52neOGtLGz00NxVc84mEyDM0bucqMKodg/KkBk9zm1F3vfWv4HzCS\ngMX1\r\n=/ICh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBU+gzDkiGzFiZTYTi2VaFXtLdZG21V82OfM3bIrdT1LAiAcxx8Rwf3XIUFgaF0yUoGuHvb7ibE+LY1jWsO0t3Nang=="}]},"maintainers":[{"name":"ernestoalejo","email":"ernestokarim@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-hot-reload-component_0.1.0_1529927815470_0.726919424560946"},"_hasShrinkwrap":false},"1.0.0":{"name":"@altipla/vue-hot-reload-component","version":"1.0.0","description":"Init Vue components in different files with Hot Reload support.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-hot-reload-component.git"},"keywords":["vue","hot-reload"],"author":{"name":"Altipla Consulting"},"license":"MIT","bugs":{"url":"https://github.com/altipla-consulting/vue-hot-reload-component/issues"},"homepage":"https://github.com/altipla-consulting/vue-hot-reload-component","gitHead":"d8f91b69da3b969e2d0e9c2636b3c514c2f181cc","_id":"@altipla/vue-hot-reload-component@1.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.6.0","_npmUser":{"name":"ernestoalejo","email":"ernestokarim@gmail.com"},"dist":{"integrity":"sha512-arlw1WRJ3lHsO4VAbawWoBi07M09zLLF8UXA826o3U9dho5Z3C3Pm7/EOH8C1wAfAAfrLlPtJFGqJMaU+dCI8g==","shasum":"9494c98af343c16e4bcbc27c1c311581dc5a81a0","tarball":"https://registry.npmjs.org/@altipla/vue-hot-reload-component/-/vue-hot-reload-component-1.0.0.tgz","fileCount":5,"unpackedSize":4876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVlIRCRA9TVsSAnZWagAAcJ8P/3w7bz37Dh0x4NccZMtA\n0bVJynbwgGFm+SPR5ZyeG1ySCyan4ivuGieC5dvjPAq8cjZVDZekGgLs5veX\nY8gNsWwjwN0EAU8S2w9tgugFrY8eig6GOkJ4DlXDuSIg65eAhTctVtb4zTGn\nlkx/o/xSUDUvVcEdpGmqYB3nZMnFh4zZY76K2H54RWR+wZzOMZ7rHBq355Pr\nYhL5RFdWV9vk4kw91fQAEylV3zga2Ijo52JyG7ZH5lE3CerHt26weoNbuGDc\nMf97ZxwOORW3ndRnoEXfkMkRj3zhLX2nj6buCCxHs7Yoe4H7NI4j8wD+Oc1N\nOA5PybpfZMbz+TN6TcsJzIBVWLPFH2O6Um9nqFfMT75BsBgodCKyOQBhIuGZ\n17lM9MJxKE3vX6xFF8rXm7USkcTIdFYieYvNPHhuYL3fF4cZzE9v+byljH/O\nVXJAYbM201SNOvhm5++cTuCbvVQZI+MNHT8VWmHKkjjOZLpESc0N9gsfVYLB\n8YjaaRf7uCgjQBHWrMPqDqtTw1xg0mEXoK3BI24Pam3ITHOphWbsyIkq5kKf\nM89mRP9ludoC8F6ZSutQPIe2MnAeY/Td7CxF0PT3Rw6wPNsZwoyvH+4kskZV\nS6LWjgRTv7Iy/7VQaPGl9yQ65umZCsdkQsIonD8qKNYvdvCm13uT62TaqOzr\ni7Qr\r\n=NOl4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz8hGknz1ZXxc0yBPSYK28GQyOwIRbUVQEo3G9S5CgfAIgJk0qFhSPSs6L8lWGIggKwDCz8Ds71YxoiTRssivOvWY="}]},"maintainers":[{"name":"ernestoalejo","email":"ernestokarim@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-hot-reload-component_1.0.0_1532383761536_0.20534582327483264"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-25T11:56:55.336Z","0.1.0":"2018-06-25T11:56:55.582Z","modified":"2022-04-04T13:40:16.808Z","1.0.0":"2018-07-23T22:09:21.605Z"},"maintainers":[{"name":"ernestoalejo","email":"ernestokarim@gmail.com"}],"description":"Init Vue components in different files with Hot Reload support.","homepage":"https://github.com/altipla-consulting/vue-hot-reload-component","keywords":["vue","hot-reload"],"repository":{"type":"git","url":"git+https://github.com/altipla-consulting/vue-hot-reload-component.git"},"author":{"name":"Altipla Consulting"},"bugs":{"url":"https://github.com/altipla-consulting/vue-hot-reload-component/issues"},"license":"MIT","readme":"\n# vue-hot-reload-component\n\nInit Vue components in different files with Hot Reload support.\n\nSplitting the code allows for separation of concerns and improves the syntax highlight support, including snnipets or other custom configurations we may have in our editor when they don't work inside `*.vue` files.\n\nThis library allows to split a `button.vue` component file in three files: `button.vhtml`, `button.js` and `button.scss`. Any change in one of these files will trigger a hot reload like the original Vue component.\n\n\n## Install\n\n```shell\nnpm i --save-dev @altipla/vue-hot-reload-component\n```\n\n\n## Example\n\n##### `checkout-hotel.js`\n\n```js\nimport initComponent from 'vue-hot-reload-component';\n\nimport template from './checkout-hotel.vhtml';\nimport './checkout-hotel.scss';\n\n\nexport default initComponent(module, template, {\n name: 'checkout-hotel',\n\n data() {\n return {\n other: 'options',\n };\n },\n\n methods: {\n likeAnyOtherComponent() {\n\n },\n },\n});\n```\n\n##### `checkout-hotel.vhtml`\n\n```html\n

Checkout hotel

\n```\n\n##### `checkout-hotel.scss`\n\n```scss\nh2 {\n color: royalblue;\n}\n```\n\n##### `webpack.config.js`\n\nBasic webpack configuration example to make this setup work. Note that the `*.vhtml` extension is not required, you can configure `*.html` for example as long as you change it too inside this file.\n\n```js\n\nconst path = require('path');\n\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loaders: ['style-loader', 'css-loader', 'sass-loader'],\n include: path.resolve(__dirname, '../'),\n },\n {\n test: /\\.css$/,\n loaders: ['style-loader', 'css-loader'],\n },\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: [\n {\n loader: 'babel-loader',\n options: {\n babelrc: true,\n },\n },\n ],\n },\n {\n test: /\\.vhtml$/,\n use: [\n {\n loader: 'babel-loader',\n options: {\n parserOpts: {\n strictMode: false,\n },\n babelrc: true,\n },\n },\n {\n loader: 'vue-template-loader',\n },\n ],\n },\n ],\n },\n plugins: [\n new VueLoaderPlugin(),\n ],\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js',\n\n // Remove the following line in production.\n 'vue-hot-reload-component$': 'vue-hot-reload-component/index.dev.js',\n },\n },\n};\n```\n\n\n## Contributing\n\nYou can make pull requests or create issues in GitHub.\n\n\n## License\n\n[MIT License](LICENSE)\n","readmeFilename":"README.md"}