diff --git a/docs/.vuepress/components/BetterNoOptions.vue b/docs/.vuepress/components/BetterNoOptions.vue
new file mode 100644
index 0000000..e1d429b
--- /dev/null
+++ b/docs/.vuepress/components/BetterNoOptions.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ No results found for {{ search }}.
+
+ Start typing to search for a country.
+
+
+
+
+
diff --git a/docs/api/slots.md b/docs/api/slots.md
index 8c245af..68e74a2 100644
--- a/docs/api/slots.md
+++ b/docs/api/slots.md
@@ -7,13 +7,16 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t
### `selected-option`
-#### Scope:
+#### Scope:
- `option {Object}` - A selected option
```html
-
- {{ getOptionLabel(option) }}
+
+ {{ getOptionLabel(option) }}
```
@@ -27,16 +30,32 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t
- `multiple {Boolean}` - If the component supports the selection of multiple values
```html
-
-
-
- {{ getOptionLabel(option) }}
-
-
-
+
+
+
+ {{ getOptionLabel(option) }}
+
+
+
```
@@ -44,28 +63,56 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t
### `spinner`
+#### Scope:
+
+- `loading {Boolean}` - if the component is in a loading state
+
```html
-
-
Loading...
+
+
Loading...
```
-### `no-options`
+### `open-indicator`
-```html
-Sorry, no matching options.
+```js
+attributes : {
+ 'ref': 'openIndicator',
+ 'role': 'presentation',
+ 'class': 'vs__open-indicator',
+}
+```
+
+```vue
+
+
+
```
## Dropdown
### `option`
-#### Scope:
-
- `option {Object}` - The currently iterated option from `filteredOptions`
```html
-
- {{ getOptionLabel(option) }}
+
+ {{ getOptionLabel(option) }}
+
+```
+
+### `no-options`
+
+The no options slot is displayed in the dropdown when `filteredOptions.length === 0`.
+
+- `search {String}` - the current search text
+- `searching {Boolean}` - if the component has search text
+
+```vue
+
+ Sorry, no matching options.
```
diff --git a/docs/guide/slots.md b/docs/guide/slots.md
index 7bfe9b1..62d7392 100644
--- a/docs/guide/slots.md
+++ b/docs/guide/slots.md
@@ -1,22 +1,32 @@
::: tip 🚧
This section of the guide is a work in progress! Check back soon for an update.
-Vue Select currently offers quite a few scoped slots, and you can check out the
+Vue Select currently offers quite a few scoped slots, and you can check out the
[API Docs for Slots](../api/slots.md) in the meantime while a good guide is put together.
:::
-#### Scoped Slot `option`
+### Scoped Slot `option`
vue-select provides the scoped `option` slot in order to create custom dropdown templates.
```html
-
-
- {{ option.title }}
-
-
-```
+
+
+ {{ option.title }}
+
+
+```
Using the `option` slot with props `"option"` provides the current option variable to the template.
+
+### Improving the default `no-options` text
+
+The `no-options` slot is displayed in the dropdown when `filteredOptions === 0`. By default, it
+displays _Sorry, no matching options_. You can add more contextual information by using the slot
+in your own apps.
+
+
+
+<<< @/.vuepress/components/BetterNoOptions.vue
diff --git a/src/components/Select.vue b/src/components/Select.vue
index fa0bce6..5d58d4c 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -70,8 +70,8 @@
{{ getOptionLabel(option) }}
-