Setting Up the Development Environment

In this section, we will set up the necessary development environment to explore the internals of Pinia and build our own simplified imitation.

We will use Nuxt 3 as our development framework. Nuxt 3 is chosen because it provides a SSR environment out-of-the-box. This is crucial for examining Pinia's SSR capabilities without requiring complex manual configuration of a standard Vite + Vue 3 setup, which would take significant time to prepare for SSR.

Project Directory Structure

Our project will have the following structure to keep the official Pinia source, our imitation, and the consuming application neatly separated:

bash

your-project/
├── packages/
│   ├── pinia/         # Official Pinia source code (added as a submodule)
│   └── small-pinia/   # Our simplified Pinia imitation
└── playground/
└── nuxt/

By adding the official Pinia source code as a git submodule, you can easily browse and compare its implementation details with our simplified version (small-pinia) directly within the same project structure.

Creating the Core Project

Follow these steps to create the basic project directories and set up the Nuxt 3 application:

Create project directories:
bash
```
mkdir your-project
cd your-project
mkdir packages playground
mkdir packages/small-pinia
```
This creates the root directory for your project and the packages and playground subdirectories.
Initialize package.json:
bash
```
npm init -y
npm install vue@3.5.13
```
This initializes a package.json file in the root of your project.
Create the Nuxt 3 application:
bash
```
cd playground
npm create nuxt@latest nuxt
```
Navigate into the playground directory and use create-nuxt to scaffold a new Nuxt 3 project named nuxt.
Install additional development dependencies (Optional but Recommended):
bash
```
cd nuxt
npm install --save-dev eslint-plugin-prettier
```
Navigate into the created Nuxt project directory. Installing eslint-plugin-prettier is common when setting up linting with ESLint to integrate Prettier for code formatting. (create-nuxt might add this by default depending on your choices during setup).

Note on Package Manager

In this project's development, pnpm was primarily used as the package manager due to its efficiency with monorepos and linking local packages. While the commands above are shown using npm, you are free to use any package manager (npm, yarn, pnpm) that works for your project setup.

Adding the Official Pinia Source Code

Next, we will add the official Pinia GitHub repository as a git submodule within our packages directory. This allows us to have the actual Pinia source code available locally for reference.

Navigate to the Nuxt project root:

Create project directories:
bash
```
cd ./playground/nuxt
```

Add the Pinia submodule:

bash

git submodule add [https://github.com/vuejs/pinia.git](https://github.com/vuejs/pinia.git) ../../packages/pinia

This command adds the Pinia repository as a submodule

Configuring Nuxt 3 for Source Code Development

Since we are linking directly to the Pinia source files within our packages directory rather than installing the published npm package from node_modules, we need to configure both Nuxt (which uses Vite) and TypeScript to correctly resolve paths and handle Pinia's internal requirements.

Modify your playground/nuxt/nuxt.config.ts file to add necessary Vite define flags (used internally by Pinia's build) and aliases for easy importing of our local packages.

typescript

//nuxt.config.ts
import { dirname, resolve } from "path";
import { fileURLToPath } from "url";
const currentDir = dirname(fileURLToPath(import.meta.url));
const piniaRoot = resolve(currentDir, "../../packages/pinia/packages/pinia");
const smallPiniaRoot = resolve(currentDir, "../../packages/small-pinia");
export default defineNuxtConfig({
  compatibilityDate: "2025-04-12",
  devtools: { enabled: true },
  vite: {
    define: {
      __DEV__: "true",
      __BROWSER__: "true",
      __USE_DEVTOOLS__: "true",
      __TEST__: "false",
    },
  },
  alias: {
    "@pinia": piniaRoot,
    "@small-pinia": smallPiniaRoot,
  },
  modules: ["@nuxt/eslint"],
});


// tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@pinia/*": ["../../packages/pinia/packages/pinia/*"],
      "@small-pinia/*": ["../../packages/small-pinia/*"]
    }
  }
}

Setting Up the Development Environment ​

Project Directory Structure ​

Creating the Core Project ​

Note on Package Manager ​

Adding the Official Pinia Source Code ​

Configuring Nuxt 3 for Source Code Development ​