diff --git a/packages/@vuepress/plugin-search/SearchBox.vue b/packages/@vuepress/plugin-search/SearchBox.vue index 6fbbd70b3e..3a48566f22 100644 --- a/packages/@vuepress/plugin-search/SearchBox.vue +++ b/packages/@vuepress/plugin-search/SearchBox.vue @@ -5,6 +5,7 @@ aria-label="Search" :value="query" :class="{ 'focused': focused }" + :placeholder="placeholder" autocomplete="off" spellcheck="false" @focus="focused = true" @@ -42,10 +43,14 @@ export default { return { query: '', focused: false, - focusIndex: 0 + focusIndex: 0, + placeholder: undefined } }, + mounted () { + this.placeholder = this.$site.themeConfig.searchPlaceholder || '' + }, computed: { showSuggestions () { return ( diff --git a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue index f4ff3ffbd0..92818a125c 100644 --- a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue +++ b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue @@ -7,6 +7,7 @@ @@ -15,8 +16,15 @@ export default { props: ['options'], + data () { + return { + placeholder: undefined + } + }, + mounted () { this.initialize(this.options, this.$lang) + this.placeholder = this.$site.themeConfig.searchPlaceholder || '' }, methods: { diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 8e5830d363..bfe3262f6e 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -351,6 +351,18 @@ Unlike the [built-in search](#built-in-search) engine which works out of the box For more options, check out [Algolia DocSearch’s documentation](https://github.com/algolia/docsearch#docsearch-options). +### Search Placeholder + +You can define a placeholder for the search box by adding the `searchPlaceholder` attribute: + +``` js +module.exports = { + themeConfig: { + searchPlaceholder: 'Search...' + } +} +``` + ## Last Updated The `themeConfig.lastUpdated` option allows you to get the UNIX timestamp(ms) of each file’s last `git` commit, and it will also display at the bottom of each page in an appropriate format: