update docs

docs/.vuepress/config/themeConfig.js

@@ -37,7 +37,7 @@ module.exports = {
         collapsable: false,
         children: [
           ['guide/accessibility', 'WAI-ARIA Spec'],
-          ['guide/localization', 'Localization / i18n'],
+          ['guide/localization', 'Localization'],
         ],
       },
       {

docs/api/props.md

@@ -342,6 +342,29 @@ label: {
 },
 ```
 
+## locale <Badge text="v3.13.0+" />
+
+The locale function receives the default english translations object for the component. This allows
+you to override the whole object, or change just the values you need. Can be used to localize the
+component to different languages, or just replace text to your liking throughout the component.
+
+See [localization guide](/guide/localization.html) for more details and examples.
+
+```js
+/**
+ * @since 3.13.0
+ * @see https://vue-select.org/guide/localization.html
+ */
+locale: {
+  type: Function,
+  /**
+   * @return {Object}
+   * @param localeStrings
+   */
+  default: (localeStrings) => localeStrings,
+},
+```
+
 
 ## maxHeight
 

docs/guide/localization.md

@@ -1,3 +1,5 @@
+# Localization / i18n
+
 # Translations <Badge text="v3.13.0+" />
 
 There are a number of strings used within the component that can all be translated. Out of the box,
@@ -8,8 +10,9 @@ in [`src/locales`](https://github.com/sagalbot/vue-select/tree/master/src/locale
 - [French](https://github.com/sagalbot/vue-select/tree/master/src/locales/fr.js)
 - [Spanish](https://github.com/sagalbot/vue-select/tree/master/src/locales/es.js)
 
-Translations can be set on for each component instance, or globally for all instances in your app.
-Both methods will use the `locale` prop to determine the text to be used throughout the component.
+Translations can be set individually for each component instance, or globally for all instances in
+your app. Both methods will use the `locale` prop to determine the text to be used throughout the
+component.
 
 **Locale Prop**
 
@@ -25,6 +28,8 @@ the english locale that ships with Vue Select:
 
 <<< @/../src/locales/en.js
 
+[View this file on GitHub ](https://github.com/sagalbot/vue-select/tree/master/src/locales/en.js)
+
 # Examples
 ---
 

src/components/Select.vue

@@ -138,8 +138,8 @@
 </template>
 
 <script>
+import { locale as english } from '../locales/en.js'
 import ajax from '../mixins/ajax.js'
-import i18n from '../mixins/i18n.js'
 import pointerScroll from '../mixins/pointerScroll.js'
 import typeAheadPointer from '../mixins/typeAheadPointer.js'
 import childComponents from './childComponents'
@@ -155,7 +155,7 @@ export default {
 
   directives: { appendToBody },
 
-  mixins: [pointerScroll, typeAheadPointer, ajax, i18n],
+  mixins: [pointerScroll, typeAheadPointer, ajax],
 
   props: {
     /**
@@ -193,6 +193,23 @@ export default {
       },
     },
 
+    /**
+     * The locale function receives the default english translations for the
+     * component. This allows you to override the whole object, or change
+     * just the values you need.
+     *
+     * @since 3.13.0
+     * @see https://vue-select.org/guide/localization.html
+     */
+    locale: {
+      type: Function,
+      /**
+       * @return {Object}
+       * @param localeStrings
+       */
+      default: (localeStrings) => localeStrings,
+    },
+
     /**
      * Disable the entire component.
      * @type {Boolean}
@@ -660,6 +677,16 @@ export default {
   },
 
   computed: {
+    /**
+     * Return the strings that will be used throughout the
+     * component for labels, titles, text.
+     *
+     * @return {Object} locale
+     */
+    i18n() {
+      return this.locale(english)
+    },
+
     /**
      * Determine if the component needs to
      * track the state of values internally.

src/mixins/i18n.js

@@ -1,23 +0,0 @@
-import { locale as english } from '../locales/en.js'
-
-/**
- * @this VueSelect
- * @mixin
- */
-export default {
-  props: {
-    locale: {
-      type: Function,
-      /**
-       * @param text {Object}
-       * @return {Object}
-       */
-      default: (text) => text,
-    },
-  },
-  computed: {
-    i18n() {
-      return this.locale(english)
-    },
-  },
-}