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
npm i --save-dev @altipla/vue-hot-reload-componentExample
checkout-hotel.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
<h2>Checkout hotel</h2>
checkout-hotel.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.
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.