Getting started (Nuxt)

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. You can import its helper functions from either nuxt-typed-vuex or 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:

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,
  },
})

Creating type definitions

Add the following type definitions to your project:

import { accessorType } from '~/store'

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

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $accessor: typeof accessorType
  }
}