Nuxt Vuex Module

In Nuxt 2, store directories were supported and it was easy to use vuex.

The store directory is not supported in Nuxt 3.

This module allows the store directory to be used in Nuxt 3, reducing the difficulty of migration to Nuxt 3.

:warning: Since Nuxt 3 recommends the use of Pinia, it is preferable to avoid the use of Vuex.

✨  Release Notes

Quick Setup

You can install @wattanx/nuxt-vuex using nuxi:

npm install vuex
npx nuxi@latest module add @wattanx/nuxt-vuex

That’s it! You can now use @wattanx/nuxt-vuex in your Nuxt app ✨

Usage

See Nuxt 2 docs for basic usage.
https://v2.nuxt.com/docs/directory-structure/store/

@wattanx/nuxt-vuex does not support nuxtServerInit.

Instead, you can use the server side plugin or middleware with useNuxtApp().$store.

export default defineNuxtPlugin(() => {
  const { $store } = useNuxtApp();

  if (process.server) {
    $store.dispatch('server/increment');
  }
});

Typed Store (Opt-in)

You can enable automatic TypeScript type generation for your Vuex store. When enabled, state, getters, commit, and dispatch are fully typed based on your store/ directory structure.

Setup

// nuxt.config.ts
export default defineNuxtConfig({
  vuex: {
    typedStore: true,
  },
});

What gets typed

const { $store } = useNuxtApp();

// State — fully typed with nested modules
$store.state.count;
$store.state.account.email;
$store.state.account.user.setting.name;

// Commit — mutation names are auto-completed, payloads are type-checked
$store.commit('increment');
$store.commit('account/setEmail', 'foo@bar.com');

// Dispatch — same type safety as commit
$store.dispatch('account/user/setting/setName', 'Alice');

// useStore() from vuex is also typed
const store = useStore();
store.state.count;

Optional payloads are also supported:

// store/index.ts
export const mutations = {
  increment(state: State, value?: number) {
    state.count += value ?? 1;
  },
};

// Both are valid
$store.commit('increment');
$store.commit('increment', 5);

The vuex-type-helper pattern (DefineMutations, DefineActions) is also supported.

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release