Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/altipla-consulting/vue-hot-reload-component
Init Vue components in different files with Hot Reload support.
https://github.com/altipla-consulting/vue-hot-reload-component
hot-reload vue
Last synced: about 1 month ago
JSON representation
Init Vue components in different files with Hot Reload support.
- Host: GitHub
- URL: https://github.com/altipla-consulting/vue-hot-reload-component
- Owner: altipla-consulting
- License: mit
- Created: 2018-06-25T11:37:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T22:08:09.000Z (over 6 years ago)
- Last Synced: 2024-11-13T16:12:01.051Z (about 2 months ago)
- Topics: hot-reload, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@altipla/vue-hot-reload-component
- Size: 3.91 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-hot-reload-component
Init Vue components in different files with Hot Reload support.
Splitting 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.
This 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.
## Install
```shell
npm i --save-dev @altipla/vue-hot-reload-component
```
## Example
##### `checkout-hotel.js`
```js
import initComponent from 'vue-hot-reload-component';
import template from './checkout-hotel.vhtml';
import './checkout-hotel.scss';
export default initComponent(module, template, {
name: 'checkout-hotel',
data() {
return {
other: 'options',
};
},
methods: {
likeAnyOtherComponent() {
},
},
});
```
##### `checkout-hotel.vhtml`
```html
Checkout hotel
```
##### `checkout-hotel.scss`
```scss
h2 {
color: royalblue;
}
```
##### `webpack.config.js`
Basic 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.
```js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: true,
},
},
],
},
{
test: /\.vhtml$/,
use: [
{
loader: 'babel-loader',
options: {
parserOpts: {
strictMode: false,
},
babelrc: true,
},
},
{
loader: 'vue-template-loader',
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
// Remove the following line in production.
'vue-hot-reload-component$': 'vue-hot-reload-component/index.dev.js',
},
},
};
```
## Contributing
You can make pull requests or create issues in GitHub.
## License
[MIT License](LICENSE)