Skip to content

Nuxt module for first-class integration with OramaSearch. Build type-ahead search in no time.

Notifications You must be signed in to change notification settings

amandesai01/nuxt-orama

Repository files navigation

nuxt-orama

Nuxt Orama

npm version npm downloads License Nuxt

Nuxt module for hassle free integration with OramaSearch.

Features

  • Extremely easy to configure.
  • Easily access Orama instance throughout application.
  • Hooks available to populate Orama instance via plugins.
  • Handy composables such as useOramaSearch()
  • Reactive search results population, say good-bye to watch and watchEffect.

Problems Solved

  • No need to wait for instance initialisation on frontend before puting items into index.
  • No need to resolve promises while searching and adding items to index.
  • Fix a common issue where first query fails because search function is triggered before index built.

Usage

Edit your nuxt.config.ts like this

export default defineNuxtConfig({
  modules: ["nuxt-orama"],
  orama: {
    schemas: [
      {
        schema: {
          id: "string",
          username: "string",
          ...
        },
        id: 'userIndex'
      },
      // other schemas here.
    ],
  },
});

Now on any page, simply use like this

<template>
  <div>
    <input
      v-model="searchInput"
      type="text"
    >
    {{ JSON.stringify(orama.searchResults.value) }}
  </div>
</template>

<script setup>
const searchInput = ref("");

const orama = useOramaSearch('userIndex');

watchEffect(() => {
  if (searchInput.value) {
    orama.search({
      term: searchInput.value,
    })
  }
})
</script>

Roadmap

  • Wrap around search and insertMultiple
  • Wrap around other functions such for update, remove
  • Hooks for plugins to insert data during indexing
  • Types generation for schemas.
  • Separate orama.config.ts file to not populate Nuxt config.

... expect more within weeks.

Quick Setup

  1. Add nuxt-orama dependency to your project
# Using pnpm
pnpm add -D nuxt-orama

# Using yarn
yarn add --dev nuxt-orama

# Using npm
npm install --save-dev nuxt-orama
  1. Add nuxt-orama to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-orama'
  ]
})

That's it! You can now use Nuxt Orama in your Nuxt app ✨

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

About

Nuxt module for first-class integration with OramaSearch. Build type-ahead search in no time.

Resources

Stars

Watchers

Forks