Learn Pinia - Pre-Requisites Skills & Setup Environment

#Introduction

Welcome to the Learning Pinia series! This series will take you from mastering Pinia — the official state management library for Vue — from core concepts all the way to production-grade. There are 23 episodes arranged across six phases: fundamentals, core concepts, plugins, advanced integrations, scaling, and the modern ecosystem.

But before defining the first store, there are a few fundamental skills and software you must have. Why are these pre-requisites important? Because Pinia stands on top of Vue 3's Composition API and its reactivity system. If you're not yet comfortable with ref, computed, and lifecycle hooks, the store concept will feel like a black box.

Episode 0 is your roadmap: we'll make sure your basic skills are solid, set up a Vue project with Vite, install Pinia, and do the first verification. Once this episode is done, you can follow the entire series comfortably.

#Essential Skills You Must Master

#Modern JavaScript and Basic TypeScript

Pinia is written in TypeScript and provides full type safety to your stores. You must be comfortable with ES6+ syntax: destructuring, the spread operator, async/await, and arrow functions. For TypeScript, understanding interfaces and generics is enough — we'll go deeper in episode 16.

#Vue 3 Composition API

This is a non-negotiable foundation. Pinia runs on top of Composition API primitives like ref, reactive, and computed. You also need to understand lifecycle hooks such as onMounted and how to write a Single File Component (SFC). If you're still used to the Options API only, don't worry — episode 4 will compare both directly.

#Vue Reactivity Concepts

Vue 3 uses Proxy to track property access (track) and notify subscribers when data changes (trigger). Understanding that assignments on reactive objects are always detected will help a lot when we discuss destructuring with storeToRefs in episode 5.

To make sure these concepts aren't abstract, take a look at the small example below. This code shows how ref stores a reactive primitive value, while computed produces a derived value that automatically follows its source:

ref, computed, and reactive

import { ref, computed } from 'vue'
 
const count = ref(0)
const double = computed(() => count.value * 2)
 
count.value = 4
console.log(double.value) // 8

computed is only recalculated when its dependencies change. You don't need to tell Vue that double is stale — the reactivity system tracks it automatically. Try to guess the value of double.value before count.value = 4; if your answers are 0 and 8 for those two conditions, your understanding of basic reactivity is solid enough to follow this series.

#Software You Need to Prepare

#Node.js and a Package Manager

Pinia requires Node.js version 20 or newer. First verify your Node and package manager versions:

node --version
npm --version

If both commands above run without errors, you can use npm, pnpm, or bun. Throughout this series the examples will use npm so they're easy to follow on every system.

#Creating a Vue Project with Vite

The fastest way to scaffold a Vue 3 project with TypeScript is using create-vue:

npm create vue@latest

npm create vue@latest will ask a few interactive options. Choose TypeScript for the language feature, and if available select the Add Pinia for state management option so Pinia is installed right away. If you don't select it, install it manually with the following command:

npm i pinia

#Verifying the Pinia Version

Make sure you're using the latest stable version, for example 4.0.2 at the time this series was written:

npm view pinia version

npm view pinia version shows the latest version in the npm registry. You can check the version installed in your project in package.json.

#Environment Verification

Before moving on to episode 1, verify that Pinia is truly ready to use. Open src/main.ts and mount Pinia into the app:

Mount Pinia in main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
 
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

createPinia() creates a Pinia instance, and app.use(createPinia()) registers it with the app. If npm run dev runs without errors, your environment is ready.

If the server doesn't run, check that Pinia is actually listed in dependencies:

"dependencies": {
  "pinia": "^4.0.2",
  "vue": "^3.5.0"
}

A version prefixed with ^ means npm is free to install the latest patch within the same major version. If Pinia doesn't appear in this list, run npm i pinia again and restart the development server. The most common mistake at this stage is forgetting to run npm i after creating a new project.

#Closing

In episode 0 you've laid the groundwork for the entire series: understanding the basic JavaScript, TypeScript, and Vue 3 Composition API skills, setting up a project with Vite, installing pinia v4.x, and verifying that the Pinia instance is installed correctly.

Key takeaways:

• Master ref, computed, and Vue 3 lifecycle hooks first.
• Understand Proxy-based reactivity: assignments are always detected.
• Set up Node.js version 20 or newer.
• Scaffold the project with npm create vue@latest, then npm i pinia.
• Verify with npm view pinia version and mount Pinia in main.ts.

In the next episode, episode 1, we'll discuss history, background, and why you need Pinia — from the evolution of Vuex 3/4 to Pinia as the Vue team's official standard, the problems it solves, and an early comparison with other approaches. Make sure your environment is ready, because the Learning Pinia journey has only just begun!