Cómo implementar la funcionalidad de búsqueda en su aplicación Nuxt utilizando Algolia InstantSearch

 

 

 

  • ¡Registro!
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. Requisitos previos
    2. Configurando nuestra aplicación Nuxt
    3. Instale el contenido de Nuxt por separado
    4. Instalar y configurar TailwindCSS
      1. Crear archivo de configuración
      2. Instalar la tipografía TailwindCSS
      3. Configure TailwindCSS para eliminar estilos no utilizados en producción
    5. Creando nuestras páginas y artículos
      1. Creación de un encabezado y navegación del sitio
      2. Creando nuestro primer artículo
      3. Crear una página de blog para enumerar nuestros artículos
    6. Instalar y configurar Algolia Search y Vue-instantSearch
      1. Configurar una cuenta de Algolia
      2. Cree un 'Articles'índice para nuestros artículos de Nuxt en Algolia
      3. Configurar nuxt-content-algoliapara enviar índice de contenido a Algolia
      4. Generar bodyPlainTexta partir de artículos
      5. Confirmar el índice de Algolia
    7. Building The Search UI
      1. Create And Configure vue-instantSearch Plugin
      2. Create A Search Component
      3. ais-instant-search Widget
      4. ais-configure Widget
      5. ais-autocomplete Widget

    Muchos sitios web tienen algún tipo de función de búsqueda porque ayuda a los usuarios a navegar fácilmente por su contenido. Implementarlo de la manera correcta puede resultar complicado y es posible que no brinde una buena experiencia de usuario. En este tutorial, integraremos Algolia, un popular y potente servicio de búsqueda para obtener la mejor experiencia en nuestro sitio Nuxt.

     

    Brindar a los usuarios la capacidad de buscar rápidamente y navegar fácilmente por nuestro contenido conlleva grandes beneficios. Esto no solo mejora la experiencia del usuario, sino que también aumenta la retención de usuarios y aumenta la conversión, ya que los usuarios ahora pueden explorar más allá de lo que los llevó a nuestro sitio en primer lugar.

    En este tutorial, veremos cómo integrar esta funcionalidad de búsqueda en nuestra aplicación Nuxt usando Algolia. Algolia es un servicio de terceros que podemos integrar en nuestra aplicación y nos proporciona un conjunto de herramientas que nos permiten crear una experiencia de búsqueda completa en nuestros sitios y aplicaciones.

    Usaremos Nuxt Content, "CMS sin cabeza basado en Git" que nos permite crear y administrar contenido usando archivos Markdown, XML, JSON, etc. Construiremos un sitio Nuxt con Nuxt Content con una función de búsqueda usando Algolia InstantSearch, para diseñar, usaremos TailwindCSS. Este tutorial está dirigido a desarrolladores de Vue.js que estén familiarizados con Nuxt.

    Requisitos previos

    Para seguir este tutorial, necesitará tener instalado lo siguiente:

     

    • nodo ,
    • Un editor de texto, recomiendo VS Code con la extensión Vetur (para las funciones de sintaxis de Vue.js en VS Code),
    • Un terminal, puedes utilizar el terminal integrado de VS Code o cualquier otro de tu elección.

    También necesitarás un conocimiento básico de lo siguiente para poder seguirlo sin problemas:

    • HTML, CSS y JavaScript,
    • Vue.js ,
    • Nuxt.js ,
    • Viento de colaCSS .

    Configurando nuestra aplicación Nuxt

    Nuxt.js es un marco creado en Vue, tiene muchas capacidades y características, incluida la representación del lado del servidor (SSR).

    Para instalarlo abrimos nuestra terminal y ejecutamos:

    npx create-nuxt-app project-name

    ¿Dónde project-nameestá el nombre de la carpeta de nuestro proyecto que usaré algolia-nuxtpara este proyecto?

    Al ejecutar el comando, se le harán algunas preguntas (nombre, opciones de Nuxt, marco de interfaz de usuario, TypeScript, etc.). Para obtener más información sobre todas las opciones, consulte la aplicación Create Nuxt .

    Cuando se le soliciten los módulos Nuxt.js, asegúrese de seleccionar Content - Git-based headless CMSinstalar el nuxt/contentmódulo junto con nuestra aplicación Nuxt.

    Instalación de Nuxt. ( Vista previa grande )

    Después de seleccionar todas las opciones, puede comenzar la instalación. Mis opciones seleccionadas se ven así:

    Opciones seleccionadas para Nuxt. ( Vista previa grande )

    Después de instalar exitosamente la aplicación Nuxt, navegue hasta el directorio ejecutando este comando:

    cd algolia-nuxt

    Instale el contenido de Nuxt por separado

    Si ya tiene Nuxt configurado anteriormente, puede instalar el módulo de contenido ejecutando el comando.

    Omita esto si ya ha seleccionado instalar el nuxt/contentmódulo junto con nuestra aplicación Nuxt.

    #install nuxt contentnpm install @nuxt/content

    Luego puede agregarlo a nuestra modulespropiedad dentro de nuestro nuxt.configarchivo.

    //nuxt.config.jsexport default { modules: ['@nuxt/content']}

    Instalar y configurar TailwindCSS

    TailwindCSS es un marco CSS de utilidad que nos proporciona clases personalizadas que podemos usar para diseñar nuestra aplicación.

    También usaremos TailwindCSS Typography , que es “un complemento que proporciona un conjunto de proseclases que puede usar para agregar hermosos valores predeterminados tipográficos a cualquier HTML básico que no controle (como HTML renderizado desde Markdown o extraído de un CMS). .”

     

    Primero, instalamos @nuxtjs/tailwindcssel cual es un módulo de Nuxt para la integración de TailwindCSS, así como TailwindCSS y sus dependencias entre pares usando npm:

    npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

    Agregue el @nuxtjs/tailwindcssmódulo a la buildModulessección de nuestro archivo nuxt.config.js:

    // nuxt.config.jsexport default { buildModules: ['@nuxtjs/tailwindcss']}

    Crear archivo de configuración

    A continuación, generamos nuestro tailwind.config.jsarchivo:

    npx tailwindcss init

    Esto creará un tailwind.config.jsarchivo mínimo en la raíz de nuestro proyecto:

    //tailwind.config.jsmodule.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [],}

    Cree un tailwind.cssarchivo assets/css/usando la @tailwinddirectiva para inyectar los estilos de base, componentes y utilidades de TailwindCSS:

    /*assets/css/tailwind.css*/@tailwind base;@tailwind components;@tailwind utilities;

    Puede importar el archivo CSS a nuestros componentes o hacerlo accesible globalmente definiendo los archivos/módulos/bibliotecas CSS que desea configurar globalmente (incluidos en cada página).

     /* nuxt.config.js*/ // Global CSS: https://go.nuxtjs.dev/config-css css: [ // CSS file in the project '@/assets/css/tailwind.css', ],

    Aquí, hemos agregado la ruta a nuestro tailwind.cssarchivo a la lista de archivos CSS globales en nuestro archivo nuxt.config.js.

    Le @/dice a Nuxt que es una ruta absoluta para buscar el archivo desde el directorio raíz.

    Instalar la tipografía TailwindCSS

    # Using npmnpm install @tailwindcss/typography

    Luego agregue el complemento a nuestro tailwind.config.jsarchivo:

    // tailwind.config.jsmodule.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ],}

    Configure TailwindCSS para eliminar estilos no utilizados en producción

    En nuestro tailwind.config.jsarchivo, configure la opción de purga con las rutas a todas nuestras páginas y componentes para que TailwindCSS pueda sacudir los estilos no utilizados en las compilaciones de producción:

    // tailwind.config.jsmodule.exports = { purge: [ './components/**/*.{vue,js}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ],}

    Una vez que instalamos los paquetes, iniciemos nuestra aplicación:

    npm run dev

    Este comando inicia nuestra aplicación Nuxt en modo de desarrollo.

     

    Se inició la aplicación Nuxt. ( Vista previa grande )

    Bonito

    Creando nuestras páginas y artículos

    Ahora, creemos nuestros artículos y una página de blog para enumerar nuestros artículos. Pero primero, creemos un encabezado de sitio y un componente de navegación para nuestro sitio.

    Creación de un encabezado y navegación del sitio

    Navegue a nuestra components/carpeta, cree un nuevo archivo siteHeader.vuee ingrese el siguiente código:

    !-- components/siteHeader.vue --template header div nuxt-link to="/" Logo / /nuxt-link nav ul li nuxt-link to="/blog"Blog/nuxt-link /li /ul /nav /div /header/template

    Aquí, en nuestro headertenemos un Logo /componente envuelto nuxt-linkque dirige a la página de inicio y otro nuxt-linkque dirige a /blog (crearemos la página de blog que crearemos más adelante) .

    Esto funciona sin que importemos los componentes y configuremos el enrutamiento nosotros mismos porque, de forma predeterminada, Nuxt maneja la importación de componentes y el enrutamiento por nosotros.

    Además, modifiquemos el Logo /componente predeterminado. En components/Logo.vue, reemplace el contenido con el siguiente código:

    !-- components/Logo.vue --template figure h1Algolia-nuxt/h1 /figure/template

    Ahora podemos agregar nuestro siteHeader.vuecomponente a nuestro sitio. En layouts/default.vue, agregue site-header /justo encima del Nuxt /componente.

    !-- layouts/default.vue --template div site-header / Nuxt / /div/template...

    El Nuxt /componente representa la página actual de Nuxt según la ruta.

    Creando nuestro primer artículo

    En content/, que es una carpeta creada automáticamente para el nuxt/contentmódulo, cree una nueva carpeta articles/y luego un nuevo archivo en la carpeta first-blog-post.md. Aquí está el archivo de nuestro primer artículo en markdownformato. Ingrese el siguiente código:

    !-- content/articles/first-blog-post.md -----title: My first blog postdescription: This is my first blog post on algolia nuxttags: [first, lorem ipsum, Iusto]---## Lorem ipsumLorem ipsum dolor sit amet consectetur, adipisicing elit.Assumenda dolor quisquam consequatur distinctio perferendis.## Iusto nobis nisirepellat magni facilis necessitatibus, enim temporibus.- Quisquam- assumenda- sapiente explicabo- totam nostrum inventore

    El área adjunta ---es YAMLFront Matter que se utilizará como una variable inyectada personalizada a la que accederemos en nuestra plantilla.

    A continuación, crearemos una página dinámica que se utilizará para:

    • Obtenga el contenido del artículo asyncDataque se ejecuta antes de que se represente la página. Tenemos acceso a nuestro contenido y variables inyectadas personalizadas a través del contexto usando la variable $content. Como usamos una página dinámica, podemos saber qué archivo de artículo recuperar usando la params.slugvariable proporcionada por Vue Router para obtener el nombre de cada artículo.
    • Representa el artículo en la plantilla usando nuxt-content.

    Ok, navega pages/y crea una blog/carpeta. Cree un _slug.vuearchivo (nuestra página dinámica) e inserte lo siguiente:

     

    !-- pages/blog/_slug.vue --template article header h1{{ article.title }}/h1 p{{ article.description }}/p ul li v-for="tag in article.tags" :key="tag" {{tag}} /li /ul /header !-- this is where we will render the article contents -- nuxt-content :document="article" / /article/templatescriptexport default { async asyncData({ $content, params }) { //here, we will fetch the article from the articles/ folder using the name provided in the `params.slug` const article = await $content('articles', params.slug).fetch() //return `article` which contains our custom injected variables and the content of our article return { article } },}/script

    Si va a su navegador y navega hasta https://localhost:3000/blog/first-blog-postdebería ver nuestro contenido renderizado:

    Página del artículo renderizada. ( Vista previa grande )
    Giantess Videos and comics

    Ahora que nuestra página dinámica está funcionando y nuestro artículo se está procesando, creemos algunos duplicados para este tutorial.

    !-- content/articles/second-blog-post.md -----title: My first blog postdescription: This is my first blog post on algolia nuxttags: [first, Placeat amet, Iusto]---## Lorem ipsumLorem ipsum dolor sit amet consectetur, adipisicing elit.Assumenda dolor quisquam consequatur distinctio perferendis.## Iusto nobis nisirepellat magni facilis necessitatibus, enim temporibus.- Quisquam- assumenda- sapiente explicabo- totam nostrum inventore

    Crear una página de blog para enumerar nuestros artículos

    Ahora creemos una página de blog para enumerar nuestros artículos. Aquí es también donde vivirá nuestra barra de búsqueda. Crea un nuevo archivo pages/blog/index.vue.

    !-- pages/blog/index.vue --template main section header h1All posts/h1 !-- dummy search bar -- div input type="search" name="search" button type="submit"Search/button /div /header ul !-- list out all fetched articles -- li v-for="article in articles" :key="article.slug" nuxt-link :to="{ name: 'blog-slug', params: { slug: article.slug } }" h2{{ article.title }}/h2 p{{ article.description }}/p /nuxt-link /li /ul /section /main/templatescriptexport default { async asyncData({ $content }) { // fetch all articles in the folder and return the: const articles = await $content('articles') // title, slug and description .only(['title', 'slug', 'description']) // sort the list by the `createdAt` time in `ascending order` .sortBy('createdAt', 'asc') .fetch() return { articles } },}/script

    Aquí, en nuestra asyncDatafunción, al buscar, $content('articles')encadenamos .only(['title', 'slug', 'updatedAt', 'description'])para buscar solo esos atributos de los artículos, .sortBy('createdAt', 'asc')ordenarlos y, por último, fetch()buscar los datos y asignarlos a const articleslos que luego regresamos.

     

    Entonces, en nuestro template, podemos crear la lista de artículos y crear enlaces a ellos usando su slugpropiedad.

    Nuestra página debería verse así:

    Página de blog que enumera todos los artículos. ( Vista previa grande )

    Genial

    Instalar y configurar Algolia Search y Vue-instantSearch

    Ahora que hemos eliminado las cosas básicas, podemos integrar Algolia Search en nuestro sitio de blogs.

    Primero, instalemos todos los paquetes que necesitaremos:

    #install dependenciesnpm install vue-instantsearch instantsearch.css algoliasearch nuxt-content-algolia remove-markdown dotenv
    • vue-instantsearch
      Biblioteca de componentes/widgets de interfaz de usuario de Algolia InstantSearch para Vue.
    • instantsearch.css
      Estilo personalizado para widgets de búsqueda instantánea.
    • algoliasearch
      Un cliente HTTP para interactuar con Algolia.
    • nuxt-content-algolia
      Paquete para indexar nuestro contenido y enviarlo a Algolia.
    • remove-markdown
      Esto elimina todos los caracteres de rebajas de bodyPlainTextlos artículos.
    • dotenv
      Esto ayuda a leer variables de entorno de .envarchivos.

    Usaremos estos paquetes durante el resto de este tutorial, pero primero, configuremos una cuenta de Algolia.

    Configurar una cuenta de Algolia

    Regístrese para obtener una cuenta de Algolia en https://www.algolia.com/ . Puedes hacerlo gratis, sin embargo, esto te dará un período de prueba de 14 días. Dado que no realizamos tareas pesadas con Algolia, su nivel gratuito funcionará bien para nuestro proyecto una vez que expire la prueba.

    Se le guiarán por algunos pasos de incorporación. Después de eso, se creará una APLICACIÓN UNAMED para usted. En la barra lateral, a la izquierda, navegue hasta las claves API que se le proporcionarán:

    • ID de aplicación
      Este es su identificador de aplicación único. Se utiliza para identificarlo cuando utiliza la API de Algolia.
    • Clave API de solo búsqueda
      Esta es la clave API pública que se utilizará en el código de interfaz. Esta clave solo se puede utilizar para consultas de búsqueda y envío de datos a la API de Insights.
    • Clave API de administrador
      Esta clave se utiliza para crear, actualizar y ELIMINAR sus índices. También puedes usarlo para administrar tus claves API.

    Cuenta de Algolia para recuperar claves API. ( Vista previa grande )

    Ahora que tenemos nuestras claves API, guardémoslas en un .envarchivo para nuestro proyecto. Navegue a la carpeta raíz del proyecto, cree un nuevo archivo .enve ingrese sus claves API:

     

    .envALGOLIA_APP_ID=algolia-app-idALGOLIA_API_KEY=algolia-admin-api-key

    Reemplace algolia-app-idy algolia-admin-api-keycon su ID de aplicación y clave API de administración respectivamente.

    Cree un 'Articles'índice para nuestros artículos de Nuxt en Algolia

    En su cuenta de Algolia, vaya a Índices y haga clic en crear índice . Luego ingrese el nombre de su índice y usaremos artículos para este tutorial.

    Cree un nuevo 'articles'índice en Algolia. ( Vista previa grande )

    Como puede ver, nuestro 'article'índice ha sido creado.

    Nuevo 'articles'índice creado. ( Vista previa grande )

    Configurar nuxt-content-algoliapara enviar índice de contenido a Algolia

    Hemos creado con éxito una propiedad de índice en nuestra cuenta. Ahora tenemos que generar un índice a partir de nuestros artículos de Nuxt, que es lo que Algolia utilizará para proporcionar resultados para las consultas de búsqueda. Para esto está el nuxt-content-algoliamódulo que instalamos anteriormente.

    Necesitamos configurarlo en nuestro nuxt.config.js.

    Primero, lo agregaremos a nuestro buildModules:

    // nuxt.config.js...// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modulesbuildModules: ['@nuxtjs/tailwindcss', 'nuxt-content-algolia'],...

    Luego, creamos un nuevo nuxtContentAlgoliaobjeto y le agregamos algunas configuraciones:

    // nuxt.config.jsexport default {...nuxtContentAlgolia: { // Application ID appId: process.env.ALGOLIA_APP_ID, // Admin API Key // !IMPORTANT secret key should always be an environment variable // this is not your search only key but the key that grants access to modify the index apiKey: process.env.ALGOLIA_ADMIN_API_KEY, paths: [ { name: 'articles', index: process.env.ALGOLIA_INDEX || 'articles', fields: ['title', 'description', 'tags', 'bodyPlainText'] } ]},...}

    El nuxtContentAlgoliatoma en las siguientes propiedades:

    • appId
      ID de aplicación*.
    • apiKey
      Clave API de administrador.
    • paths
      Una matriz de objetos de índice. Aquí es donde definimos desde dónde queremos generar índices. Cada objeto toma las siguientes propiedades:
      • name
        El nombre de la carpeta dentro de la content/carpeta. En otras palabras, usaremos archivos dentro content/articles/ya que definimos el nombre como 'articles'.
      • index
        Este es el nombre del índice que creamos en nuestro panel de Algolia.
      • fields
        Una serie de campos que se indexarán. Esto es en lo que Algolia basará sus consultas de búsqueda.

    Generar bodyPlainTexta partir de artículos

    Tenga en cuenta que en la fieldsmatriz tenemos bodyPlainTextcomo uno de sus valores. Nuxt Content no nos proporciona dicho campo. En cambio, lo que Nuxt Content proporciona es bodyun objeto complejo que se representará en el DOM.

     

    Para obtener nuestro bodyPlainText, que es simplemente todo texto, sin marcas ni caracteres HTML, tenemos que utilizar otro paquete más, remove-markdown.

    Para utilizar la remove-markdownfunción necesitamos hacer uso de Nuxt hooks. Usaremos el 'content:file:beforeInsert'gancho que le permite agregar datos a un documento antes de insertarlo, para eliminar la reducción y agregar el texto sin formato generado bodyPlainText.

    // nuxt.config.jsexport default {... hooks: { 'content:file:beforeInsert': (document)={ const removeMd = require('remove-markdown'); if(document.extension === '.md'){ document.bodyPlainText = removeMd(document.text); } }},...}

    En el 'content:file:beforeInsert'gancho recibimos el remove-markdownpaquete. Luego comprobamos si el archivo a insertar es un archivo de rebajas. Si se trata de un archivo de rebajas, generamos el texto sin formato llamando removeMda which take document.text: el texto de nuestro contenido, como argumento, que asignamos a una nueva document.bodyPlainTextpropiedad. La propiedad ahora estará disponible para su uso a través de Nuxt Content.

    BodyPlainTextgenerado y visible en Nuxt. ( Vista previa grande )

    ¡Excelente! Ahora que ya está hecho, podemos generar el índice y enviarlo a Algolia.

    Confirmar el índice de Algolia

    Alright. We’ve set up nuxt-content-algolia and we’ve generated bodyPlainText for our articles. We can now generate this index and send the data over to Algolia by building our project using nuxt generate.

    npm run generate

    This will start building our project for production and run the nuxtContentAlgolia config. When we look at our terminal after the build we should see that our content has been indexed and sent to Algolia.

    Index generated for articles. (Large preview)

    To verify, you can go to your Algolia dashboard:

    Confirm index in Algolia Search API logs. (Large preview)

    Open Indices, then go to Search API logs, where you will see a log of operations performed with your Search API. You can now open and check the API call sent from your Nuxt project. This should have the content of your article as specified in the fields section of nuxtContentAlgolia config.

    Nice!

    Building The Search UI

    So far we’ve been able to generate and send index data to Algolia, which means that we are able to query this data to get search results.

    To do that within our app, we have to build our search UI.

    Vue-InstantSearch provides lots of UI components using Algolia that can be integrated to provide a rich search experience for users. Let’s set it up.

     

    Create And Configure vue-instantSearch Plugin

    In order to use the Algolia InstantSearch widgets in our Nuxt app, we will have to create a plugin in our plugins folder.

    Go to plugins/ and create a new file vue-instantsearch.js.

    // plugins/vue-instantsearch.jsimport Vue from 'vue'import InstantSearch from 'vue-instantsearch'Vue.use(InstantSearch)

    Here, we’re simply importing InstantSearch and using it on the Vue frontend.

    Now, we have to add the vue-instantSearch plugin to our plugins and build options in nuxt.config.js in order to transpile it to Vue.js.

    So, go over to nuxt.config.js and add the following:

    // nuxt.config.jsexport default {...// Plugins to run before rendering page: https://go.nuxtjs.dev/config-pluginsplugins: ['@/plugins/vue-instantsearch.js'],// Build Configuration: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#transpilebuild: { transpile: ['vue-instantsearch', 'instantsearch.js/es']}...}

    InstantSearch code uses ES modules, yet it needs to be executed in Node.js. That’s why we need to let Nuxt know that those files should be transpiled during the build.Now that we’ve configured our vue-instantSearch plugin, let’s create a search component.

    Create A Search Component

    Create a new file components/Search.vue.

    Since we’ve installed vue-instantSearch as a plugin, we can use it within our Vue components.

    !-- components/Search.vue --...scriptimport algoliaSearch from 'algoliasearch/lite'import 'instantsearch.css/themes/satellite-min.css'// configurations for Algolia searchconst searchClient = algoliaSearch( // Applictaion ID '34IIDW6KKR', // Search API key '3f8d80be6c42bb030d27a7f108eb75f8')export default { data(){ return{ searchClient } }}/script

    First, in the script section, we’re importing algoliaSearch and instantsearch.css.

    Next, we provide the credentials for our Algolia search which are:

    • Application ID,
    • Search API key.

    As parameters to algoliaSearch then assign it to searchClient which we will use in our template to configure our Algolia search widgets.

    ais-instant-search Widget

    ais-instant-search is the root Vue InstantSearch component. All other widgets need to be wrapped with the root component to function. The required attributes for this component are:

    • index-name
      Name of the index to query, in this case, it would be articles.
    • search-client
      algoliaSearch object containing Application ID and Search API Key.
    !-- components/Search.vue --template div ais-instant-search index-name="articles" :search-client="searchClient" /ais-instant-search /div/template...

    ais-configure Widget

    The ais-configure widget helps configure the search functionality by sending defined parameters to Algolia.

    Any props you add to this widget will be forwarded to Algolia. For more information on the different parameters you can set, have a look at the search parameters API reference.

    The parameters we’ll set for now will be:

    • attributesToSnippet
      The name of the attribute or field to snippet in, we’ll soon see more on this.
    • hits-per-page.camel
      Number of results in one page.
    • snippetEllipsisText="…"
      Set ... before and after snipped text.
    !-- components/Search.vue --template div ais-instant-search index-name="articles" :search-client="searchClient" ais-configure :attributesToSnippet="['bodyPlainText']" :hits-per-page.camel="5" snippetEllipsisText="…" /ais-configure /ais-instant-search /div/template...

    ais-autocomplete Widget

    This widget is basically a wrapper that allows us to create a search result that autocompletes the query. Within this widget, we can connect to other widgets to provide a richer UI and access multiple indices.

    !-- components/Search.vue --template div ais-instant-search index-name="articles" :search-client="searchClient" ais-configure :attributesToSnippet="['bodyPlainText']" :hits-per-page.camel="5" snippetEllipsisText="…" ais-autocomplete template v-slot="{ currentRefinement, indices, refine }" input type="search" :value="currentRefinement" placeholder="Search for an article" @input="refine($event.currentTarget.value)" / ais-stats / template v-if="currentRefinement" ul v-for="index in indices" :key="index.indexId" li h3{{ index.indexName }}/h3 




    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo implementar la funcionalidad de búsqueda en su aplicación Nuxt utilizando Algolia InstantSearch

    Cómo implementar la funcionalidad de búsqueda en su aplicación Nuxt utilizando Algolia InstantSearch

    Requisitos previosConfigurando nuestra aplicación NuxtInstale el contenido de Nuxt por separadoInstalar y configurar TailwindCSSCreando nuestras páginas y ar

    programar

    es

    https://pseint.es/static/images/programar-como-implementar-la-funcionalidad-de-busqueda-en-su-aplicacion-nuxt-utilizando-algolia-instantsearch-1121-0.jpg

    2024-05-28

     

    Cómo implementar la funcionalidad de búsqueda en su aplicación Nuxt utilizando Algolia InstantSearch
    Cómo implementar la funcionalidad de búsqueda en su aplicación Nuxt utilizando Algolia InstantSearch

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences