feat: add pinia

README.md

@@ -19,7 +19,7 @@
 
 ## Features
 
-- [💚 Nuxt 3](https://v3.nuxtjs.org)
+- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
 
 - ⚡️ Vite - Instant HMR
 
@@ -29,7 +29,9 @@
 
 - 🔥 The `<script setup>` syntax
 
-- 📥 APIs auto importing - for Composition API and VueUse
+- 🍍 [State Management via Pinia](https://pinia.esm.dev/)
+
+- 📥 APIs auto importing - for Composition API, VueUse and custom composables.
 
 - 🏎 Zero-config cloud functions and deploy
 
@@ -40,8 +42,37 @@
 ### Nuxt Modules
 
 - [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs
-- [UnoCSS](https://github.com/antfu/unocss) - on-demand atomic CSS engine - powers pure CSS Icons!
+- [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
+- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
 
 ## IDE
 
 We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
+
+## Variations
+
+- [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
+- [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
+- [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3) - Vitesse for Nuxt 3
+- [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
+- [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
+
+## Try it now!
+
+### Online
+
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+
+### GitHub Template
+
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
+
+### Clone to local
+
+If you prefer to do it manually with the cleaner git history
+
+```bash
+npx degit antfu/vitesse-nuxt3 my-nuxt3-app
+cd my-nuxt3-app
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```

nuxt.config.ts

@@ -8,6 +8,7 @@ export default defineNuxtConfig({
   buildModules: [
     '@vueuse/core/nuxt',
     '@unocss/nuxt',
+    '@pinia/nuxt',
   ],
   unocss: {
     shortcuts: [

package.json

@@ -1,19 +1,29 @@
 {
   "private": true,
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
+    "dev": "nuxi dev",
     "start": "node .output/server/index.mjs"
   },
+  "dependencies": {
+    "pinia": "^2.0.2"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^0.10.0",
     "@iconify-json/carbon": "^1.0.9",
     "@iconify-json/twemoji": "^1.0.2",
+    "@pinia/nuxt": "^0.1.2",
     "@unocss/nuxt": "^0.6.4",
     "@vueuse/core": "^6.7.6",
     "eslint": "^8.2.0",
     "nuxt3": "latest",
     "typescript": "^4.4.4",
     "unocss": "^0.6.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
+      "@nuxt/kit-edge": "latest"
+    }
   }
 }

pages/hi/[id].vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-const route = useRoute()
+import { useUserStore } from '~/stores/user'
 
+const route = useRoute()
+const user = useUserStore()
 const name = route.params.id
+
+watchEffect(() => {
+  user.setNewName(route.params.id as string)
+})
 </script>
 
 <template>
@@ -14,6 +20,19 @@ const name = route.params.id
       {{ name }}!
     </div>
 
+    <template v-if="user.otherNames.length">
+      <p text-sm my-4>
+        <span op-50>Also as known as:</span>
+        <ul>
+          <li v-for="otherName in user.otherNames" :key="otherName">
+            <router-link :to="`/hi/${otherName}`" replace>
+              {{ otherName }}
+            </router-link>
+          </li>
+        </ul>
+      </p>
+    </template>
+
     <Counter />
 
     <div>

pnpm-lock.yaml

@@ -1,20 +1,30 @@
 lockfileVersion: 5.3
 
+overrides:
+  '@nuxt/kit': npm:@nuxt/kit-edge@latest
+  '@nuxt/kit-edge': latest
+
 specifiers:
   '@antfu/eslint-config': ^0.10.0
   '@iconify-json/carbon': ^1.0.9
   '@iconify-json/twemoji': ^1.0.2
+  '@pinia/nuxt': ^0.1.2
   '@unocss/nuxt': ^0.6.4
   '@vueuse/core': ^6.7.6
   eslint: ^8.2.0
   nuxt3: latest
+  pinia: ^2.0.2
   typescript: ^4.4.4
   unocss: ^0.6.4
 
+dependencies:
+  pinia: 2.0.2_typescript@4.4.4
+
 devDependencies:
   '@antfu/eslint-config': 0.10.0_eslint@8.2.0+typescript@4.4.4
   '@iconify-json/carbon': 1.0.9
   '@iconify-json/twemoji': 1.0.2
+  '@pinia/nuxt': 0.1.2_pinia@2.0.2
   '@unocss/nuxt': 0.6.4
   '@vueuse/core': 6.7.6
   eslint: 8.2.0
@@ -724,6 +734,19 @@ packages:
       - webpack-cli
     dev: true
 
+  /@pinia/nuxt/0.1.2_pinia@2.0.2:
+    resolution: {integrity: sha512-GS3+o43jSPH78ZJgxmFXgqzJudWILLTD3Kx/BNtc+MIkNIRdN0rZ1K9REXeJeKjTVfrTGldapHK7AsEhkJcpIQ==}
+    peerDependencies:
+      pinia: ~2.0.2
+    dependencies:
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27268729.5b8e10f
+      pinia: 2.0.2_typescript@4.4.4
+      vue-demi: 0.12.0
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@polka/url/1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
@@ -1269,7 +1292,6 @@ packages:
 
   /@vue/devtools-api/6.0.0-beta.19:
     resolution: {integrity: sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw==}
-    dev: true
 
   /@vue/reactivity/3.2.21:
     resolution: {integrity: sha512-7C57zFm/5E3SSTUhVuYj1InDwuJ+GIVQ/z+H43C9sST85gIThGXVhksl1yWTAadf8Yz4T5lSbqi5Ds8U/ueWcw==}
@@ -5084,6 +5106,23 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /pinia/2.0.2_typescript@4.4.4:
+    resolution: {integrity: sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.3.0
+      typescript: ^4.4.4
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.0.0-beta.19
+      typescript: 4.4.4
+      vue-demi: 0.12.0
+    dev: false
+
   /pirates/4.0.1:
     resolution: {integrity: sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==}
     engines: {node: '>= 6'}
@@ -6755,7 +6794,6 @@ packages:
     peerDependenciesMeta:
       '@vue/composition-api':
         optional: true
-    dev: true
 
   /vue-eslint-parser/7.11.0_eslint@8.2.0:
     resolution: {integrity: sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==}

stores/user.ts

@@ -0,0 +1,34 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  /**
+   * Current named of the user.
+   */
+  const savedName = ref('')
+  const previousNames = ref(new Set<string>())
+
+  const usedNames = computed(() => Array.from(previousNames.value))
+  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value)
+      previousNames.value.add(savedName.value)
+
+    savedName.value = name
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))