Lorsque l'on aborde le développement web moderne, la question se pose souvent: "pourquoi utiliser un framework front-end ?". Il existe

Pourquoi utiliser un framework front comme Nuxt

> Tous les exemples de code inclus dans les tutoriels Nuxt 3 sont basés sur la Composition API de VueJS

Créer des composants avec Nuxt 3

Créer des layouts avec Nuxt 3

Découvrir les stores de Nuxt 3 avec Pinia

Dans ce chapitre, nous allons explorer comment mettre en place le rendu côté serveur (SSR - Server Side Rendering) avec

Le SSR sur Nuxt 3

VueJS

> Tous les exemples de code inclus dans les tutoriels Nuxt 3 sont basés sur la Composition API de VueJS et en Typescript.
>

Dans ce chapitre, nous allons explorer l'utilisation des stores avec Nuxt 3 en utilisant la bibliothèque Pinia, qui est un excellent choix pour gérer l'état de votre application avec la Composition API de Vue 3.

### Qu'est-ce qu'un store ?

Un store est un composant central pour la gestion de l'état dans une application Vue. Il permet de stocker et de partager des données entre différents composants de manière réactive. Avec Nuxt 3, l'utilisation de Pinia pour créer des stores est fortement recommandée.

### Installation de Pinia

Pour commencer, nous devons installer Pinia dans notre projet Nuxt 3. Ouvrez votre terminal et exécutez la commande suivante :

```bash
npm install pinia
```

### Création d'un store avec Pinia

Créer un store avec Pinia est simple. Vous pouvez créer un nouveau fichier, par exemple, `myStore.ts`, dans le répertoire stores de votre projet Nuxt 3. Voici un exemple de contenu pour ce fichier :

```ts
import { createPinia } from 'pinia'

export const pinia = createPinia()

export const useMyStore = pinia.defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
})
```

### Utilisation du store dans un composant
Maintenant que nous avons créé notre store, voyons comment l'utiliser dans un composant Nuxt 3. Voici un exemple de composant utilisant ce dernier :

```
<template>
  <div>
    <h1>Utilisation du Store avec Pinia</h1>
    <p>Compteur : {{ count }}</p>
    <button @click="increment">Incrémenter</button>
    <button @click="decrement">Décrémenter</button>
  </div>
</template>

<script lang="ts" setup>
import { useMyStore } from '~/stores/myStore'

const count = useMyStore().count;
	
const increment = (() => {
	useMyStore().increment()
})

const decrement = (() => {
	useMyStore().decrement()
})
</script>
```

Dans cet exemple, nous avons importé le store myStore que nous avons créé précédemment et nous avons utilisé la Composition API pour accéder à l'état du store et appeler ses actions.

Avec Pinia, la gestion de l'état devient simple et efficace dans votre application Nuxt 3. **Allez plus loin** et explorez les fonctionnalités de Pinia pour optimiser la gestion de l'état de votre application grâce à la [documentation](https://pinia.vuejs.org/core-concepts/).

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Apprenez à utiliser Nuxt 3 et à l'intégrer à vos projets