A minimal Vue + TypeScript template powered by Searchcraft – the developer-first vertical search engine.

• Purpose
• Features
  • 🧰 Template Features
  • 🔍 Searchcraft SDK Features
• Getting Started
• Available Scripts
• Requirements
• Troubleshooting
  • Filter Panel Not Working?
• Resources
• License

Modern apps need fast, relevant, typo-tolerant search — but building it from scratch or with legacy tools is expensive, complex, and backend-heavy. That’s where Searchcraft comes in: a zero-config, front-end focused vertical search engine built to drop into your product in minutes.

This template exists to make that even easier. It provides:

• A minimal but complete Vite + Vue + TypeScript frontend, bootstrapped with npm create vue@latest
• Out-of-the-box Searchcraft SDK integration
• Clean environment variable config and instant dev startup

Whether you're building search for a publisher, SaaS app, ecommerce experience, or anything content-heavy — this gets you from zero to search fast.

• 💚 Vue 3 + TypeScript – The latest versions for modern development
• ⚡ Vite 6 – Lightning-fast builds, HMR, and DX
• 🧪 Minimal boilerplate – Just enough structure to get started
• 🔐 Environment-based configuration – No hardcoded secrets
• ✅ ESLint 9 – Preconfigured for code quality with Vue support

• 🔍 Typo-tolerant, relevance-tuned search with zero backend setup
• 🧩 Built-in UI components for search inputs, result lists, and pagination
• 🎛️ Advanced filtering with date ranges, facets, numeric ranges, and toggle filters
• 🧠 Smart ranking with support for field weighting, stopwords, and synonyms
• 📊 Analytics-ready with built-in hooks for usage insights via Vektron
• 🛰️ Fully managed – No need to stand up infrastructure

You can either click "Use this template" on GitHub, or use degit from the command line:

npx degit searchcraft-inc/vite-vue-searchcraft-template <app_name>

Install dependencies:

yarn

Then, add a .env file in the root of your project with your Searchcraft credentials, which can be found in your Searchcraft Vektron Dashboard:

VITE_ENDPOINT_URL=
VITE_INDEX_NAME=
VITE_READ_KEY=

Run the app in development mode:

yarn dev

This project includes a few helpful npm/yarn scripts to streamline development:

• Node.js v18+
• Yarn (or npm)
• A Searchcraft account with a configured index

The most common issue is field name mismatches. Ensure your filter configuration uses the exact field names from your Searchcraft index schema:

// ❌ Wrong: using 'field' instead of 'fieldName'
const dateFilter = {
  type: 'dateRange',
  field: 'pub_date', // Incorrect property name
}

// ✅ Correct: using 'fieldName' with exact field name from your index
const dateFilter = {
  type: 'dateRange',
  fieldName: 'published_date', // Must match your index schema
  options: {
    minDate: new Date('2020-01-01'),
    maxDate: new Date(),
    granularity: 'day',
  },
}

Check your field names in the Vektron Dashboard under your index schema if you are using Searchcraft Cloud.

• 📘 Searchcraft Docs
• 🛰️ Vektron Dashboard
• 💬 Searchcraft Discord
• 🧠 Searchcraft Reddit
• 🧪 Searchcraft SDK on npm

Licensed under the Apache 2.0 License.

Built with 🛰️ by the Searchcraft team