Installing Pinia
Install Pinia with npm, create a Pinia instance and give it to your app.
In this page:
Syntax
import { createApp } from 'vue';
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');Installing Pinia
Run npm install pinia, then call createPinia() and register it with app.use. Stores are ordinary modules created with defineStore and used in any component. From a CDN you also need vue-demi, which Pinia depends on.
Note:
create-vue can add Pinia for you during scaffolding.
Example: Installing Pinia
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
$ npm install pinia
// main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
createApp(App).use(createPinia()).mount("#app");
</body>
</html>⚠️ Run this in your own terminal or Node.js environment.
Live Example
Related Topics
Common Mistakes
- Forgetting app.use(pinia)
- Calling a store before Pinia is installed
- Missing vue-demi with CDN builds
Chapter Summary
- npm install pinia
- createPinia() creates the instance
- app.use(pinia) installs it
- CDN builds need vue-demi
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: