Getting started (Nuxt)

Install module

  1. Install Nuxt module:
```bash
yarn add nuxt-typed-vuex
```

</code-block>
<code-block label="NPM">

```bash
npm install nuxt-typed-vuex --save
```

</code-block>
<alert type="info">This will also install `typed-vuex` in your project, which is where the store accessor lives. You can import its helper functions from either `nuxt-typed-vuex` or from `typed-vuex`.</alert>
  1. 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
  }
}