逐步指南：為您的 Nuxt 電商網站新增搜尋功能

git clone https://github.com/meilisearch/ecommerce-demo

# Navigate to the project directory
cd ecommerce-demo

# Make sure to use Node.js 18.x before installing dependencies!
# nvm use v18

# Install dependencies
yarn

git checkout 1-setup-database

# .env

# Meilisearch configuration
MEILISEARCH_HOST="use the Database URL here"
MEILISEARCH_ADMIN_API_KEY="use the Default Admin API Key here"
MEILISEARCH_SEARCH_API_KEY="use the Default Search API Key here"

# …

// database/setup.js

import * as dotenv from 'dotenv'
import { MeiliSearch } from 'meilisearch'
import { watchTasks } from './utils.js'
import data from './data.json' assert { type: 'json' }

// Load environment
dotenv.config()

const credentials = {
  host: process.env.MEILISEARCH_HOST,
  apiKey: process.env.MEILISEARCH_ADMIN_API_KEY
}

const INDEX_NAME = 'products'

const setup = async () => {
  console.log('🚀 Seeding your Meilisearch instance')

  if (!credentials.host) {
    console.error('Missing `MEILISEARCH_HOST` environment variable')
    process.exit(1)
  }
  if (!credentials.apiKey) {
    console.error('Missing `MEILISEARCH_ADMIN_API_KEY` environment variable')
    process.exit(1)
  }

  const client = new MeiliSearch(credentials)

  console.log(`Adding documents to \`${INDEX_NAME}\``)
  await client.index(INDEX_NAME).addDocuments(data)

  await watchTasks(client, INDEX_NAME)
}

setup()

yarn setup

🚀 Seeding your Meilisearch instance
Adding documents to `products`
Start update watch for products
-------------
products index: adding documents
-------------
All documents added to "products"
✨  Done in 2.92s.

// database/setup.js

// …

const setup = async () => {
  // Credentials verification code…

  const client = new MeiliSearch(credentials);

  console.log(`Adding filterable attributes to \`${INDEX_NAME}\``);
  await client
    .index(INDEX_NAME)
    .updateFilterableAttributes([
      "brand",
      "category",
      "tag",
      "rating",
      "reviews_count",
      "price",
    ]);

  console.log(`Adding ranking rules to \`${INDEX_NAME}\``);
  await client
    .index(INDEX_NAME)
    .updateRankingRules([
      "sort",
      "words",
      "typo",
      "proximity",
      "attribute",
      "exactness",
    ]);

  console.log(`Adding sortable attributes to \`${INDEX_NAME}\``);
  await client.index(INDEX_NAME).updateSortableAttributes(["rating", "price"]);

  // Adding documents and watching tasks…
};

setup();

git checkout "2-search-as-you-type"

<!-- components/organisms/MeiliSearchProvider.vue -->

<script lang="ts" setup>
  import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
  import { AisInstantSearch } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    indexName: string;
  }>();

  const { indexName } = toRefs(props);

  const { host, searchApiKey, options } = useRuntimeConfig().meilisearch;

  const searchClient = instantMeiliSearch(host, searchApiKey, options);
</script>

<template>
  <AisInstantSearch :index-name="indexName" :search-client="searchClient">
    <slot name="default" />
  </AisInstantSearch>
</template>

<!-- components/organisms/MeiliSearchBar.vue -->

<script lang="ts" setup>
  import { AisSearchBox } from "vue-instantsearch/vue3/es";
</script>

<template>
  <AisSearchBox>
    <template #default="{ currentRefinement, refine }">
      <SearchInput
        :value="currentRefinement"
        @input="refine($event.currentTarget.value)"
      />
    </template>
  </AisSearchBox>
</template>

<!-- components/organisms/MeiliSearchResults.vue -->

<script lang="ts" setup>
  import { AisHits } from "vue-instantsearch/vue3/es";
</script>

<template>
  <AisHits>
    <template #default="{ items }">
      <div class="items">
        <ProductCard
          v-for="product in items"
          :key="product.id"
          :name="product.title"
          :brand="product.brand"
          :price="product.price"
          :image-url="product.images[0]"
          :rating="product.rating"
          :reviews-count="product.reviews_count"
        />
      </div>
    </template>
  </AisHits>
</template>

<style src="~/assets/css/components/results-grid.css" scoped />

<!-- components/templates/HomeTemplate.vue -->

<script lang="ts" setup>
  const sortingOptions = [
    { value: "products", label: "Featured" },
    { value: "products:price:asc", label: "Price: Low to High" },
    { value: "products:price:desc", label: "Price: High to Low" },
    { value: "products:rating:desc", label: "Rating: High to Low" },
  ];
</script>

<template>
  <MeiliSearchProvider index-name="products">
    <TheNavbar class="mb-5 shadow-l">
      <template #search>
        <MeiliSearchBar />
      </template>
    </TheNavbar>
    <div class="container mb-5">
      <div class="filters">
        <!-- Removed for clarity -->
      </div>
      <div class="results">
        <div class="mb-5 results-meta">
          <!-- <MeiliSearchStats /> -->
          <!-- <MeiliSearchSorting /> -->
        </div>
        <MeiliSearchResults class="mb-5" />
        <!-- <MeiliSearchPagination /> -->
      </div>
    </div>
  </MeiliSearchProvider>
</template>

<style src="~/assets/css/components/home.css" scoped />

yarn dev

git checkout "3-advanced-search-patterns"

<!-- components/organisms/MeiliSearchSorting.vue -->

<script lang="ts" setup>
  import { AisSortBy } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    options: Array<{
      value: string;
      label: string;
    }>;
  }>();

  const { options } = toRefs(props);
</script>

<template>
  <AisSortBy :items="options">
    <template #default="{ items, refine }">
      <BaseSelect :options="items" @change="refine($event.target.value)" />
    </template>
  </AisSortBy>
</template>

const sortingOptions = [
  { value: "products", label: "Featured" },
  { value: "products:price:asc", label: "Price: Low to High" },
  { value: "products:price:desc", label: "Price: High to Low" },
  { value: "products:rating:desc", label: "Rating: High to Low" },
];

<!-- components/organisms/MeiliSearchFacetFilter.vue -->

<script lang="ts" setup>
  import { AisRefinementList } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    attribute: string;
  }>();

  const { attribute } = toRefs(props);
</script>

<template>
  <AisRefinementList :attribute="attribute" operator="or">
    <template #default="{ items, refine }">
      <BaseTitle class="mb-3 text-valhalla-100"> {{ attribute }} </BaseTitle>
      <BaseCheckbox
        v-for="item in items"
        :key="item.value"
        :value="item.isRefined"
        :label="item.label"
        :name="item.value"
        :disabled="item.count === 0"
        @change="refine(item.value)"
      >
        <BaseText
          tag="span"
          size="m"
          :class="[ item.count ? 'text-valhalla-500' : 'text-ashes-900']"
        >
          {{ item.label }}
          <BaseText tag="span" size="s" class="text-ashes-900">
            ({{ item.count.toLocaleString() }})
          </BaseText>
        </BaseText>
      </BaseCheckbox>
    </template>
  </AisRefinementList>
</template>

<!-- components/organisms/MeiliSearchRangeFilter.vue -->

<script lang="ts" setup>
  import { AisRangeInput } from "vue-instantsearch/vue3/es";

  interface Range {
    min: number;
    max: number;
  }

  const props = defineProps<{
    attribute: string;
  }>();

  const { attribute } = toRefs(props);

  const toValue = (
    currentValue: Range,
    boundaries: Range
  ): [number, number] => {
    return [
      typeof currentValue.min === "number" ? currentValue.min : boundaries.min,
      typeof currentValue.max === "number" ? currentValue.max : boundaries.max,
    ];
  };
</script>

<template>
  <AisRangeInput :attribute="attribute">
    <template #default="{ currentRefinement, range, refine }">
      <BaseTitle class="mb-3 text-valhalla-100"> {{ attribute }} </BaseTitle>
      <div class="slider-labels text-valhalla-500 mb-2">
        <BaseText size="m">
          <span class="text-ashes-900">$ </span>{{ currentRefinement.min ??
          range.min }}
        </BaseText>
        <BaseText size="m">
          <span class="text-ashes-900">$ </span>{{ currentRefinement.max ??
          range.max }}
        </BaseText>
      </div>
      <RangeSlider
        :model-value="toValue(currentRefinement, range)"
        :min="range.min"
        :max="range.max"
        @update:model-value="refine($event)"
      />
    </template>
  </AisRangeInput>
</template>

<style scoped>
  .slider-labels {
    display: flex;
    justify-content: space-between;
  }
</style>

<!-- components/organisms/MeiliSearchRatingFilter.vue -->

<script lang="ts" setup>
  import { AisRatingMenu } from "vue-instantsearch/vue3/es";

  const props = defineProps<{
    attribute: string;
    label?: string;
  }>();

  const { attribute, label } = toRefs(props);
</script>

<template>
  <AisRatingMenu :attribute="attribute" :max="5">
    <template #default="{ items, refine }">
      <BaseTitle class="mb-3 text-valhalla-100">
        {{ label ?? attribute }}
      </BaseTitle>
      <a
        v-for="item in items"
        :key="item.value"
        class="rating-link"
        :class="[item.isRefined ? 'text-dodger-500' : 'text-valhalla-500']"
        href="#"
        @click.prevent="refine(item.value)"
      >
        <span class="rating-label">
          <StarRating :rating="Number(item.value)" />
          <BaseText tag="span" size="m" class="ml-1">
            & Up
            <BaseText tag="span" size="s" class="text-ashes-900">
              ({{ item.count.toLocaleString() }})
            </BaseText>
          </BaseText>
        </span>
      </a>
    </template>
  </AisRatingMenu>
</template>

<style src="~/assets/css/components/rating-filter.css" scoped />

<script lang="ts" setup>
  import { AisPagination } from "vue-instantsearch/vue3/es";
</script>

<template>
  <AisPagination>
    <template
      #default="{ currentRefinement, pages, refine, nbPages, isFirstPage, isLastPage }"
    >
      <!-- First page -->
      <PageNumber
        v-if="!isFirstPage && !pages.includes(0)"
        :has-gap-separator="!pages.includes(1)"
        :is-current="currentRefinement === 0"
        @page-click="refine(0)"
      >
        Page 1
      </PageNumber>
      <!-- Current page and 3 previous/next -->
      <PageNumber
        v-for="(page, index) in pages"
        :key="page"
        :show-separator="index < (pages.length-1)"
        :is-current="currentRefinement === page"
        @page-click="refine(page)"
      >
        Page {{ page + 1 }}
      </PageNumber>
      <!-- Last page -->
      <PageNumber
        v-if="!isLastPage && !pages.includes(nbPages-1)"
        separator="before"
        :has-gap-separator="!pages.includes(nbPages-2)"
        :is-current="currentRefinement === nbPages-1"
        @page-click="refine(nbPages-1)"
      >
        Page {{ nbPages }}
      </PageNumber>
    </template>
  </AisPagination>
</template>