Search not visible, using plugin-search

[mike-kelly]

Hi, I am new to Vuepress, and have set up a very simple site with vuepress-next.

Trying to add search to the navbar is giving me difficulties – I'm guessing it is a versioning issue. The SearchBox doesn't show in the navbar.

Here's my package.json:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "@vuepress/plugin-search": "^1.8.2",
    "@vuepress/shared-utils": "^1.8.2",
    "markdown-it-footnote": "^3.0.2",
    "postcss": "^8.2.15",
    "vuepress": "^2.0.0-beta.14"
  }
}

I installed plugin-search using npm and had to add the other dependencies shown to get it to compile.
In my config file I have just added what's in the docs:

plugins: [
    [
      '@vuepress/plugin-search',
      {
        locales: {
          '/': {
            placeholder: 'Search',
          },
          '/zh/': {
            placeholder: '搜索',
          },
        },
      },
    ],
  ],

Any guidance would be appreciated, thanks.

The other part of my question is whether I should be using vuepress-next for future proofing, or if I should just stick with vuepress 1, which I am guessing is more stable and less susceptible to issues like this. My site is not going to be large scale.

[meteorlxy]

v1 and v2 are incompatible. Don't mix them up

[mike-kelly]

Do you mean I am using the wrong plugin? Which version of @vuepress/plugin-search would be appropriate? It looks like vuepress 2.0.0-beta.14 should support it.

[meteorlxy]

It supports plugin-search v2.... You are using v1 plugins 😓

https://github.com/vuepress/vuepress-next/blob/41f9dc612d65a7aae777a75ee00715f0b7bab7c6/packages/%40vuepress/plugin-search/package.json#L2-L3

[meteorlxy]

In short, all packages related to vuepress should use v2.

BTW, @vue/component-compiler-utils is for vue2.

[mike-kelly]

Thanks for your help!

FYI, I followed the documentation for vuepress-next which says npm install -D vuepress@next
That gave me "vuepress": "^2.0.0-beta.14" in my package.json. However, there was no plugin-search in the @vuepress folder.
That's why I installed plugin-search separately.

I just uninstalled vuepress and the separate plugin-search package, and installed vuepress-next instead. Now search works. Is that the correct approach? Thanks for clarification - I think others may experience the same problem.

EDIT. OK, I went back to vuepress@next and installed the v2 plugin-search separately. That seems to be the best option for now.

[meteorlxy]

npm install -D @vuepress/plugin-search@next

Always add @next tag for now, because v2 has not officially released

[selected-pixel-jameson]

Can you elaborate on what is actually indexed? Right now it seems like the only content being index is the frontmatter title. I was looking to have this index frontmatter along with the actual content of the pages or at least be able to provide a specific value in the frontmatter for generating the search index.

This is being used for multiple clients and is a for profit project so we cannot use Algolia's doc search.

[selected-pixel-jameson]

Thank you and sorry.

[selected-pixel-jameson]

I have implemented the getExtraFields option for the vuepress plugin like so:

getExtraFields: (page) => {
     console.log("-------GET EXTRA FIELDS-----", page.frontmatter.tags)
     return page.frontmatter.tags ?? []
}

The logs show up in the console when I save the config.ts file.

I have a file located at docs/section/intro/welcome.md with the following content.

---
lang: en-US
title: Welcome Page
description: Description of this page
tags: zoo, lion, elephant
---

However, when I search for any of the words in the tags it only will show the "Welcome Page" for the first letter of each tag. For example if I type in 'z' it will show "Welcome Page" as a result, but if I type in 'zoo' it will not show any results. This is the same for 'L' and 'lion' and 'e' and 'elephant'.

I've also tried this without the commas.
tags: zoo lion elephant

I've also tried a different frontmatter tag all together like
getExtraFields: (page) => page.frontmatter.search_content ?? []
search_content:zoo

The same results with this scenario as well. Am I missing something?

[meteorlxy]

Try using an array instead of a string.

[selected-pixel-jameson]

Didn't realize that was an option. 🤦

[nicpitsch]

I have implemented the getExtraFields option for the vuepress plugin like so:

getExtraFields: (page) => {
     console.log("-------GET EXTRA FIELDS-----", page.frontmatter.tags)
     return page.frontmatter.tags ?? []
}

I have a file located at docs/section/intro/welcome.md with the following content.

---
lang: en-US
title: Welcome Page
description: Description of this page
tags: zoo, lion, elephant
---

@selected-pixel-jameson since you use both description and tags you could add both fields to the search like this:

getExtraFields: (page) => [page.frontmatter.description,page.frontmatter.tags] ?? []