Prismic & Nuxt 3 : Un Duo Dynamique pour votre développement.

Lorsqu'il s'agit de développer un site web performant et optimisé pour le SEO avec un CMS robuste, combiner Nuxt 3 et Prismic est un choix exceptionnel. Nuxt 3, la dernière version du populaire framework Vue, se concentre sur la performance, le rendu côté serveur et des configurations conviviales pour les développeurs. Prismic, quant à lui, est un CMS sans tête qui excelle dans la fourniture de capacités de gestion de contenu flexibles, en particulier pour les sites dynamiques. Dans cet article, nous explorerons les avantages et les inconvénients de l'utilisation de Prismic avec Nuxt 3, ainsi que des exemples illustrant comment ils fonctionnent ensemble pour créer un site web riche en contenu et performant.

Pourquoi utiliser Nuxt 3 avec Prismic ?

Nuxt 3 permet le rendu côté serveur, améliorant les temps de chargement et le SEO en livrant des pages entièrement rendues aux utilisateurs. Prismic complète cela en découplant la gestion de contenu du frontend, permettant aux équipes de contenu de gérer les mises à jour de manière indépendante. Cette combinaison est particulièrement utile pour les blogs, les pages de destination et les sites dynamiques qui nécessitent des mises à jour régulières de contenu.

L'intégration de Prismic avec Nuxt 3 apporte des avantages supplémentaires :

Rendu Côté Serveur (SSR) : Les capacités SSR de Nuxt 3 garantissent des temps de chargement rapides et un meilleur SEO, et l'API de contenu de Prismic s'intègre parfaitement, facilitant le chargement rapide du contenu.
Gestion Dynamique du Contenu : L'approche sans tête de Prismic permet aux équipes de contenu de gérer les mises à jour sans support des développeurs, maintenant le contenu frais sans impacter le code.
Optimisation SEO : Les fonctionnalités SEO de Nuxt 3, associées à l'API flexible de Prismic, offrent un contrôle sur des éléments SEO essentiels comme les balises méta et les URLs canoniques.
Modélisation de Contenu Flexible : Les types personnalisés et la machine à tranches de Prismic offrent une approche modulaire à la conception de contenu, permettant aux éditeurs de mélanger et d'associer des composants pour une expérience dynamique.
Amélioration du Flux de Développement : Le routage basé sur des fichiers de Nuxt 3 simplifie la structure, tandis que le CMS basé sur l'API de Prismic maintient le contenu séparé du code, permettant un développement plus propre et modulaire.
Mode Aperçu et Rédaction : Le mode aperçu de Prismic et le SSR de Nuxt 3 permettent aux équipes de contenu de voir les modifications en temps réel avant la publication, rendant les mises à jour de contenu fluides.

Inconvénients Potentiels

L'utilisation de Prismic avec Nuxt 3 offre de nombreux avantages, mais il y a quelques défis potentiels à considérer :

Dépendance à une API Externe : Étant donné que Prismic est un CMS cloud, il dépend de la disponibilité des serveurs et de la connexion réseau. Si les serveurs de Prismic connaissent des pannes, la livraison de contenu peut être affectée, à moins qu'un système de mise en cache soit en place.
Accès Limité Hors Ligne : En tant que service cloud, Prismic nécessite un accès Internet pour récupérer le contenu. Cela peut être limitant pour le développement local sans connexion réseau.
Personnalisation Complexe : Pour des structures de contenu très personnalisées, Prismic peut nécessiter un développement supplémentaire, ce qui peut compliquer la configuration et nuire à la simplicité d'un CMS sans tête.
Limites de Taux de l'API : Les applications ou sites plus importants avec un trafic élevé peuvent rencontrer des limites de taux d'API. Prismic propose des plans avec différentes limites, mais un trafic élevé peut augmenter les coûts pour les sites nécessitant un accès élargi.

Démarrer avec Nuxt 3 et Prismic : Un Exemple de Base

Pour voir comment Prismic et Nuxt 3 fonctionnent ensemble, parcourons une configuration simple.

Étape 1 : Installer Nuxt 3 et les Modules Prismic

Tout d'abord, initialisez un nouveau projet Nuxt 3 et installez les modules Prismic requis :

Terminal

npx nuxi@latest init prismic-nuxt
cd prismic-nuxt
npm install

Next, add the Prismic Nuxt module:

Terminal

npx @slicemachine/init@latest

Étape 2 : Configurer Prismic dans Nuxt

Dans nuxt.config.ts, ajoutez le point de terminaison pour votre dépôt Prismic :

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/prismic'],
  prismic: {
    endpoint: 'https://your-repository-name.prismic.io/api/v2', // Replace with your Prismic repo URL
  },
})

Étape 3 : Récupérer et Afficher le Contenu

Avec Prismic configuré, vous pouvez récupérer du contenu pour une page Nuxt 3. Voici un exemple pour récupérer un article de blog :

pages/blog.vue

<template>
  <div>
    <h1 class="text-2xl font-bold mb-8">
      {{ $prismic.asText(blogPage.data.title) }}
    </h1>
    <div v-html="$prismic.asHTML(blogPage.data.content)"></div>
  </div>
</template>

<script setup>
const { client } = usePrismic();

const { data: blogPage } = await useAsyncData("blog_page", () =>
  client.getSingle("blog_page")
);
</script>

Dans ce extrait :

usePrismic est un composable Prismic global.
client.getSingle récupère la page de blog depuis Prismic.
blogPage.title et blogPage.content affichent le titre et le contenu depuis Prismic sur la page Nuxt.
$prismic.asHTML convertit le contenu de l'objet Prismic en HTML.

Étape 4 : Utiliser la Slice Machine de Prismic pour du Contenu Dynamique

La Slice Machine de Prismic vous permet de créer des composants réutilisables, ou « tranches », que les éditeurs peuvent utiliser pour construire des pages. Par exemple, pour inclure une tranche "Section de Texte" dans votre page Nuxt, configurez-la comme ceci :

pages/index.vue

<template>
  <section>
    <h1 class="text-2xl font-bold mb-8">
      {{ $prismic.asText(homepage.data.title) }}
    </h1>
  </section>
  <section v-if="homepage.data.body.length">
    <component
      v-for="slice in homepage.data.body"
      :is="getSliceComponent(slice.slice_type)"
      :key="slice.id"
      :slice="slice"
    />
  </section>
</template>

<script setup>
const { client } = usePrismic();

const { data: homepage } = await useAsyncData("homepage", () =>
  client.getSingle("homepage")
);

const getSliceComponent = (type) => `section-${type}`;
</script>

Cet extrait démontre comment rendre dynamiquement des tranches depuis Prismic, facilitant ainsi la création de mises en page complexes pour les éditeurs de contenu.

Maintenant, créez deux fichiers Image.vue et Text.vue dans un dossier components.

components/Image.vue

<template>
  <div class="grid grid-cols-2 gap-2">
    <img
      :src="s.gallery.url"
      :alt="s.gallery.alt"
      v-for="(s, index) in slice.items"
      :key="`img__${index}`"
    />
  </div>
</template>

<script setup>
defineProps({ slice: { type: Array } });
</script>

components/Text.vue

<template>
  <div v-html="$prismic.asHTML(slice.primary.content)" class="text"></div>
</template>
<script setup>
defineProps({ slice: { type: Array } });
</script>

<style lang="scss" scoped>
.text {
  margin-bottom: 10px;
  ::v-deep(h2) {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>

Avantages et Inconvénients

Avantages :

Le rendu côté serveur améliore le SEO.
Gestion de contenu flexible pour les équipes.
Modes de prévisualisation et de brouillon en temps réel.
SEO amélioré avec un contrôle dynamique des métas.
Flux de développement optimisé.

Inconvénients :

Dépendance aux API externes.
Fonctionnalités limitées hors ligne.
Les coûts peuvent augmenter avec des besoins avancés.

Démo

Github : https://github.com/SAHA-Technology/nuxt-prismic-blog
Vercel : https://demo-saha-nuxt-prismic.vercel.app/
Ressources: Prismic, Nuxt, Tailwindcss

Conclusion

Nuxt 3 et Prismic constituent une combinaison puissante pour créer des sites dynamiques axés sur le contenu. Avec le rendu côté serveur, la gestion de contenu flexible et un design optimisé pour le SEO, cette configuration est parfaite pour les sites web nécessitant à la fois des performances élevées et des mises à jour de contenu faciles. Bien que certains défis existent, notamment en matière de personnalisation et d'utilisation des API, les avantages d'utiliser Prismic avec Nuxt 3 en font une solution très efficace pour créer des sites rapides, flexibles et faciles à gérer.

Chez SAHA Technology, nous utilisons Prismic et Nuxt. Si vous avez un projet et souhaitez bénéficier de Prismic et Nuxt, discutons-en !
Nous vous offrirons une remise de 25% lors de notre première collaboration.