Skip to content

Function options set in nuxt.config.ts do not work #172

@Lehoczky

Description

@Lehoczky

Version

@nuxtjs/algolia: latest
nuxt: 3.6.5

Reproduction Link

This can be easily replicated in the module's playground. See steps below.

Steps to reproduce

From Nuxt's documentation:

Your runtime config will be serialized before being passed to Nitro. This means that anything that cannot be serialized and then deserialized (such as functions, Sets, Maps, and so on), should not be set in your nuxt.config.

Therefore non of the options that take functions are working right now if set from nuxt.config.ts. This includes docsearch.transformItems, docsearch.hitComponent, docsearch.transformSearchClient, docsearch.navigator, docsearch.getMissingResultsUrl. There might be others I missed.

You can easily see that these are missing, if you bind the public runtime config to the DOM (or just console.log() it):

// nuxt.config.ts
export default defineNuxtConfig({
  algolia: {
    apiKey: process.env.ALGOLIA_API_KEY,
    applicationId: process.env.ALGOLIA_APPLICATION_ID,
    docSearch: {
      transformItems(items) {
          return items
      },
      indexName: ""
    },
})
<!-- app.vue -->
<template>
  <div>
    <!-- transformItems will not be in this -->
    <pre>{{ algolia }}</pre>  
  </div>
</template>

<script lang="ts" setup>
const { algolia } = useRuntimeConfig().public
</script>

What is Expected?

That the functions are working from the config, but since that is impossible, it would be better to remove these options and only allow them as component properties. Something like this:

<template>
  <AlgoliaDocSearch :transform-items="transformItems" :navigator="navigator" />
</template>

This looks cleaner than using one object as a prop:

<template>
  <AlgoliaDocSearch
       :options="{
          transformItems,
          navigator,
        }"
      />
</template>

Setting the apiKey and applicationId should also be inherited from the config file, because it is more convenient to set those values there. Right now if we use the component's option property, we cannot use those values set in the config.

Edit: I'm happy to work on this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions