TypeScript/ES7 Decorators to create Vuex modules declaratively

Last update: Aug 12, 2022

vuex-module-decorators

Usage Guide Detailed Guide: https://championswimmer.in/vuex-module-decorators/

Typescript/ES7 Decorators to make Vuex modules a breeze

Build Status npm:size:gzip cdn:min:gzip codecov npm npm npm type definitions Maintainability Codacy Badge codebeat badge Total alerts Language grade: JavaScript

Patrons

While I have a day job and I really maintain open source libraries for fun, any sponsors are extremely graciously thanked for their contributions, and goes a long way 😇 ❤️

CHANGELOG

  • There are major type-checking changes (could be breaking) in v0.9.7

  • There are major usage improvements (non backwards compatible) in 0.8.0

Please check CHANGELOG

Examples

Read the rest of the README to figure out how to use, or if you readily want to jump into a production codebase and see how this is used, you can check out -

Installation

npm install -D vuex-module-decorators

Babel 6/7

NOTE This is not necessary for [email protected] projects, since @vue/babel-preset-app already includes this plugin

  1. You need to install babel-plugin-transform-decorators

TypeScript

  1. set experimentalDecorators to true
  2. For reduced code with decorators, set importHelpers: true in tsconfig.json
  3. (only for TypeScript 2) set emitHelpers: true in tsconfig.json

Configuration

Using with target: es5

NOTE Since version 0.9.3 we distribute as ES5, so this section is applicable only to v0.9.2 and below

This package generates code in es2015 format. If your Vue project targets ES6 or ES2015 then you need not do anything. But in case your project uses es5 target (to support old browsers), then you need to tell Vue CLI / Babel to transpile this package.

// in your vue.config.js
module.exports = {
  /* ... other settings */
  transpileDependencies: ['vuex-module-decorators']
}

Usage

The conventional old & boring way

Remember how vuex modules used to be made ?

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

Hello Decorators !

Well not anymore. Now you get better syntax. Inspired by vue-class-component

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module
export default class Counter2 extends VuexModule {
  count = 0

  @Mutation
  increment(delta: number) {
    this.count += delta
  }
  @Mutation
  decrement(delta: number) {
    this.count -= delta
  }

  // action 'incr' commits mutation 'increment' when done with return value as payload
  @Action({ commit: 'increment' })
  incr() {
    return 5
  }
  // action 'decr' commits mutation 'decrement' when done with return value as payload
  @Action({ commit: 'decrement' })
  decr() {
    return 5
  }
}

async MutationAction === magic

Want to see something even better ?

import { Module, VuexModule, MutationAction } from 'vuex-module-decorators'
import { ConferencesEntity, EventsEntity } from '@/models/definitions'

@Module
export default class HGAPIModule extends VuexModule {
  conferences: Array<ConferencesEntity> = []
  events: Array<EventsEntity> = []

  // 'events' and 'conferences' are replaced by returned object
  // whose shape must be `{events: [...], conferences: [...] }`
  @MutationAction({ mutate: ['events', 'conferences'] })
  async fetchAll() {
    const response: Response = await getJSON('https://hasgeek.github.io/events/api/events.json')
    return response
  }
}

Automatic getter detection

@Module
class MyModule extends VuexModule {
  wheels = 2

  @Mutation
  incrWheels(extra) {
    this.wheels += extra
  }

  get axles() {
    return this.wheels / 2
  }
}

this is turned into the equivalent

const module = {
  state: { wheels: 2 },
  mutations: {
    incrWheels(state, extra) {
      state.wheels += extra
    }
  },
  getters: {
    axles: (state) => state.wheels / 2
  }
}

Putting into the store

Use the modules just like you would earlier

import Vue from 'nativescript-vue'
import Vuex, { Module } from 'vuex'

import counter from './modules/Counter2'
import hgapi from './modules/HGAPIModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  modules: {
    counter,
    hgapi
  }
})

Module re-use, use with NuxtJS

If you need to support module reuse or to use modules with NuxtJS, you can have a state factory function generated instead of a static state object instance by using stateFactory option to @Module, like so:

@Module({ stateFactory: true })
class MyModule extends VuexModule {
  wheels = 2

  @Mutation
  incrWheels(extra) {
    this.wheels += extra
  }

  get axles() {
    return this.wheels / 2
  }
}

this is turned into the equivalent

const module = {
  state() {
    return { wheels: 2 }
  },

  mutations: {
    incrWheels(state, extra) {
      state.wheels += extra
    }
  },
  getters: {
    axles: (state) => state.wheels / 2
  }
}

Dynamic Modules

Vuex allows us to register modules into store at runtime after store is constructed. We can do the following to create dynamic modules

interface StoreType {
  mm: MyModule
}
// Declare empty store first
const store = new Vuex.Store<StoreType>({})

// Create module later in your code (it will register itself automatically)
// In the decorator we pass the store object into which module is injected
// NOTE: When you set dynamic true, make sure you give module a name
@Module({ dynamic: true, store: store, name: 'mm' })
class MyModule extends VuexModule {
  count = 0

  @Mutation
  incrCount(delta) {
    this.count += delta
  }
}

If you would like to preserve the state e.g when loading in the state from vuex-persist

...

-- @Module({ dynamic: true, store: store, name: 'mm' })
++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: true })
class MyModule extends VuexModule {

...

Or when it doesn't have a initial state and you load the state from the localStorage

...

-- @Module({ dynamic: true, store: store, name: 'mm' })
++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })
class MyModule extends VuexModule {

...

Accessing modules with NuxtJS

There are many possible ways to construct your modules. Here is one way for drop-in use with NuxtJS (you simply need to add your modules to ~/utils/store-accessor.ts and then just import the modules from ~/store):

~/store/index.ts:

import { Store } from 'vuex'
import { initialiseStores } from '~/utils/store-accessor'
const initializer = (store: Store<any>) => initialiseStores(store)
export const plugins = [initializer]
export * from '~/utils/store-accessor'

~/utils/store-accessor.ts:

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import example from '~/store/example'

let exampleStore: example

function initialiseStores(store: Store<any>): void {
  exampleStore = getModule(example, store)
}

export { initialiseStores, exampleStore }

Now you can access stores in a type-safe way by doing the following from a component or page - no extra initialization required.

import { exampleStore } from '~/store'
...
someMethod() {
  return exampleStore.exampleGetter
}

Using the decorators with ServerSideRender

When SSR is involved the store is recreated on each request. Every time the module is accessed using getModule function the current store instance must be provided and the module must be manually registered to the root store modules

Example

// store/modules/MyStoreModule.ts
import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module({
  name: 'modules/MyStoreModule',
  namespaced: true,
  stateFactory: true,
})
export default class MyStoreModule extends VuexModule {
  public test: string = 'initial'

  @Mutation
  public setTest(val: string) {
    this.test = val
  }
}


// store/index.ts
import Vuex from 'vuex'
import MyStoreModule from '~/store/modules/MyStoreModule'

export function createStore() {
  return new Vuex.Store({
    modules: {
      MyStoreModule,
    }
  })
}

// components/Random.tsx
import { Component, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import MyStoreModule from '~/store/modules/MyStoreModule'

@Component
export default class extends Vue {
    public created() {
        const MyModuleInstance = getModule(MyStoreModule, this.$store);
        // Do stuff with module
        MyModuleInstance.setTest('random')
    }
}

Configuration

There is a global configuration object that can be used to set options across the whole module:

import { config } from 'vuex-module-decorators'
// Set rawError to true by default on all @Action decorators
config.rawError = true

GitHub

https://github.com/championswimmer/vuex-module-decorators
Comments
  • 1. Added support for vuex-persist

    Hello,

    So when researching this I found this commit: https://github.com/vuejs/vuex/pull/837

    It essentially allows you to preserve the state when registering a module dynamically. Right now it just uses the default values and overrides the state. (which makes you unable to use vuex-persist for example. Might be others as well)

    So now you can add preserveState to @Module as a option.

    Also took the test from #47 hope you don't mind 😉 @JohnCampionJr

    I believe this PR will fix/close: #44 #46 #47 ... maybe others

    Thanks, Bart

    Reviewed by Kapulara at 2019-03-08 22:59
  • 2. How do I access one module from another?

    Using NuxtJS (with TypeScript) I seem to have to specifically provide the store when I use getModule even though I have not defined my modules as dynamic. I cannot provide the store on the @module statement because I cannot import a store it seems - it isn't created at the point of the import.

    This being so, I have to use getModule(MyModule, this.$store) in my pages/components. So how do I now access (for example) a getter from ModuleB from an action in ModuleA?

    I am expecting to do something like this: ModuleA

    import ModuleB from './moduleb`;
    import { getModule } from 'vuex-module-decorators';
    
    @Action
        public async myAction(payload: IPayload): Promise<void> {
            const moduleB = getModule(ModuleB, <I need the store here>);
            const someModuleBData = moduleB.someModuleBGetter;
        }
    

    Where do I get the store from?

    Reviewed by kpturner at 2019-01-05 12:31
  • 3. Examples of how to use the modules in a Vue component

    Having been frustrated by vuex-typescript I thought I would give this ago but I find that I am struggling without, apparently, any examples of how to import and use the modules (and the getters, actions etc) in a standard Typescript Vue component.

    It looks like it could be a useful library but the README is too lightweight at the moment. Any chance of some better, more complete examples?

    Reviewed by kpturner at 2019-01-02 18:00
  • 4. Namespaces do not function. Throws "ERR_ACTION_ACCESS_UNDEFINED" when using namespaces

    I setup namespaces for my Vuex modules, and after that the following error is thrown whenever I try and access an action:

    ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? That works only in dynamic modules.

    Vuex Module:

    @Module({ namespaced: true, name: 'Accounts' })
    export default class AccountStore extends VuexModule {
    
      accounts: AccountModel[] = [];
    
      @Mutation
      SetAccounts(accounts: AccountModel[]){
        this.accounts = accounts;
      }
    
      @Action({commit: 'SetAccounts'})
      FetchAll(){
        axios.get('/api/accounts').then((response) => {
          return response.data;
        })
      }
    }
    

    Store initialization:

    Vue.use(Vuex);
    
    export default new Vuex.Store({
        state:{},
        modules:{
            Accounts: AccountStore
        }
    })
    

    Calling It:

    this.$store.dispatch('Accounts/FetchAll');
    

    If I remove the namespace bits and call this.$store.dispatch(FetchAll'); it works as expected.

    I assume this is a problem with my usage of this?

    Reviewed by douglasg14b at 2019-01-21 07:10
  • 5. Support Vuex 4

    Hi) Can you please tell me, I have such a mistake:

    #11 2.880 npm ERR! code ERESOLVE #11 2.885 npm ERR! ERESOLVE unable to resolve dependency tree #11 2.885 npm ERR! #11 2.885 npm ERR! While resolving: [email protected] #11 2.885 npm ERR! Found: [email protected] #11 2.886 npm ERR! node_modules/vuex #11 2.886 npm ERR! [email protected]"^4.0.0-0" from the root project #11 2.886 npm ERR! #11 2.886 npm ERR! Could not resolve dependency: #11 2.886 npm ERR! peer [email protected]"3" from [email protected] #11 2.887 npm ERR! node_modules/vuex-module-decorators #11 2.887 npm ERR! dev [email protected]"^1.0.1" from the root project #11 2.887 npm ERR! #11 2.887 npm ERR! Fix the upstream dependency conflict, or retry #11 2.887 npm ERR! this command with --force, or --legacy-peer-deps #11 2.887 npm ERR! to accept an incorrect (and potentially broken) dependency resolution. #11 2.888 npm ERR! #11 2.888 npm ERR! See /root/.npm/eresolve-report.txt for a full report. #11 2.898 #11 2.898 npm ERR! A complete log of this run can be found in: #11 2.898 npm ERR! /root/.npm/_logs/2021-04-13T13_58_19_924Z-debug.log

    I understand correctly that this is due to the fact that vuex-module-decorators does not support vuex 4. If so, tell me whether it will support it or it is not yet in the plans?

    Reviewed by UDK at 2021-04-13 14:22
  • 6. Hotfix/ssr support

    SSR breaks the modules by always using the Module version generated from the first request that reaches the server and creates the Module... then the vuex store used during this request is also shared between all consecutive requests.

    This is because the generated instance of the @Module class is stored in its static property _statics and cached for later use (later use being also later requests made to the server)

    This changes the behaviour so that the store provided to getModule() is used to save the generated instace of the @Module... store being recreated in SSR on each request ensures that the module is also recreated on each request.

    More info in #146

    Reviewed by Sharsie at 2019-07-29 13:44
  • 7. Cross-request state pollution ?

    I run into the classic cross-request state pollution scenario that is most often encountered when not using the stateFactory option. This is custom vue ssr project, modeled after the vue hackernews 2.0 repo.

    I create my modules like this:

    @Module({ stateFactory: true, namespaced: true, name: 'user' })
    export class UserStoreModule extends VuexModule {
        public user: IUserModuleState['user'] = {}
    }
    

    This is my createStore function:

    const createStore = () => {
        
        return new Vuex.Store({
            modules: {
                user: UserStoreModule
            }
        })
    }
    export default createStore
    

    Module access is like this:

    const userModule = getModule(UserStoreModule, this.$store)
    

    I have setup a test environment to check if userModule.user.id is set just after initializing the store and module, and userModule.user.id is indeed set with the value from the previous request. When I modify the file dist/cjs/index.js and change: modOpt.store = modOpt.store || store; to modOpt.store = store || modOpt.store;

    and

    function getModule(moduleClass, store) {
        if (moduleClass._statics) {
            return moduleClass._statics;
        }
    

    to

    function getModule(moduleClass, store) {
        if (moduleClass._statics && !store) {
            return moduleClass._statics;
        } 
    

    This issue goes away, it looks the previous state is stored and reused somewhere and forcing to use the store provided to getModule() helps prevent this issue.

    Strangely enough, I can't reproduce this with a clean nuxt project and the nuxt way of setting it up as seen in the readme. Does nuxt do some magic by creating a new module, other than my user: UserStoreModule initializing ?

    Reviewed by arenddeboer at 2019-07-10 09:25
  • 8. Dynamic modules duplicates (registered multiple times)

    Hi,

    I'm using dynamic modules in a very standard way and sometimes i get the following error: [vuex] duplicate getter key: namespace/getter

    Which means that registerModule is being called even though the module has already been registered.

    I wanted to implement what is suggested in this issue but I believe this has to be done inside of vuex-module-decorators since it handles the registering automatically.

    Reviewed by macdows at 2019-05-29 06:55
  • 9. How to use mapState/Mutation/Action in Component?

    Hi,

    it would be a huge help to add to the docs how to access state/getters, commit mutations and dispatch actions.

    thank you very much for your work and help.

    this seems a bit verbose:

    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator'
    import { mapState } from 'vuex'
    
    @Component({
      computed: {
        ...mapState('core', ['language'])
      }
    })
    export default class HelloWorld extends Vue {
      public language!: string // is assigned via mapState
    
      setLanguage(lang: string) {
        this.$store.commit('core/setLanguage', lang)
      }
    }
    </script>
    

    I am sure there is a more elegant way to do this?

    Reviewed by pingustar at 2019-04-13 16:41
  • 10. Project Abandoned? Alternatives?

    I just wanted to raise an issue on here as it appears this project is no longer being actively worked on. @championswimmer would that be correct? Apologies if I've missed something.

    I completely understand weariness maintaining an Open Source project. Thank you for all the time and effort you have put in.

    Feel free to close if it is still under development.

    Reviewed by GerryWilko at 2021-01-25 18:27
  • 11. Any examples of production codebases without dynamic modules?

    I'm having troubles with dynamic modules (something wrong with my getModule() calls not returning the right thing), but I don't need them to be dynamic. Is there a good example with a few modules where they're not dynamic? It would help to see a whole working system.

    Reviewed by garyo at 2019-09-17 21:24
  • 12. Using vuex-module-decorators with vue2

    I'm going to install vuex-module-decorators in nuxt-typescript with the Vue 2 version and keep getting the follow errors:

    image

    Which version I should install to get rid of peerDependencies errors ?

    Reviewed by PhongPhamdt at 2022-08-02 07:14
  • 13. Bump terser from 4.6.3 to 4.8.1

    Bumps terser from 4.6.3 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    Reviewed by dependabot[bot] at 2022-07-21 17:04
  • 14. Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    Reviewed by dependabot[bot] at 2022-06-01 21:54
  • 15. MutationAction never commits changes, if component switched

    Hello :) I encountered a problem with MutationActions, when closing/switching the component, from which the action was triggered, before the action fully resolved. Then any functions still running on the original componenwill not get the data commited by the MutationAction, when accessing the store.

    Example: From my starting component, I use the mutationAction fetchResults to fetch 2 results. Before the results are received, I switch to a different component, because I get bored waiting for the results to arrive and just click around. The component from which the MutationAction was triggered is still expecting to receive the results and to run some result processing (for visualization) in the background.

    Problem: When this component access the store to read the results - the result variables are still empty. ONLY HAPPENS IF switched to another component before the mutationAction is finished.

    COMPONENT

    // fetch result and create new result layers
        this.$store
          .dispatch("abm/fetchResults")
          // sucessfully got result
          .then(() => {
            // this.result accesses a getter on the store variable
            console.log(this.result) // prints NULL
            debugger;  // ----> this.result in the console prints NULL; using console to access the exact same store getter as this.result -> prints the expected result
    

    STORE I am using the exact example provided in the ReadMe:

    
    @MutationAction({ mutate: ["result1", "result2"] })
      async fetchResults(): Promise<SimulationResponse> {
        const response: SimulationResponse =
          await this.getResults(
            this.config,
          );
    
         return response
      }
    
    Reviewed by andredaa at 2022-05-04 16:46
  • 16. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    Reviewed by dependabot[bot] at 2022-04-28 16:32
  • 17. vue.reactive is not a function (Nuxtjs, Typescript)

    I wanna use this package for making a store in my Typescript based Nuxt project. But i get a error! its just say vue.reactive is not a function.

    Info

    nuxt: "2.15.8" vue: "2.6.14"

    store.ts

    import { Module, VuexModule } from 'vuex-module-decorators'
    
    @Module
    export default class MyModule extends VuexModule {
      someField: string = 'somedata'
    }
    

    Error

    Screenshot from 2022-04-21 17-15-16

    Can anyone help me please?

    Reviewed by tahadostifam at 2022-04-21 12:47
Sets of ECMAScript / Typescript decorators that helps you write Vue component easily.

VueTyped VueTyped contains sets of ECMAScript / Typescript decorators that helps you write Vue component easily. What is this for? Normaly you wrote V

Jul 21, 2022
Typescript decorators to make vue feel more typescripty
Typescript decorators to make vue feel more typescripty

vue-typescript Typescript decorators to make vue play nice with typescript Why do i need this? I built this mostly to remove the red squiggles on VSCo

Apr 10, 2022
[DEPRECATED] Decorators to use TypeScript classes as Vue.js 2.0 components

❄️ DEPRECATION NOTICE ❄️ Official TypeScript support has been added to Vue.js 2.x and the old bindings have been changed considerably since this repos

Aug 6, 2021
TypeScript declaration file that allows using 'import' with *.vue files

vue-typescript-import-dts TypeScript declaration file that allows using import with *.vue files. The primary use case is a bundler environment like we

Feb 23, 2022
Typescript decorator for Vue mixins

Vue Mixin Decorator This library fully depends on vue-class-component. Most ideas and code are stolen borrowed from @HerringtonDarkholme and his av-ts

Aug 5, 2022
Generate TypeScript declaration files for .vue files

vuedts This repository is fork from https://github.com/ktsn/vuetype Because that repository has not maintained now. Generate TypeScript declaration fi

Jan 5, 2022
Vue 3 Typescript example with Axios: CRUD application with Vue Router
Vue 3 Typescript example with Axios: CRUD application with Vue Router

Vue 3 Typescript example with Axios & Vue Router: Build CRUD App Build a Vue.js 3 Typescript example to consume REST APIs, display and modify data usi

Aug 16, 2022
A simple and self-hosted web radio management, inspired by AzuraCast. Developed with Typescript

ThRadio ThRadio is strongly inspired by AzuraCast, I started the project because AzuraCast had many features that I didn't need. For this project the

Jul 30, 2022
Vue 3 + TypeScript + TailwindCss Components Library UI

How To npm install tailpieces or yarn add tailpieces Add tailpieces to purge Road Map Add tests to project Add translations to classes and components

Feb 14, 2022
Vue, Nodejs, Mongodb con Typescript

MEVN with Typescript Requeriments To execute this project you need Mongodb installed and running. Installation of the project Execute the following co

Jul 5, 2022
Vue 3 Typescript example with Axios & Vue Router: Build CRUD App

Vue 3 Typescript example with Axios & Vue Router: Build CRUD App Build a Vue.js 3 Typescript example to consume REST APIs, display and modify data usi

Jul 14, 2022
Using highcharts with Vue and TypeScript

highcharts Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and

Jul 30, 2022
Test vue typescript - Hotel views
Test vue typescript - Hotel views

vue test https://test-vue-typescript.vercel.app/ Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minif

May 5, 2022
First time trying TypeScript with Vue.

Hyrule Jobs Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lin

Jan 20, 2022
OctopusTravel vue nuxt.js typescript decorator vuetify project
OctopusTravel vue nuxt.js typescript decorator vuetify project

Nuxt.js codebase(typescript, class-component) containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec a

Feb 13, 2022
Various tools for typescript, nodejs and vuejs development

Various tools for typescript, nodejs and vuejs development

Apr 10, 2019
Typescript class decorators for vuex modules

vuex-class-modules This is yet another package to introduce a simple type-safe class style syntax for your vuex modules, inspired by vue-class-compone

Jul 6, 2022
:chart_with_upwards_trend: Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind
:chart_with_upwards_trend: Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind

vuex-feature-scoped-structure by igeligel A Vue.js/Vuex project showcasing a complex but scalable store structure. This project was created in coopera

Jun 17, 2022
Sets of ECMAScript / Typescript decorators that helps you write Vue component easily.

VueTyped VueTyped contains sets of ECMAScript / Typescript decorators that helps you write Vue component easily. What is this for? Normaly you wrote V

Jul 21, 2022
Typescript decorators to make vue feel more typescripty
Typescript decorators to make vue feel more typescripty

vue-typescript Typescript decorators to make vue play nice with typescript Why do i need this? I built this mostly to remove the red squiggles on VSCo

Apr 10, 2022