SIMPLE PINIA STATE MANAGEMENT APP
=================================

A very simple Vue 3 + Pinia Counter Application.

WHAT THIS APP DOES
------------------
- Displays a counter value.
- Increment button increases the counter.
- Decrement button decreases the counter.
- Reset button sets the counter back to zero.
- Pinia stores the counter state so components can access it.

PROJECT STRUCTURE
-----------------
Pinia-Counter-App/
|
|-- package.json
|-- index.html
|-- vite.config.js
|
|-- src/
    |-- main.js
    |-- App.vue
    |-- style.css
    |-- stores/
        |-- counter.js


1. package.json
---------------
{
  "name": "pinia-counter-app",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "pinia": "^2.3.1",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.0.5"
  }
}


2. index.html
-------------
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pinia Counter App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


3. vite.config.js
-----------------
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})


4. src/main.js
--------------
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import './style.css'

const app = createApp(App)

app.use(createPinia())

app.mount('#app')


5. src/stores/counter.js
------------------------
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // State
  const count = ref(0)

  // Actions
  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  function reset() {
    count.value = 0
  }

  return {
    count,
    increment,
    decrement,
    reset
  }
})


6. src/App.vue
--------------
<script setup>
import { useCounterStore } from './stores/counter'

const counter = useCounterStore()
</script>

<template>
  <div class="container">
    <h1>Pinia State Management</h1>
    <p class="subtitle">Simple Counter Application</p>

    <div class="counter-box">
      <h2>Counter Value</h2>
      <p class="count">{{ counter.count }}</p>

      <div class="buttons">
        <button @click="counter.increment()">Increment (+)</button>
        <button @click="counter.decrement()">Decrement (-)</button>
        <button class="reset" @click="counter.reset()">Reset</button>
      </div>
    </div>
  </div>
</template>


7. src/style.css
----------------
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f2f4f7;
  color: #222;
}

.container {
  width: 90%;
  max-width: 600px;
  margin: 70px auto;
  text-align: center;
}

h1 {
  margin-bottom: 8px;
}

.subtitle {
  color: #666;
}

.counter-box {
  margin-top: 35px;
  padding: 30px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.count {
  font-size: 48px;
  font-weight: bold;
  margin: 20px 0;
}

.buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  background: #2563eb;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  opacity: 0.9;
}

button.reset {
  background: #555;
}


8. HOW TO RUN THE PROJECT
-------------------------
STEP 1:
Open the Pinia-Counter-App folder in VS Code.

STEP 2:
Open the terminal in the project folder.

STEP 3:
Install dependencies:

npm install

STEP 4:
Start the Vue development server:

npm run dev

STEP 5:
Open the local URL shown in the terminal. Usually:

http://localhost:5173/


HOW PINIA WORKS IN THIS APP
---------------------------
1. createPinia() creates the Pinia instance.
2. app.use(createPinia()) registers Pinia in the Vue application.
3. counter.js creates a Pinia store using defineStore().
4. count is the state variable.
5. increment(), decrement() and reset() are actions.
6. App.vue accesses the store using useCounterStore().
7. When an action changes count, Vue updates the displayed value automatically.

IMPORTANT
---------
- Create the folders and files using the exact names shown above.
- Do not put the code sections or separator lines into your actual .js or .vue files.
- This is a frontend-only practice app. It does not need a backend or database.

END
