How to Install Pinia in Vue 3 Projects Easily

To install pinia, run npm install pinia or yarn add pinia in your Vue 3 project. Then, create a Pinia store and add it to your Vue app using app.use(createPinia()).

Syntax

First, install Pinia with your package manager. Then, import createPinia from pinia and add it to your Vue app instance. Finally, define stores using defineStore.

• npm install pinia or yarn add pinia: installs the Pinia package.
• import { createPinia } from 'pinia': imports the function to create a Pinia instance.
• app.use(createPinia()): adds Pinia to your Vue app.
• defineStore: defines a store to hold state and actions.

bash and javascript

npm install pinia

// main.js or main.ts
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')

Example

This example shows how to install Pinia, create a simple store, and use it in a Vue component to display and update a counter.

javascript and vue

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// App.vue
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter'
const counter = useCounterStore()
</script>

Output

Count: 0
[Button labeled 'Increment']

When clicking the button, the count number increases by 1.

Common Pitfalls

Common mistakes when installing or using Pinia include:

• Not running npm install pinia before importing it.
• Forgetting to add app.use(createPinia()) in your main file, so stores won't work.
• Trying to use Pinia stores outside of Vue components or before the app is mounted.
• Mixing Pinia with Vuex syntax, which is different.

javascript

// Wrong: forgetting to add Pinia to app
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// Missing: app.use(createPinia())
app.mount('#app')

// Right:
import { createPinia } from 'pinia'
app.use(createPinia())

Quick Reference

Summary of key commands and steps to install and use Pinia:

Step	Command / Code	Description
1	npm install pinia	Install Pinia package
2	import { createPinia } from 'pinia'	Import Pinia creator
3	app.use(createPinia())	Add Pinia to Vue app
4	import { defineStore } from 'pinia'	Import store creator
5	const useStore = defineStore('id', { state, actions })	Define a store

Key Takeaways

Run npm install pinia to add Pinia to your Vue 3 project.

Add Pinia to your app with app.use(createPinia()) before mounting.

Define stores using defineStore to manage state simply.

Always import Pinia functions from 'pinia' package.

Avoid mixing Vuex syntax; Pinia has its own patterns.