vulture-loader v0.1.1

Vulture Loader

A Typescript decorator for class-style Vue component with Webpack loader

Example

app.html

<div>
  Hello
  <span class="message">{{ message }}</span>
  {{ propMessage }}
  {{ propEnding }}
  <button 
    :disabled="buttonDisabled"
    @click.once="changeMessage" 
  >Refuse</button>
</div>

app.html preview

Hello Cruel World !

app.html preview (after click)

Hello Merciful World !

app.ts

import Vue from 'vue'

import { Component, Prop, Watch, Method } from '../src/index'

@Component({
  template: require('./app.html'),
})
export default class App extends Vue {

  // data
  message = 'Cruel'

  // props
  @Prop({
    type: String
  })
  propMessage: string

  @Prop()
  propEnding: string

  // methods
  @Method()
  changeMessage($event: Event) {
    this.message = 'Merciful'
  }

  // watch
  @Watch('message')
  watchMessage(val: string, oldVal: string) {
    console.log('new: %s, old: %s', val, oldVal)
  }

  // computed
  get buttonDisabled () {
    return this.message !== 'Cruel'
  }
}

index.ts

import Vue from 'vue'
import App from './app'

// mount
const app = new Vue({
  el: '#app',
  render: h => h(App, {
    props: {
      propMessage: 'World',
      propEnding: '!',
    }
  })
})

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ['awesome-typescript-loader'],
      },
      {
        test: /\.html$/,
        use: ['vulture-loader'],
      },
    ],
  },
  // ...
}

Source Code

See example/

How to Run it

1. open terminal
2. type npm run dev, wait for finishing
3. type open example/index.html

Features

• Component
• Pre-compile Template
• ES2015 in Templates
• Hot Reload
• Internal Hooks
• Prop
• Computed
• Watch
• Method
• Global CSS
• Scoped CSS
• CSS Modules
• src (HTMl, CSS)