nuxt-orama v1.0.0

Nuxt Orama

Nuxt module for hassle free integration with OramaSearch.

• ✨  Release Notes
• 🏀 Online playground

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

2. 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