diff --git a/docs/.vuepress/components/CodePen.vue b/docs/.vuepress/components/CodePen.vue
index d7ae40a..aa3107f 100644
--- a/docs/.vuepress/components/CodePen.vue
+++ b/docs/.vuepress/components/CodePen.vue
@@ -9,116 +9,20 @@
 </template>
 
 <script>
+import mountCodePen from '../utils/codePen';
+
 export default {
-  props: ['url', 'height'],
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    height: {
+      default: 250
+    }
+  },
   mounted () {
-    document.getElementsByClassName || (document.getElementsByClassName = function (e) {
-      var n, t, r, a = document, o = [];
-      if (a.querySelectorAll) return a.querySelectorAll('.' + e);
-      if (a.evaluate) for (t = './/*[contains(concat(\' \', @class, \' \'), \' ' + e + ' \')]', n = a.evaluate(t, a,
-        null, 0,
-        null); r = n.iterateNext();) o.push(r); else for (n = a.getElementsByTagName('*'), t = new RegExp(
-        '(^|\\s)' + e + '(\\s|$)'), r = 0; r < n.length; r++) t.test(n[r].className) && o.push(n[r]);
-      return o;
-    }), function () {
-      function e () {
-        function e () {
-          for (var e = document.getElementsByClassName('codepen'), t = e.length - 1; t > -1; t--) {
-            var u = a(e[t]);
-            if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) {
-              var c = i(u), l = s(u, c);
-              f(e[t], l);
-            }
-          }
-          m();
-        }
-
-        function n (e, n) {
-          if ('string' == typeof e.user) return e.user;
-          for (var t = 0, r = n.children.length; t < r; t++) {
-            var a = n.children[t], o = a.href || '', i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i);
-            if (i) return i[2];
-          }
-          return 'anon';
-        }
-
-        function r (e) {return e['slug-hash'];}
-
-        function a (e) {
-          for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
-            var o = t[r].name;
-            0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value);
-          }
-          return n;
-        }
-
-        function o (e) {
-          return e.href && (e['slug-hash'] = e.href), e.type && (e['default-tab'] = e.type), e.safe &&
-          ('true' === e.safe ? e.animations = 'run' : e.animations = 'stop-after-5'), e;
-        }
-
-        function i (e) {
-          var n = u(e), t = e.user ? e.user : 'anon', r = '?' + l(e),
-            a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
-            o = [n, t, a, e['slug-hash'] + r].join('/');
-          return o.replace(/\/\//g, '//');
-        }
-
-        function u (e) {
-          return e.host ? c(e.host) : 'file:' === document.location.protocol
-            ? 'https://codepen.io'
-            : '//codepen.io';
-        }
-
-        function c (e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + '//' + e : e;}
-
-        function l (e) {
-          var n = '';
-          for (var t in e) '' !== n && (n += '&'), n += t + '=' + encodeURIComponent(e[t]);
-          return n;
-        }
-
-        function s (e, n) {
-          var r;
-          e['pen-title'] ? r = e['pen-title'] : (r = 'CodePen Embed ' + t, t++);
-          var a = {
-            id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
-            src: n,
-            scrolling: 'no',
-            frameborder: '0',
-            height: d(e),
-            allowTransparency: 'true',
-            allowfullscreen: 'true',
-            allowpaymentrequest: 'true',
-            name: 'CodePen Embed',
-            title: r,
-            'class': 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
-            style: 'width: ' + p + '; overflow: hidden;',
-          }, o = '<iframe ';
-          for (var i in a) o += i + '="' + a[i] + '" ';
-          return o += '></iframe>';
-        }
-
-        function d (e) {return e.height ? e.height : 300;}
-
-        function f (e, n) {
-          if (e.parentNode) {
-            var t = document.createElement('div');
-            t.className = 'cp_embed_wrapper', t.innerHTML = n, e.parentNode.replaceChild(t, e);
-          } else e.innerHTML = n;
-        }
-
-        function m () {'function' == typeof __CodePenIFrameAddedToPage && __CodePenIFrameAddedToPage();}
-
-        var p = '100%';
-        e();
-      }
-
-      function n (e) {/in/.test(document.readyState) ? setTimeout('window.__cp_domReady(' + e + ')', 9) : e();}
-
-      var t = 1;
-      window.__cp_domReady = n, window.__CPEmbed = e, n(function () {new __CPEmbed;});
-    }();
+    mountCodePen();
   },
 };
 </script>
diff --git a/docs/.vuepress/utils/codePen.js b/docs/.vuepress/utils/codePen.js
new file mode 100644
index 0000000..b8d7a28
--- /dev/null
+++ b/docs/.vuepress/utils/codePen.js
@@ -0,0 +1,111 @@
+export default () => {
+
+  document.getElementsByClassName || (document.getElementsByClassName = function (e) {
+    var n, t, r, a = document, o = [];
+    if (a.querySelectorAll) return a.querySelectorAll('.' + e);
+    if (a.evaluate) for (t = './/*[contains(concat(\' \', @class, \' \'), \' ' + e + ' \')]', n = a.evaluate(t, a,
+      null, 0,
+      null); r = n.iterateNext();) o.push(r); else for (n = a.getElementsByTagName('*'), t = new RegExp(
+      '(^|\\s)' + e + '(\\s|$)'), r = 0; r < n.length; r++) t.test(n[r].className) && o.push(n[r]);
+    return o;
+  }), function () {
+    function e () {
+      function e () {
+        for (var e = document.getElementsByClassName('codepen'), t = e.length - 1; t > -1; t--) {
+          var u = a(e[t]);
+          if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) {
+            var c = i(u), l = s(u, c);
+            f(e[t], l);
+          }
+        }
+        m();
+      }
+
+      function n (e, n) {
+        if ('string' == typeof e.user) return e.user;
+        for (var t = 0, r = n.children.length; t < r; t++) {
+          var a = n.children[t], o = a.href || '', i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i);
+          if (i) return i[2];
+        }
+        return 'anon';
+      }
+
+      function r (e) {return e['slug-hash'];}
+
+      function a (e) {
+        for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
+          var o = t[r].name;
+          0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value);
+        }
+        return n;
+      }
+
+      function o (e) {
+        return e.href && (e['slug-hash'] = e.href), e.type && (e['default-tab'] = e.type), e.safe &&
+        ('true' === e.safe ? e.animations = 'run' : e.animations = 'stop-after-5'), e;
+      }
+
+      function i (e) {
+        var n = u(e), t = e.user ? e.user : 'anon', r = '?' + l(e),
+          a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
+          o = [n, t, a, e['slug-hash'] + r].join('/');
+        return o.replace(/\/\//g, '//');
+      }
+
+      function u (e) {
+        return e.host ? c(e.host) : 'file:' === document.location.protocol
+          ? 'https://codepen.io'
+          : '//codepen.io';
+      }
+
+      function c (e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + '//' + e : e;}
+
+      function l (e) {
+        var n = '';
+        for (var t in e) '' !== n && (n += '&'), n += t + '=' + encodeURIComponent(e[t]);
+        return n;
+      }
+
+      function s (e, n) {
+        var r;
+        e['pen-title'] ? r = e['pen-title'] : (r = 'CodePen Embed ' + t, t++);
+        var a = {
+          id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
+          src: n,
+          scrolling: 'no',
+          frameborder: '0',
+          height: d(e),
+          allowTransparency: 'true',
+          allowfullscreen: 'true',
+          allowpaymentrequest: 'true',
+          name: 'CodePen Embed',
+          title: r,
+          'class': 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
+          style: 'width: ' + p + '; overflow: hidden;',
+        }, o = '<iframe ';
+        for (var i in a) o += i + '="' + a[i] + '" ';
+        return o += '></iframe>';
+      }
+
+      function d (e) {return e.height ? e.height : 300;}
+
+      function f (e, n) {
+        if (e.parentNode) {
+          var t = document.createElement('div');
+          t.className = 'cp_embed_wrapper', t.innerHTML = n, e.parentNode.replaceChild(t, e);
+        } else e.innerHTML = n;
+      }
+
+      function m () {'function' == typeof __CodePenIFrameAddedToPage && __CodePenIFrameAddedToPage();}
+
+      var p = '100%';
+      e();
+    }
+
+    function n (e) {/in/.test(document.readyState) ? setTimeout('window.__cp_domReady(' + e + ')', 9) : e();}
+
+    var t = 1;
+    window.__cp_domReady = n, window.__CPEmbed = e, n(function () {new __CPEmbed;});
+  }();
+
+}
diff --git a/docs/docs/digging-deeper/ajax.md b/docs/docs/digging-deeper/ajax.md
index 612e7e8..9d0e323 100644
--- a/docs/docs/digging-deeper/ajax.md
+++ b/docs/docs/digging-deeper/ajax.md
@@ -1,6 +1,6 @@
 ## AJAX Remote Option Loading
 
-<CodePen url="POMeOX" height="40"/>
+<CodePen url="POMeOX" height="400"/>
 
 The `onSearch` prop allows you to load options via ajax in a parent component 
 when the search text is updated. It is invoked with two parameters, `search` & `loading`.
diff --git a/docs/docs/digging-deeper/vuex.md b/docs/docs/digging-deeper/vuex.md
index aba55b4..8efbc17 100644
--- a/docs/docs/digging-deeper/vuex.md
+++ b/docs/docs/digging-deeper/vuex.md
@@ -13,4 +13,4 @@ action, or trigger a mutation.
   ></v-select>
 ``` 
 
-<CodePen url="aJQJyp" height="50"/>
+<CodePen url="aJQJyp" height="350"/>
diff --git a/docs/docs/getting-started/localization.md b/docs/docs/getting-started/localization.md
index b03d687..16ab788 100644
--- a/docs/docs/getting-started/localization.md
+++ b/docs/docs/getting-started/localization.md
@@ -40,4 +40,4 @@ All of the text within the component has been wrapped within [slots](https://vue
 
 For a full list of component slots, view the [slots API docs](../api/slots.md).
 
-<CodePen url="oZmLVN" height="25"/>
+<CodePen url="oZmLVN" height="450"/>
diff --git a/docs/docs/getting-started/options.md b/docs/docs/getting-started/options.md
index 64c63b4..7aff972 100644
--- a/docs/docs/getting-started/options.md
+++ b/docs/docs/getting-started/options.md
@@ -31,7 +31,7 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
 <v-select label="countryName" :options="countries"></v-select>
 ```
 
-<CodePen url="aEjLPB" height="50"/>
+<CodePen url="aEjLPB" height="450"/>
 
 
 ## Option Object Key
diff --git a/docs/docs/getting-started/values.md b/docs/docs/getting-started/values.md
index 96df67f..90dc8d7 100644
--- a/docs/docs/getting-started/values.md
+++ b/docs/docs/getting-started/values.md
@@ -24,7 +24,7 @@ By default, `vue-select` supports choosing a single value. If you need multiple
 <v-select multiple v-model="selected"></v-select>
 ```
 
-<CodePen url="opMGro" height="25"/>
+<CodePen url="opMGro" height="250"/>
 
 ## Tagging
 
@@ -37,7 +37,7 @@ If you want new tags to be pushed to the options list, set `push-tags` to true.
 
 ## Return a Single Key from an Object
 
-<CodePen url="XVoWxm" height="35"/>
+<CodePen url="XVoWxm" height="350"/>
 
 When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.