Cela fonctionne sans que nous ayons à importer les composants et à configurer nous-mêmes le routage car, par défaut, Nuxt s'occupe de l'importation des composants et du routage pour nous.

En outre, allons-y. modifier le composant par défaut . Dans components/Logo.vueremplacez le contenu par le code suivant :

Nous pouvons maintenant ajouter notre composant siteHeader.vue à notre site. Dans layouts/default.vueajoutez juste au-dessus du composant.

...

Le composant restitue la page Nuxt actuelle en fonction de l'itinéraire.

Création de notre premier article

Dans content/qui est un dossier créé automatiquement pour le nuxt/contentcréez un nouveau dossier articles/ puis un nouveau fichier dans le dossier first-blog-post.md. Voici le fichier de notre premier article au format markdown. Entrez le code suivant :

---

titre : Mon premier article de blog
description : Ceci est mon premier article de blog sur algolia nuxt
mots-clés : [first, lorem ipsum, Iusto]

---

## Lorem ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Assumenda dolor quisquam consequatur distinctio perferendis.

## Iusto nobis nisi

repousser magni facilis necessitatibus, enim temporibus.

- Quisquam
- assomption
- sapiente explicabo
- totam nostrum invente

La zone entourée de --- est le YAML Front Matter qui sera utilisé comme variable injectée personnalisée à laquelle nous accéderons dans notre modèle.[19659003]Ensuite, nous allons créer une page dynamique qui sera utilisée pour :

• Récupérer le contenu de l'article à l'aide de asyncData qui s'exécute avant que la page ne soit rendue. Nous avons accès à notre contenu et aux variables personnalisées injectées via le contexte en utilisant la variable $content. Comme nous utilisons une page dynamique, nous pouvons savoir quel fichier d'article récupérer en utilisant la variable params.slug fournie par Vue Router pour obtenir le nom de chaque article.
• Render l'article dans le modèle à l'aide de .

Ok, accédez à pages/ et créez un dossier blog/. Créez un fichier _slug.vue (notre page dynamique) et insérez ce qui suit :

Si vous accédez à votre navigateur et accédez à http://localhost:3000/blog/first-blog-postvous devriez voir notre contenu rendu :

Maintenant que notre page dynamique fonctionne et que notre article est rendu, créons des doublons pour les besoins de ce didacticiel.

---

titre : Mon premier article de blog
description : Ceci est mon premier article de blog sur algolia nuxt
mots-clés : [first, Placeat amet, Iusto]

---

## Lorem ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Assumenda dolor quisquam consequatur distinctio perferendis.

## Iusto nobis nisi

repousser magni facilis necessitatibus, enim temporibus.

- Quisquam
- assomption
- sapiente explicabo
- totam nostrum inventeur

Créer une page de blog pour lister nos articles

Créons maintenant une page de blog pour lister nos articles. C'est aussi là que vivra notre barre de recherche. Créez un nouveau fichier pages/blog/index.vue.

Ici, dans notre fonction asyncDatalors de la récupération de $content('articles') nous chaînons .only(['title', 'slug', 'updatedAt', 'description']) à récupérer uniquement ces attributs des articles, .sortBy('createdAt', 'asc') pour les trier et enfin fetch() pour récupérer les données et les affecter à const articles que nous renvoyons ensuite.

Ainsi, dans notre nous pouvons la liste des articles et créer des liens vers eux en utilisant leur propriété slug.

Notre page devrait ressembler à quelque chose comme ceci :

Excellent 🍻

Installer et configurer Algolia Search et Vue-instantSearch

Maintenant que nous avons éliminé les éléments de base, nous pouvons intégrer Algolia Search à notre site de blog.

Tout d'abord, installons tous les packages dont nous aurons besoin :

#install dependencies

npm install vue-instantsearch instantsearch.css algoliasearch nuxt-content-algolia remove-markdown dotenv

• vue-instantsearch
  Algolia InstantSearch UI composant/bibliothèque de widgets pour Vue.
• instantsearch.css
  Personnalisé style pour les widgets instantSearch.
• algoliasearch
  Un client HTTP pour interagir avec Algolia.
• nuxt-content-algolia
  Package pour indexer notre contenu et l'envoyer à Algolia.[19659008]remove-markdown
  Cela supprime tous les caractères de démarque du bodyPlainText des articles.
• dotenv
  Cela permet de lire les variables d'environnement de .env .

Nous utiliserons ces packages tout au long du reste de ce didacticiel, mais d'abord, configurons un compte Algolia.

Configurer un compte Algolia

Inscrivez-vous pour un compte Algolia sur https://www.algolia.com/. Vous pouvez le faire gratuitement, cependant, cela vous donnera une période d'essai de 14 jours. Étant donné que nous n'effectuons pas de tâches lourdes avec Algolia, leur niveau gratuit conviendra parfaitement à notre projet après l'expiration de la période d'essai.

Vous suivrez certaines étapes d'intégration. Après cela, une UNNAMED APP sera créée pour vous. Dans la barre latérale, sur la gauche, accédez aux les clés API qui vous seront fournies :

• ID d'application
  Il s'agit de votre identifiant d'application unique. Elle sert à vous identifier lorsque vous utilisez l'API d'Algolia.
• Search Only API Key
  Il s'agit de la clé API publique à utiliser dans votre code frontend. Cette clé est uniquement utilisable pour les requêtes de recherche et l'envoi de données à l'API Insights.
• Admin API Key
  Cette clé est utilisée pour créer, mettre à jour et SUPPRIMER vos index. Vous pouvez également l'utiliser pour gérer vos clés API.

Maintenant que nous avons nos clés API, enregistrons-les dans un fichier .env pour notre projet. Accédez au dossier racine du projet et créez un nouveau fichier .env et entrez vos clés API :

.env

ALGOLIA_APP_ID=algolia-app-id
ALGOLIA_API_KEY=algolia-admin-api-key

Remplacez algolia-app-id et algolia-admin-api-key par votre ID d'application et votre clé API Admin respectivement.[19659149]Créez un index 'Articles' pour nos articles Nuxt en Algolia

Sur votre compte Algolia, rendez-vous sur Indices et cliquez sur créer un index. Saisissez ensuite le nom de votre index et nous utiliserons articles pour ce tutoriel.

Comme vous pouvez le voir, notre index 'article' a été créé.

Configurez nuxt-content-algolia pour envoyer l'index de contenu à Algolia

Nous avons créé avec succès une propriété d'index sur notre compte. Nous devons maintenant générer un index à partir de nos articles Nuxt, ce qu'Algolia utilisera pour fournir des résultats aux requêtes de recherche. C'est à cela que sert le module nuxt-content-algolia que nous avons précédemment installé.

Nous devons le configurer dans notre nuxt.config.js.

Tout d'abord, nous l'ajouterons à nos buildModules:

// nuxt.config.js

...

// Modules pour dev et build (recommandé) : https://go.nuxtjs.dev/config-modules
modules de construction : ['@nuxtjs/tailwindcss', 'nuxt-content-algolia'],

...

Ensuite, nous créons un nouvel objet nuxtContentAlgolia et y ajoutons quelques configurations :

// nuxt.config.js

exporter par défaut {
...

nuxtContentAlgolia : {

  // ID d'application
  appId : process.env.ALGOLIA_APP_ID,
    
  // Clé API administrateur
  // !IMPORTANT la clé secrète doit toujours être une variable d'environnement
  // ce n'est pas votre seule clé de recherche mais la clé qui autorise l'accès pour modifier l'index
  apiKey : process.env.ALGOLIA_ADMIN_API_KEY,

  chemins : [
    {
      name: 'articles',
      index: process.env.ALGOLIA_INDEX || 'articles',
      fields: ['title', 'description', 'tags', 'bodyPlainText']
    }
  ]
},


...
}

Le nuxtContentAlgolia prend les propriétés suivantes :

• appId
  Application ID*.
• apiKey
  Admin API Key.
• [19659317]paths
  Un tableau d'objets d'index. C'est là que nous définissons d'où nous voulons générer des index. Chaque objet prend les propriétés suivantes :
  • name
    Le nom du dossier dans le dossier content/. En d'autres termes, nous utiliserons des fichiers dans content/articles/ puisque nous avons défini le nom comme 'articles'.
  • index
    C'est le nom de l'index que nous avons créé sur notre tableau de bord Algolia.
  • fields
    Un tableau de champs à indexer. C'est sur quoi Algolia basera ses requêtes de recherche.

Générer bodyPlainText à partir d'articles

Notez que dans le tableau fieldsnous avons bodyPlainText comme une de ses valeurs. Nuxt Content ne nous fournit pas un tel champ. Au lieu de cela, ce que Nuxt Content fournit est body qui est un objet complexe qui sera rendu dans le DOM.

Afin d'obtenir notre bodyPlainText qui est simplement tout texte, dépouillé de Markdown et les caractères HTML, nous devons utiliser un autre package, remove-markdown.

Pour utiliser la fonction remove-markdownnous devons utiliser Nuxt crochets. Nous utiliserons le crochet 'content:file:beforeInsert' qui vous permet d'ajouter des données à un document avant qu'il ne soit inséré, de supprimer la démarque et d'ajouter le texte brut généré à bodyPlainText.

 // nuxt.config.js

exporter par défaut {
...
    
crochets : {
  'content:file:beforeInsert': (document)=>{
    const removeMd = require('remove-markdown');

    if(document.extension === '.md'){
      document.bodyPlainText = removeMd(document.text);
    }
  }
},

...
}

Dans le hook 'content:file:beforeInsert'nous obtenons le package remove-markdown. Ensuite, nous vérifions si le fichier à insérer est un fichier de démarques. S'il s'agit d'un fichier de démarques, nous générons le texte brut en appelant removeMd qui prend document.text — le texte de notre contenu, comme argument, que nous affectons à un nouveau [Propriétédocument.bodyPlainText. La propriété sera désormais disponible pour une utilisation via Nuxt Content.

Super ! Maintenant que c'est fait, nous pouvons générer l'index et l'envoyer à Algolia.

Confirmer l'index Algolia

D'accord. Nous avons configuré nuxt-content-algolia et nous avons généré bodyPlainText pour nos articles. Nous pouvons maintenant générer cet index et envoyer les données à Algolia en construisant notre projet en utilisant nuxt generate.

npm run generate

Cela va commencer à construire notre projet pour la production et exécuter le nuxtContentAlgolia config. Lorsque nous regardons notre terminal après la construction, nous devrions voir que notre contenu a été indexé et envoyé à Algolia.

Pour vérifier, vous pouvez accéder à votre tableau de bord Algolia :

Ouvrez Indicespuis accédez à Search API logsoù vous verrez un journal des opérations effectuées avec votre Search API . Vous pouvez maintenant ouvrir et vérifier l'appel d'API envoyé depuis votre projet Nuxt. Cela devrait avoir le contenu de votre article tel que spécifié dans la section fields de la configuration de nuxtContentAlgolia.

Bien ! 🍻

Création de l'interface utilisateur de recherche

Jusqu'à présent, nous avons pu générer et envoyer des données d'indexation à Algolia, ce qui signifie que nous sommes en mesure d'interroger ces données pour obtenir des résultats de recherche.

Pour le faire dans notre app, nous devons créer notre interface utilisateur de recherche.

Vue-InstantSearch fournit de nombreux composants d'interface utilisateur utilisant Algolia qui peuvent être intégrés pour offrir une expérience de recherche riche aux utilisateurs. Configurons-le.

Créer et configurer le plugin vue-instantSearch

Pour utiliser les widgets Algolia InstantSearch dans notre application Nuxt, nous devrons créer un plugin dans notre dossier plugins.

Allez dans plugins/ et créez un nouveau fichier vue-instantsearch.js.

//plugins/vue- recherche instantanée.js

importer Vue depuis 'vue'
importer InstantSearch depuis 'vue-instantsearch'

Vue.use(InstantSearch)

Ici, nous importons simplement InstantSearch et l'utilisons sur le frontend Vue.

Maintenant, nous devons ajouter le vue-instantSearch à nos plugins et options de build dans nuxt.config.js afin de le transpiler vers Vue.js.

Alors, passez à nuxt.config. js et ajoutez ce qui suit :

// nuxt.config.js

exporter par défaut {
...

// Plugins à exécuter avant le rendu de la page : https://go.nuxtjs.dev/config-plugins
plug-ins : ['@/plugins/vue-instantsearch.js'],

// Configuration de la construction : https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#transpile
construire: {
  transpiler : ['vue-instantsearch', 'instantsearch.js/es']
}

...
Le code }

InstantSearch utilise des modules ES, mais il doit être exécuté dans Node.js. C'est pourquoi nous devons informer Nuxt que ces fichiers doivent être transpilés pendant la construction.
Maintenant que nous avons configuré notre plugin vue-instantSearchcréons un composant de recherche.

Créez un composant de recherche

Créez un nouveau fichier components/Search.vue.

Comme nous avons installé vue-instantSearch en tant que plugin, nous pouvons l'utiliser dans nos composants Vue.

...

Tout d'abord, dans la section nous importons algoliaSearch et instantsearch.css. Ensuite, nous fournissons les informations d'identification pour notre recherche Algolia qui sont :

• Application ID,
• Search API key.

ais-instant-search Widget

• index-nameNom de l'index à interroger, dans ce cas, ce serait articles.
• search- clientalgoliaSearch objet contenant l'ID d'application et la clé d'API de recherche.

...

ais-configure Widget

• attributesToSnippet[19659123]Le nom de l'attribut ou le champ à extraire, nous en verrons bientôt plus à ce sujet.
• hits-per-page.camelNombre de résultats dans une page.
• snippetEllipsisText="…"Ensemble ... avant et après le texte coupé.

...

ais-autocomplete Widget

...

• Remplacer la sortie DOM de le widget en utilisant l'emplacement default. Nous le faisons en utilisant les étendues :
  • currentRefinement : string : la valeur actuelle de la requête.
  • indices : object[] : la liste des indices.
  • refine : (string) = > void : la fonction pour modifier la requête.

...

• Créez une recherche à retenir, modifiez la requête et la valeur du currentRefinement.

...

...

• Afficher les résultats de la recherche pour chaque index. Chaque index a les propriétés suivantes :
  • indexName : string : le nom de l'index.
  • indexId : string : l'id de l'index.
  • hits : object[] : les résultats résolus de l'index correspondant à la requête.

...

• Ensuite, affichez les résultats — hits.

...

    

      

        
      
      

        
      
      
        
      
    


...

• Widget pour mettre en évidence la partie du résultat qui correspond directement à la requête du champ passé au attribute prop.
• Widget pour afficher la section appropriée de l'attribut extrait et le mettre en surbrillance. Nous avons défini l'attribut dans attributesToSnippet dans .

Grand aperçu)

Stylisation de notre composant de recherche

...

  


...

...


...

...

Configuration d'InstantSearch pour le rendu côté serveur (SSR)

• Lisez les résultats de la recherche à partir de la page.
• Rendez (ou hydratez) l'application Vue avec les résultats de la recherche.

Utilisation de Mixins, serverPreFetchbeforeMount

...

We’re simply doing the following:

• createServerRootMixin to create a reusable search instance;
• findResultsState in serverPrefetch to perform a search query on the back end;
• hydrate method in beforeMount.

Then in our ,

...

    ...

...

Here, we to replace ais-instant-search with ais-instant-search-ssr.

Conclusion

We’ve successfully built a Nuxt site with some content handled by Nuxt Content and integrated a simple Algolia search into our site. We’ve also managed to optimize it for SSR. I have a link to the source code of the project in this tutorial and a demo site deployed on Netlify, the links are down below.

We have tons of options available to customize and provide a rich search experience now that the basics are out of the way. The Algolia widgets showcase is a great way to explore those options and widgets. You’ll also find more information on the widgets used in this tutorial.

GitHub Source Code

Further Reading

Here are some links that I think you will find useful:

(ks, vf, yk, il)