Typed Vuex

Getting started (Nuxt)

Vanilla, strongly-typed store accessor.

Install module

  1. Install Nuxt module:

    yarn add nuxt-typed-vuex

    npm install nuxt-typed-vuex --save
    This will also install typed-vuex in your project, which is where the store accessor lives. All the helper functions are imported from typed-vuex.

  2. Add module to your nuxt.config:

    buildModules: [
  'nuxt-typed-vuex',
],
    buildModules require Nuxt 2.10+. If you are using an older version, add nuxt-typed-vuex to modules instead.

Add type definitions

The module will inject a store accessor throughout your project ($accessor). It is not typed by default, so you will need to add types.

Defining the accessor type

In your root store module, add the following code:

store/index.ts
import { getAccessorType } from 'typed-vuex'

// Import all your submodules
import * as submodule from '~/store/submodule'

// Keep your existing vanilla Vuex code for state, getters, mutations, actions, plugins, etc.
// ...

// This compiles to nothing and only serves to return the correct type of the accessor
export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    // The key (submodule) needs to match the Nuxt namespace (e.g. ~/store/submodule.ts)
    submodule,
  },
})
This may look different if you split your modules into separate files for state, actions, mutations and getters.

Creating type definitions

Add the following type definitions to your project:

index.d.ts
import { accessorType } from '~/store'

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $accessor: typeof accessorType
  }
  
  interface Context {
    $accessor: typeof accessorType,
  }
}
Introduction
Getting started (Vue)