This package has been deprecated

    Author message:

    Please use nuxt-property-decorator instead.

    nuxt-class-component
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i nuxt-class-component

    DownloadsWeekly Downloads

    1,613

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    68.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • alexchopin
    • atinux
    • breakingrobot
    • clarkdo
    • johnlindquist
    • pi0