Skip to content
This repository has been archived by the owner on Jan 24, 2020. It is now read-only.

Enable hot module replacement (HMR) on your typescript vue components

License

Notifications You must be signed in to change notification settings

mrellipse/vue-hot-typescript-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-hot-typescript-loader

Enable hot module replacement (HMR) on your typescript vue components.

This loader is for Vue components written in .ts. If you are using .vue file, you don't need this loader.

This code is a based on vue-hot-reload-loader.

Installation

# NPM
$ npm install --save-dev vue-hot-typescript-loader

Usage

Webpack

Ensure the webpack entry points for your debug build includes HMR code

module.exports = {
  entry: {
    app: [ 'webpack-hot-middleware/client', './src/app.ts']
  }
}

Update your webpack config to apply vue-hot-typescript-loader after initial compilation has occured

module.exports = {
  module: {
    rules: [{
            test: /\.ts$/,
            use: ['vue-hot-typescript-loader', 'ts-loader'],
            include: path.resolve(__dirname, 'path/to/components')
        }]
  }
}

Source Files

Supports one class per file. As long as the class extends Vue and in turn is exported, it will be created with HMR support at runtime.

es6

import * as Vue from 'vue';

export class MyComponent extends Vue {}
import { default as VueAlias } from 'vue';

export class MyComponent extends VueAlias {}

commonjs

let vue = require('vue'); // commonjs import

class MyComponent extends Vue {}

export default MyComponent;

Authors

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

About

Enable hot module replacement (HMR) on your typescript vue components

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published