or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-vue--cli-plugin-vuex

Vue CLI plugin that automatically integrates Vuex state management into Vue.js projects

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/cli-plugin-vuex@5.0.x

To install, run

npx @tessl/cli install tessl/npm-vue--cli-plugin-vuex@5.0.0

index.mddocs/

@vue/cli-plugin-vuex

@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.

Package Information

  • Package Name: @vue/cli-plugin-vuex
  • Package Type: npm
  • Language: JavaScript
  • Installation: vue add vuex

Core Imports

This plugin operates through the Vue CLI system and doesn't require direct imports. Installation is handled via the Vue CLI:

vue add vuex

For 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'

Basic Usage

After installation, the plugin automatically:

  1. Adds appropriate Vuex dependency to your project
  2. Creates a basic store structure in src/store/index.js
  3. Configures your main entry file to use the store
// 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: {}
})

Capabilities

Plugin Entry Point

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;

Generator Function

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;
}

Vue 3 Script Transformer

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;
}

Generated Dependencies

The plugin automatically adds the appropriate Vuex version based on your Vue version:

Vue 2 Projects

  • vuex: ^3.6.2

Vue 3 Projects

  • vuex: ^4.0.0

Generated Files

Store Structure

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: {}
})

Main Entry File Modifications

Vue 2 Projects:

  • Adds import store from './store'
  • Injects store into root Vue options

Vue 3 Projects:

  • Adds import store from './store'
  • Transforms createApp() calls to createApp().use(store)

TypeScript Integration

When the TypeScript plugin is detected during installation:

  • Automatically converts generated JavaScript files to TypeScript
  • Uses @vue/cli-plugin-typescript/generator/convert for file conversion
  • Maintains type safety and proper TypeScript configurations

Plugin Architecture Integration

This plugin follows Vue CLI plugin architecture patterns:

Installation Flow

  1. Plugin entry point is called by Vue CLI
  2. Generator function performs the actual setup
  3. Files are rendered from templates based on Vue version
  4. Dependencies are added to package.json
  5. Main entry file is modified to include store integration
  6. TypeScript conversion happens if TypeScript plugin is present

API Integration Points

  • Integrates with Vue CLI's generator API
  • Uses jscodeshift for code transformations
  • Follows Vue CLI's plugin naming and structure conventions
  • Supports both invocation time and post-installation scenarios