TypeScript/ES7 Decorators to create Vuex modules declaratively

Overview

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
Issues
  • Added support for vuex-persist

    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

    opened by Kapulara 30
  • Class constructor VuexModule cannot be invoked without 'new'

    Class constructor VuexModule cannot be invoked without 'new'

    "Class constructor VuexModule cannot be invoked without 'new'"

    The problem exists in 0.5.0 release, with 0.4.3 everything is ok

    opened by abdullaev 27
  • How do I access one module from another?

    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?

    opened by kpturner 26
  • Examples of how to use the modules in a Vue component

    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?

    opened by kpturner 22
  • Namespaces do not function. Throws

    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?

    opened by douglasg14b 19
  • Add sample NuxtJS pattern to documentation

    Add sample NuxtJS pattern to documentation

    A sample pattern for use in NuxtJS. Very happy for any amends or suggestions.

    #80 #91 #121

    opened by danielroe 19
  • Hotfix/ssr support

    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

    opened by Sharsie 16
  • Cross-request state pollution ?

    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 ?

    opened by arenddeboer 13
  • Support Vuex 4

    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?

    opened by UDK 13
  • [quest] mutation via setters

    [quest] mutation via setters

    so that we can do this.x = newXvalue inside actions as well ;)

    opened by championswimmer 12
  • Bump follow-redirects from 1.10.0 to 1.14.7

    Bump follow-redirects from 1.10.0 to 1.14.7

    Bumps follow-redirects from 1.10.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • 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.
    dependencies 
    opened by dependabot[bot] 0
  • Bump vuepress from 1.3.0 to 1.9.5

    Bump vuepress from 1.3.0 to 1.9.5

    Bumps vuepress from 1.3.0 to 1.9.5.

    Release notes

    Sourced from vuepress's releases.

    v1.9.2

    TS Support for VuePress Plugin and Theme.

    Motivation

    We've announced VuePress 1.9 that takes full TypeScript Support for Config File, while VuePress 1.9.2 ships with TS Support for VuePress Plugin and Theme:

    Quick Start

    In order to make the plugin developer not dependent on VuePress for development, we provide a completely independent type package @vuepress/types:

    npm i @vuepress/types -D
    

    @vuepress/types exports four functions:

    • defineConfig
    • defineConfig4CustomTheme
    • defineTheme
    • definePlugin

    Note that using @vuepress/types is equivalent to using vuepress/config.

    Plugin Type

    If you already have some VuePress plugins written in JS, you can leverage your IDE's intellisense with jsdoc type hints:

    /**
     * @type {import('@vuepress/types').Plugin}
     */
    module.exports = {
      ready() {
        // ...
      }
    };
    

    Alternatively, you can use the defineConfig helper which should provide intellisense without the need for jsdoc annotations:

    import { definePlugin } from "@vuepress/types";
    

    </tr></table>

    ... (truncated)

    Changelog

    Sourced from vuepress's changelog.

    1.9.5 (2021-12-25)

    Features

    1.9.4 (2021-12-24)

    Bug Fixes

    Features

    1.9.3 (2021-12-23)

    Bug Fixes

    1.9.2 (2021-12-23)

    Bug Fixes

    Features

    ... (truncated)

    Commits
    • ef6f87a build: release version 1.9.5
    • e4a28db build: release version 1.9.4
    • accfe87 build: release version 1.9.3
    • ed3cce6 build: release version 1.9.2
    • 2f707a6 refactor(types): move helpers to @vuepress/types
    • 84250cc feat(types): defineThemeEntry helper to infer type for theme entry
    • 7ac6aa8 feat(types): init @vuepress/types
    • 2ffd506 build: release version 1.9.1
    • dd6e3ef fix(types): support plain string usage for known third-party plugins
    • 1440bbd build: release version 1.9.0
    • 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)
    dependencies 
    opened by dependabot[bot] 0
  • Can vite hot update be supported?

    Can vite hot update be supported?

    For example

    // src/module/index.ts 
    function registerDynamicModule<S>(dynamicModule: Mod<S, any>, modOpt: DynamicModuleOptions) {
      if (!modOpt.name) {
        throw new Error('Name of module not provided in decorator options')
      }
    
      if (!modOpt.store) {
        throw new Error('Store not provided in decorator options when using dynamic option')
      }
    ////
      if (import.meta.hot) {
        // Hot update of vite. 
        if (modOpt.store.hasModule(modOpt.name)) {
          // Hot update if duplicate modules are encountered. 
          modOpt.store.hotUpdate({
            modules: {
              [modOpt.name]: dynamicModule
            }
          })
          return
        }
      }
    ////
      modOpt.store.registerModule(modOpt.name, dynamicModule, {
        preserveState: modOpt.preserveState || false
      })
    }
    
    opened by CaoMeiYouRen 0
  • v2.0.0 there are any breaking changes ?

    v2.0.0 there are any breaking changes ?

    On RELEASE v2.0.0 there are no info about any breaking changes and/or what is changed.

    opened by m4ss1m0g 2
  • Bump ini from 1.3.5 to 1.3.8

    Bump ini from 1.3.5 to 1.3.8

    Bumps ini from 1.3.5 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini 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.
    dependencies 
    opened by dependabot[bot] 0
  • Bump y18n from 4.0.0 to 4.0.3

    Bump y18n from 4.0.0 to 4.0.3

    Bumps y18n from 4.0.0 to 4.0.3.

    Changelog

    Sourced from y18n's changelog.

    4.0.3 (2021-04-07)

    Bug Fixes

    • release: 4.x.x should not enforce Node 10 (#126) (1e21a53)

    4.0.1 (2020-11-30)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n 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.
    dependencies 
    opened by dependabot[bot] 0
  • Bump browserslist from 4.8.6 to 4.18.1

    Bump browserslist from 4.8.6 to 4.18.1

    Bumps browserslist from 4.8.6 to 4.18.1.

    Changelog

    Sourced from browserslist's changelog.

    4.18.1

    • Fixed case inventiveness for cover queries (by Pig Fang).
    • Fixed since 1970 query for null in release date (by Pig Fang).

    4.18

    • Added --ignore-unknown-versions CLI option (by Pig Fang).

    4.17.6

    • Fixed sharable config resolution (by Adaline Valentina Simonian).

    4.17.5

    • Fixed --update-db for some pnpm cases.

    4.17.4

    • Reduced package size.

    4.17.3

    • Use picocolors for color output in --update-db.

    4.17.2

    • Reduced package size.

    4.17.1

    • Use Nano Colors for color output in --update-db.

    4.17

    • Added yarn 3 support to --update-db (by Himank Pathak).

    4.16.8

    • Updated Firefox ESR.

    4.16.7

    • Fixed oudated caniuse-lite warning text (by Paul Verest).
    • Fixed docs (by Alexander Belov).

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    ... (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.
    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.7 to 1.5.3

    Bump url-parse from 1.4.7 to 1.5.3

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • 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.
    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss from 7.0.26 to 7.0.39

    Bump postcss from 7.0.26 to 7.0.39

    Bumps postcss from 7.0.26 to 7.0.39.

    Release notes

    Sourced from postcss's releases.

    7.0.39

    • Reduce package size.
    • Backport nanocolors to picocolors migration.

    7.0.38

    • Update Processor#version.

    7.0.37

    • Backport chalk to nanocolors migration.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).

    7.0.27

    • Fix TypeScript definition (by @​nex3).
    Changelog

    Sourced from postcss's changelog.

    7.0.39

    • Reduce package size.
    • Backport nanocolors to picocolors migration.

    7.0.38

    • Update Processor#version.

    7.0.37

    • Backport chalk to nanocolors migration.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.27

    • Fix TypeScript definition (by Natalie Weizenbaum).
    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.
    dependencies 
    opened by dependabot[bot] 0
  • Bump dns-packet from 1.3.1 to 1.3.4

    Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    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.
    dependencies 
    opened by dependabot[bot] 0
Releases(v2.0.0)
Owner
Arnav Gupta
Co-Founder @coding-blocks 💼 ➕ Android & NodeJS mentor 👨🏻‍🏫 ➕ Ex- @AOKP @fossasia ⚙️ ◀️ in another universe ▶️ Android dev @Zomato as @arnavzoman 🍔
Arnav Gupta
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

vue-typed 102 Apr 16, 2021
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

Francis O'Brien 362 Nov 18, 2021
[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

Locoslab GmbH 26 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

Locoslab GmbH 28 Jul 30, 2020
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

Rhys Lloyd 58 Nov 24, 2021
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

null 20 Jan 5, 2022
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

null 23 Dec 31, 2021
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

ThRadio 14 Jan 10, 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

Alan Rezende 3 Jan 7, 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

Fazt Web 5 Dec 21, 2021
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

JS-IT 1 Nov 23, 2021
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

Rockhopper-Penguin 1 Aug 28, 2021
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

Jhoel Flores Alejo 17 Jan 6, 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

Ayoub Abidi 0 Jan 20, 2022
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

Dsafuanova 0 Jan 20, 2022
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

null 187 Dec 16, 2021
: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

Kevin Peters 222 Nov 21, 2021
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

vue-typed 102 Apr 16, 2021
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

Francis O'Brien 362 Nov 18, 2021
[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

Locoslab GmbH 26 Aug 6, 2021
Easily create Vuex modules with DRY code

Vuex module builder Vuex module builder is a wrapper for building vuex stores efficiently with DRY approach. You can just supply your state and it wil

Biraj Ghosh 6 Jun 16, 2021
🖼 Declaratively interface window/document/body in your Vue template

?? Pseudo Window Vue component to bind event-handlers or classes to window/document/body! Insert pseudo-window anywhere in your template: <pseudo-wind

hiroki 27 Nov 23, 2021
🖼 Declaratively interface window/document/body in your Vue template

?? Pseudo Window Vue component to bind event-handlers or classes to window/document/body! Insert pseudo-window anywhere in your template: <pseudo-wind

hiroki 27 Nov 23, 2021
🤓 This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Features MySQL integration, user authentication, CRUD note actions, and Vuex store modules.

Koa-Vue-Notes-Web This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Frontend Vue GitHu

John Datserakis 202 Jan 20, 2022
vue-idb - Lists and huge lists management with IndexedDB (Dexie.js) only or automatically created and extendible vuex modules

vue-idb IndexedDB wrapper for Vuejs based on Dexie Install npm install vue-idb --save Usage import Vue from 'vue' import VueIdb from 'vue-idb' Vue.us

David Grill 75 Nov 17, 2021
Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x.

vuex-async-module Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x Installation npm install @liqueflies/vuex-async-mod

Lorenzo Girardi 15 Mar 26, 2021
☘️ A package that dynamically registers your components and vuex modules

Vue Registrar A dynamic component registrar and Vuex module assembler A Vue.js package that makes your code a lot cleaner and much more understandable

Evryn.dev 18 Apr 14, 2021
Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x.

vuex-async-module Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x Installation npm install @liqueflies/vuex-async-mod

Lorenzo Girardi 15 Mar 26, 2021
vuex-loading-plugin The plugin which including to your modules loading logic

vuex-loading-plugin The plugin which including to your modules loading logic. When you will handle any actions you triggering loading mutation. When a

Stfalcon LLC 3 Jul 30, 2020