Vue CLI plugin that automatically integrates Vuex state management into Vue.js projects
npx @tessl/cli install tessl/npm-vue--cli-plugin-vuex@5.0.0@vue/cli-plugin-vuex is a Vue CLI plugin that automatically integrates Vuex state management into Vue.js projects. It provides seamless setup for both Vue 2 and Vue 3 projects with appropriate version-specific configurations and includes TypeScript support when applicable.
vue add vuexThis plugin operates through the Vue CLI system and doesn't require direct imports. Installation is handled via the Vue CLI:
vue add vuexFor accessing generated store in your application:
// Vue 2 projects - automatically injected
import store from './store'
// Vue 3 projects - automatically injected and configured
import store from './store'After installation, the plugin automatically:
src/store/index.js// Generated store structure (Vue 2)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
})// Generated store structure (Vue 3)
import { createStore } from 'vuex'
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
})The main plugin function that gets called by Vue CLI during installation. This is an empty function as all functionality is handled by the generator.
/**
* Main plugin entry point - called by Vue CLI (currently empty implementation)
* @param api - Vue CLI plugin API instance
* @param options - Plugin configuration options (defaults to empty object)
*/
function plugin(api: any, options: object = {}): void;Core generator that performs the Vuex integration setup.
/**
* Generator function that adds Vuex to Vue projects
* @param api - Vue CLI generator API instance
* @param options - Plugin options (defaults to empty object)
* @param rootOptions - Root project options including Vue version
*/
function generator(
api: GeneratorAPI,
options: object = {},
rootOptions: object = {}
): void;
interface GeneratorAPI {
/** Entry file path (typically main.js or main.ts) */
entryFile: string;
/** Flag indicating if plugin is being invoked */
invoking: boolean;
/** Inject import statements into a file */
injectImports(file: string, imports: string): void;
/** Inject root options into Vue instance (Vue 2) */
injectRootOptions(file: string, options: string): void;
/** Apply JavaScript transformations to a file using jscodeshift */
transformScript(file: string, transformer: (file: FileInfo, api: JSCAPI) => string): void;
/** Add dependencies to package.json */
extendPackage(packageData: object): void;
/** Render template files to project */
render(templatePath: string, data?: object): void;
/** Check if a plugin is installed */
hasPlugin(pluginName: string): boolean;
}Transform function for Vue 3 applications to inject store usage.
/**
* jscodeshift transformer for Vue 3 main entry files
* Modifies createApp() calls to include .use(store)
* @param file - File object containing source code
* @param api - jscodeshift API with transformation utilities
* @returns Transformed source code
*/
function injectUseStore(
file: FileInfo,
api: JSCAPI
): string;
interface FileInfo {
/** Source code of the file */
source: string;
/** File path */
path: string;
}
interface JSCAPI {
/** jscodeshift core transformation library */
jscodeshift: JSCodeshift;
}
interface JSCodeshift {
/** Create AST from source code */
(source: string): Collection;
/** Call expression AST node constructor */
CallExpression: CallExpressionBuilder;
/** Member expression AST node constructor */
MemberExpression: MemberExpressionBuilder;
/** Identifier AST node constructor */
Identifier: IdentifierBuilder;
/** Create a call expression node */
callExpression(callee: any, args: any[]): any;
/** Create a member expression node */
memberExpression(object: any, property: any): any;
/** Create an identifier node */
identifier(name: string): any;
}
interface Collection {
/** Find nodes matching criteria */
find(nodeType: any, filter?: (node: any) => boolean): Collection;
/** Replace matched nodes */
replaceWith(replacement: (path: any) => any): Collection;
/** Output transformed source code */
toSource(): string;
}
interface CallExpressionBuilder {
/** Check if node is a call expression */
check(node: any): boolean;
}
interface MemberExpressionBuilder {
/** Check if node is a member expression */
check(node: any): boolean;
}
interface IdentifierBuilder {
/** Check if node is an identifier */
check(node: any): boolean;
}The plugin automatically adds the appropriate Vuex version based on your Vue version:
The plugin creates src/store/index.js with a basic Vuex store structure:
Vue 2 Template:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
})Vue 3 Template:
import { createStore } from 'vuex'
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
})Vue 2 Projects:
import store from './store'store into root Vue optionsVue 3 Projects:
import store from './store'createApp() calls to createApp().use(store)When the TypeScript plugin is detected during installation:
@vue/cli-plugin-typescript/generator/convert for file conversionThis plugin follows Vue CLI plugin architecture patterns: