{"id":12423,"library":"vue-cli-plugin-pinia","title":"Vue CLI Pinia Plugin","description":"The `vue-cli-plugin-pinia` package integrates Pinia, the official state management library for Vue.js, into projects scaffolded by Vue CLI. This plugin streamlines the setup process for Pinia by automatically configuring it within an existing Vue CLI project, including necessary dependencies and boilerplate code for store initialization. The current stable version, 0.2.4, reflects ongoing, albeit irregular, maintenance primarily focused on bumping Pinia dependencies and ensuring compatibility with various Vue CLI versions. While it offers a convenient, automated approach for adding Pinia, its utility is significantly impacted by the fact that Vue CLI itself is now in maintenance mode. New Vue projects are strongly advised to use `create-vue` to scaffold Vite-based projects, which offer a more modern and performant development experience. This plugin's primary role is therefore to serve existing Vue CLI applications that require Pinia integration, rather than being a solution for new development.","status":"maintenance","version":"0.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/wobsoriano/vue-cli-plugin-pinia","tags":["javascript","vue","cli","pinia"],"install":[{"cmd":"npm install vue-cli-plugin-pinia","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-pinia","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-pinia","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for any Vue CLI plugin to function, as it provides the core CLI service.","package":"@vue/cli-service","optional":false}],"imports":[{"note":"Used to create the Pinia store instance for your Vue application. Pinia is ESM-first.","wrong":"const { createPinia } = require('pinia')","symbol":"createPinia","correct":"import { createPinia } from 'pinia'"},{"note":"The primary function for defining new Pinia stores in a declarative way.","wrong":"import defineStore from 'pinia'","symbol":"defineStore","correct":"import { defineStore } from 'pinia'"},{"note":"A Pinia utility to convert state properties from a store into reactive references, useful for destructuring in template-bound components.","wrong":"import { toRefs } from 'vue'","symbol":"storeToRefs","correct":"import { storeToRefs } from 'pinia'"}],"quickstart":{"code":"vue add vue-cli-plugin-pinia\n\n// src/main.ts (or main.js)\nimport { createApp } from 'vue';\nimport { createPinia } from 'pinia';\nimport App from './App.vue';\n\nconst app = createApp(App);\nconst pinia = createPinia();\n\napp.use(pinia);\napp.mount('#app');\n\n// src/stores/counter.ts (example store)\nimport { defineStore } from 'pinia';\n\nexport const useCounterStore = defineStore('counter', {\n  state: () => ({\n    count: 0,\n    name: 'MyCounter',\n  }),\n  getters: {\n    doubleCount: (state) => state.count * 2,\n  },\n  actions: {\n    increment() {\n      this.count++;\n    },\n  },\n});\n\n// src/components/CounterDisplay.vue (example usage in a component)\n<template>\n  <div>\n    <p>Count: {{ counter.count }}</p>\n    <p>Double Count: {{ counter.doubleCount }}</p>\n    <button @click=\"counter.increment()\">Increment</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useCounterStore } from '../stores/counter';\n// import { storeToRefs } from 'pinia'; // Use storeToRefs if you need to destructure state properties reactively\n\nconst counter = useCounterStore();\n</script>","lang":"typescript","description":"Demonstrates how to add the plugin to a Vue CLI project and then create and use a basic Pinia store."},"warnings":[{"fix":"For new projects, use `npm init vue@latest` or `yarn create vue` instead of `vue create`.","message":"Vue CLI itself is in maintenance mode. For new projects, the official recommendation is to use `create-vue` which scaffolds Vite-based applications. This plugin is primarily for existing Vue CLI projects.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"No direct fix needed, but be aware of the dependency management. If manually using `@vue/composition-api` in Vue 2.7+, it might lead to conflicts.","message":"The plugin automatically injects the `@vue/composition-api` plugin only for Vue 2 projects with versions less than 2.7.0. If you are using Vue 2.7.0+, the Composition API is built-in and the injection is skipped. Ensure your Vue 2 setup aligns with this behavior.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Always check Pinia's official release notes when upgrading Pinia versions (e.g., from v1 to v2), and adjust your Pinia stores and usage patterns accordingly.","message":"This plugin primarily handles the initial setup of Pinia. Subsequent updates to Pinia itself or its API may introduce breaking changes that are independent of the plugin but will affect your application.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install Vue CLI globally: `npm install -g @vue/cli` or `yarn global add @vue/cli`.","cause":"Vue CLI is not installed globally or not in your system's PATH.","error":"command not found: vue"},{"fix":"This message indicates the plugin is already set up. No action is required unless you intended to re-install for an upgrade (which is usually handled by `npm update` or `yarn upgrade`).","cause":"You are trying to add the plugin to a project where it has already been installed.","error":"Error: The plugin `vue-cli-plugin-pinia` has already been applied."},{"fix":"Run `npm install` or `yarn install` to ensure all dependencies are present. If the issue persists, manually install Pinia: `npm install pinia` or `yarn add pinia`.","cause":"Pinia dependency might not be correctly installed or its module resolution is failing after adding the plugin.","error":"Module not found: Error: Can't resolve 'pinia'"}],"ecosystem":"npm"}