Registry / web-framework / vue-cli-plugin-pinia

vue-cli-plugin-pinia

library0.2.4jsnpmunverified

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.

web-framework

npm install vue-cli-plugin-pinia

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CLI-PLUGIN-PIN

vue-cli-plugin-pinia

web-frameworkjavascriptv0.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createPinia

✓ import { createPinia } from 'pinia'

✗ const { createPinia } = require('pinia')

Used to create the Pinia store instance for your Vue application. Pinia is ESM-first.

defineStore

✓ import { defineStore } from 'pinia'

✗ import defineStore from 'pinia'

The primary function for defining new Pinia stores in a declarative way.

storeToRefs

✓ import { storeToRefs } from 'pinia'

✗ import { toRefs } from 'vue'

A Pinia utility to convert state properties from a store into reactive references, useful for destructuring in template-bound components.

Demonstrates how to add the plugin to a Vue CLI project and then create and use a basic Pinia store.

vue add vue-cli-plugin-pinia // src/main.ts (or main.js) import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.mount('#app'); // src/stores/counter.ts (example store) import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'MyCounter', }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++; }, }, }); // src/components/CounterDisplay.vue (example usage in a component) <template> <div> <p>Count: {{ counter.count }}</p> <p>Double Count: {{ counter.doubleCount }}</p> <button @click="counter.increment()">Increment</button> </div> </template> <script setup lang="ts"> import { useCounterStore } from '../stores/counter'; // import { storeToRefs } from 'pinia'; // Use storeToRefs if you need to destructure state properties reactively const counter = useCounterStore(); </script>

Debug

Known issues

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

fix

For new projects, use `npm init vue@latest` or `yarn create vue` instead of `vue create`.

affects: >=0.1.0

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

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.

affects: >=0.2.0

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

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.

affects: >=0.1.0

Errors

Common errors & fixes

command not found: vue

Vue CLI is not installed globally or not in your system's PATH.

fix

Install Vue CLI globally: `npm install -g @vue/cli` or `yarn global add @vue/cli`.

Error: The plugin `vue-cli-plugin-pinia` has already been applied.

You are trying to add the plugin to a project where it has already been installed.

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`).

Module not found: Error: Can't resolve 'pinia'

Pinia dependency might not be correctly installed or its module resolution is failing after adding the plugin.

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

Upgrade

Version history

0.2.4latest on npm

Audit

Dependencies

@vue/cli-servicerequiredRequired for any Vue CLI plugin to function, as it provides the core CLI service.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/wobsoriano/vue-cli-plugin-pinia ↗

packagehttps://www.npmjs.com/package/vue-cli-plugin-pinia ↗

homepagehttps://pinia.vuejs.org ↗