nuxt-class-component
ES and Tyepscript Class Components Decorators for Nuxt.js
Last updated 2 years ago by clarkdo .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install nuxt-class-component 
SYNC missed versions from official npm registry.

Nuxt Class Component

ES and Typescript Class Components Decorators for Nuxt.js extending vue-class-component


Installation

npm install --save nuxt-class-component

# or

yarn add nuxt-class-component

Babel Instructions

npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

# or

yarn add --dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

Then you can configure Babel plugins on nuxt.config.js - Plugin order is important (see here):

module.exports = {
  build: {
    babel: {
      plugins: ['transform-decorators-legacy', 'transform-class-properties']
    }
  }
}

Typescript Instructions

You will need to enable [experimentalDecorators] on your Typescript compiler.(http://www.typescriptlang.org/docs/handbook/decorators.html).

  • Using Typescript Compiler argument --experimentalDecorators like this:
tsc --experimentalDecorators
  • Using tsconfig.json:
{
  "compilerOptions": {
    "experimentalDecorators": true,
    ...
  }
}

Usage

See vue-class-component, vuex-class documentation.

You can also see the official TypeScript example of Nuxt.js.

Example

import Vue from 'vue'
import Component from 'nuxt-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const Module = namespace('path/to/module')

@Component({
  props: {
    propMessage: String
  }
})
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @Module.Getter('foo') moduleGetterFoo
  @Module.Action('foo') moduleActionFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hooks
  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }

  mounted () {
    this.greet()
  }

  fetch () {
    // fetch data
  }

  async asyncData () {
    // async fetching data
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}

License

MIT License - Copyright (c) Nuxt Community

Current Tags

  • 1.3.0                                ...           latest (2 years ago)

11 Versions

  • 1.3.0                                ...           2 years ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Downloads
Today 0
This Week 15
This Month 109
Last Day 11
Last Week 30
Last Month 84
Dependencies (2)
Dev Dependencies (4)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |