vite-vue-searchcraft-template

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

Table of Contents

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

Purpose

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.

Features

🧰 Template Features

• 💚 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

🔍 Searchcraft SDK Features

• 🔍 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

Getting Started

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

Available Scripts

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

Command	Description
yarn dev	Starts the Vite development server with hot module reload.
yarn build	Builds the project using Vue TypeScript compiler and Vite for production.
yarn preview	Serves the production build locally.
yarn lint	Runs ESLint across the codebase to catch errors and bad patterns.

Requirements

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

Troubleshooting

Filter Panel Not Working?

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.

Resources

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

License

Licensed under the Apache 2.0 License.

Built with 🛰️ by the Searchcraft team