No way to configure this in production

[robbyemmert]

Can you please provide an example of how to configure this in production using runtime ENV variables? From our testing, nuxt-meilisearch only supports hard-coded source-controlled meilisearch keys, which may not be very secure. Can you confirm if this is true?

We would love to use nuxt-meilisearch, this is the only blocker, but we need to follow industry best practices.

Here's what we have tried:

MEILISEARCH_HOST: process.env.MEILISEARCH_HOST || 'http://localhost:7700',
MEILISEARCH_API_KEY: process.env.NUXT_PUBLIC_MEILISEARCH_API_KEY || '...',
meilisearchClient: {
    hostUrl: process.env.MEILISEARCH_HOST || process.env.NUXT_PUBLIC_MEILISEARCH_HOST || 'http://localhost:7700',
    searchApiKey: process.env.MEILISEARCH_API_KEY || process.env.NUXT_PUBLIC_MEILISEARCH_API_KEY || '...',
},

Our ENV config in docker compose:

NUXT_PUBLIC_MEILISEARCH_HOST: https://beta.search.clientDomain.com
NUXT_PUBLIC_MEILISEARCH_API_KEY: ... # DO NOT USE AN ADMIN KEY HERE
MEILISEARCH_HOST: https://beta.search.clientDomain.com
MEILISEARCH_API_KEY: ... # DO NOT USE AN ADMIN KEY HERE

But in any case, the 'http://localhost:7700' value is used for the URL, even though we provided the env variable .

Why is this, and how can we fix it?

[robbyemmert]

It looks like this is because nuxt-meilisearch assumes your environment variables will be available at build time, which they usually are not in a dockerized environment (which we use).

Here is our workaround:

We created a composable to replace useInstantSearch()

import type { MeilisearchConfig } from '@meilisearch/instant-meilisearch'
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
import { useNuxtApp, useRuntimeConfig } from '#app'

export function useAuthenticatedInstantSearch() {
    const nuxtApp = useNuxtApp()

    // Access runtime configuration values
    const {
        public: { MEILISEARCH_HOST, MEILISEARCH_API_KEY },
    } = useRuntimeConfig()

    if (!nuxtApp._instantSearchClient) {
        // Initialize the instant search client with runtime config values
        const instantClient = instantMeiliSearch(MEILISEARCH_HOST, MEILISEARCH_API_KEY)
        nuxtApp._instantSearchClient = instantClient.searchClient
    }

    return nuxtApp._instantSearchClient as MeilisearchConfig
}

[robbyemmert]

Is there a way we can update the useInstantSearch composable to favor environment variables? What would be needed to get this into a PR?

[olrtg]

@robbyemmert for me it worked providing like this as env variables:

NUXT_PUBLIC_MEILISEARCH_CLIENT_HOST_URL="..."
NUXT_PUBLIC_MEILISEARCH_CLIENT_SEARCH_API_KEY="..."