vd

vue-decorators

Decorators for VueJS (beta)

Showing:

Popularity

Downloads/wk

21

Maintenance

No Maintenance Data Available

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Vue Decorators

This is Vue Decorators v1.1.7 (beta)

Vue & Vuex Decorators for ECMAscript

Dependencies

Installation

npm install --save vue-decorators

Decorators

Vue-decorators has many decorators, for example:

  • @Component or @Component({ ... })

  • @InjectComponents({ ... })

  • @Prop or @Prop({ ... })

  • @Watch or @Watch('...')

  • @Lifecycle or @Lifecycle('...')

  • @Filter or @Filter('...')

  • @Computed

  • @State or @State('...')

  • @Action or @Action('...')

  • @Getter or @Getter('...')

  • @Mutation or @Mutation('...')

Other decorators you can see in the documentation.

Example for Vue components

import Vue from 'vue'
import {
  Component,
  InjectComponents,
  Prop,
  Watch,
  Lifecycle,
  Computed,
  Filter,

  State,
  Action,
  Getter,
  Mutation
} from 'vue-decorators';
import Component1 from '...';
import Component2 from '...';

@Component
@InjectComponents({
    Component1,
    Component2
})
export class MyComponent extends Vue {
  credentials = {
    username: '',
    password: ''
  };
  otherData = 123;

  @Prop property1;
  @Prop({
    type: Number,
    default: 100
  }) property2;
  @Prop({ required: true }) property3;

  @Action login;
  @Getter currentUser;

  @Watch('otherData')
  otherDataListener(){ /* ... */ }

  @Lifecycle
  created(){ /* ... */ }

  @Computed
  computedMethod(){ /* ... */ }

  @Filter
  filterName(){ /* ... */ }

  normalVueMethod(){
    /* ... */
    this.login().then(function(){ /* ... */ });
  }
}

Example for Stores

// store/modules/auth.js
import {Module, State, Action, Getter, Mutation} from 'vue-decorators';

@Module
export default class AuthModule {
    @State currentUser = null;

    @Action
    fetchCurrentUser({commit}){
        // ...
    }

    @Getter
    getCurrentUser(state){
      return state.currentUser;
    }

    @Mutation
    attachCurrentUser(state, currentUser){
      state.currentUser = currentUser;
    }
}

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import {Store, InjectModules} from 'vue-decorators';

import auth from './modules/auth';

Vue.use(Vuex);

@Store({
  strict: true
})
@InjectModules({
  auth
})
@InjectPlugin(createLogger())
export default class AppStore extends Vuex.Store {
    @State rootExampleState = 'foo';

    @Action
    rootExampleAction(){ /* ... */ }
}

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial