docs: minor formatting

diff --git a/packages/docs/.vitepress/components/VueSchoolLink.vue b/packages/docs/.vitepress/components/VueSchoolLink.vue
index 16a3633210ce25575dc4db378f10b85d52c79241..874bf751026061a9c238f3a9a24b2ea71c06791f 100644 (file)
--- a/packages/docs/.vitepress/components/VueSchoolLink.vue
+++ b/packages/docs/.vitepress/components/VueSchoolLink.vue
@@ -10,14 +10,11 @@
     </a>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    href: { type: String, required: true },
-    title: { type: String, required: true },
-  },
-}
+
+<script setup lang="ts">
+defineProps<{ href: string; title: string }>()
 </script>
+
 <style scoped>
 .vueschool {
   margin-top: 20px;
@@ -55,4 +52,4 @@ export default {
   border-bottom: 5px solid transparent;
   border-left: 8px solid #fff;
 }
-</style>
\ No newline at end of file
+</style>

diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js
index 9e45f8c1e365fb3f4c21f5ca9dee82d01e87cfb6..e87499810a74a54a605a681136e0463c17addd61 100644 (file)
--- a/packages/docs/.vitepress/theme/index.js
+++ b/packages/docs/.vitepress/theme/index.js
@@ -3,7 +3,7 @@ import VueSchoolLink from '../components/VueSchoolLink.vue'
 import { Layout } from './Layout'
 import './custom.css'
 import './code-theme.css'
-// import { createPinia } from '../../../pinia'
+// import { createPinia } from 'pinia'
 
 /** @type {import('vitepress').Theme} */
 const config = {
@@ -12,6 +12,7 @@ const config = {
   Layout,
 
   enhanceApp({ app }) {
+    // app.use(createPinia())
     app.component('VueSchoolLink', VueSchoolLink)
   },
 }

diff --git a/packages/docs/core-concepts/actions.md b/packages/docs/core-concepts/actions.md
index 7cad0ca8356df2ca1c70ed6bde04e778a3bbdc1b..8db70d680be9b479b6f91f4784021dd3bab436f7 100644 (file)
--- a/packages/docs/core-concepts/actions.md
+++ b/packages/docs/core-concepts/actions.md
@@ -1,6 +1,9 @@
 # Actions
 
-<VueSchoolLink href="https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia"/>
+<VueSchoolLink
+  href="https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia"
+  title="Learn all about actions in Pinia"
+/>
 
 Actions are the equivalent of [methods](https://v3.vuejs.org/guide/data-methods.html#methods) in components. They can be defined with the `actions` property in `defineStore()` and **they are perfect to define business logic**:
 

diff --git a/packages/docs/core-concepts/getters.md b/packages/docs/core-concepts/getters.md
index 1681186b7be9e936afab47715dae56ff591ded9a..dc4d0cb5bd0d4634c9d9524b1a700f9ff0c8dd2e 100644 (file)
--- a/packages/docs/core-concepts/getters.md
+++ b/packages/docs/core-concepts/getters.md
@@ -1,6 +1,9 @@
 # Getters
 
-<VueSchoolLink href="https://vueschool.io/lessons/getters-in-pinia"/>
+<VueSchoolLink
+  href="https://vueschool.io/lessons/getters-in-pinia"
+  title="Learn all about getters in Pinia"
+/>
 
 Getters are exactly the equivalent of [computed values](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-values) for the state of a Store. They can be defined with the `getters` property in `defineStore()`. They receive the `state` as the first parameter **to encourage** the usage of arrow function:
 

diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md
index 7e1e2987a2bcdba3476c643574eac33d22327df3..4eb3fcc0fd368af7ccf04fb1ef8d86cdfa450778 100644 (file)
--- a/packages/docs/core-concepts/index.md
+++ b/packages/docs/core-concepts/index.md
@@ -1,6 +1,9 @@
 # Defining a Store
 
-<VueSchoolLink href="https://vueschool.io/lessons/define-your-first-pinia-store"/>
+<VueSchoolLink
+  href="https://vueschool.io/lessons/define-your-first-pinia-store"
+  title="Learn how to define and use stores in Pinia"
+/>
 
 Before diving into core concepts, we need to know that a store is defined using `defineStore()` and that it requires a **unique** name, passed as the first argument:
 

diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md
index 7c78cac162cf178a4791553def32fe2cead48a86..19e8b83e1a86ba8732c66bc90f4088236429c942 100644 (file)
--- a/packages/docs/core-concepts/state.md
+++ b/packages/docs/core-concepts/state.md
@@ -1,6 +1,9 @@
 # State
 
-<VueSchoolLink href="https://vueschool.io/lessons/access-state-from-a-pinia-store"/>
+<VueSchoolLink
+  href="https://vueschool.io/lessons/access-state-from-a-pinia-store"
+  title="Learn all about state in Pinia"
+/>
 
 The state is, most of the time, the central part of your store. People often start by defining the state that represents their app. In Pinia the state is defined as a function that returns the initial state. This allows Pinia to work in both Server and Client Side.
 

diff --git a/packages/docs/introduction.md b/packages/docs/introduction.md
index 2ea3d71af41c28a4b35fc50e4369f79c7cd21d69..d478bd1fce33f51e3e55016a4e8e9efc88300fcb 100644 (file)
--- a/packages/docs/introduction.md
+++ b/packages/docs/introduction.md
@@ -1,6 +1,9 @@
 # Introduction
 
-<VueSchoolLink href="https://vueschool.io/lessons/introduction-to-pinia"/>
+<VueSchoolLink
+  href="https://vueschool.io/lessons/introduction-to-pinia"
+  title="Get started with Pinia"
+/>
 
 Pinia [started](https://github.com/vuejs/pinia/commit/06aeef54e2cad66696063c62829dac74e15fd19e) as an experiment to redesign what a Store for Vue could look like with the [Composition API](https://github.com/vuejs/composition-api) around November 2019. Since then, the initial principles are still the same, but Pinia works for both Vue 2 and Vue 3 **and doesn't require you to use the composition API**. The API is the same for both except for _installation_ and _SSR_, and these docs are targeted to Vue 3 **with notes about Vue 2** whenever necessary so it can be read by Vue 2 and Vue 3 users!