adjust webpack config for renderless component

build/webpack.base.conf.js

@@ -59,7 +59,7 @@ module.exports = {
       'process.env': env,
     }),
     new MiniCssExtractPlugin({
-      filename: 'vue-select.css',
+      filename: '[name].css',
     }),
     new VueLoaderPlugin(),
   ],

build/webpack.prod.conf.js

@@ -3,9 +3,12 @@ const merge = require('webpack-merge');
 const baseWebpackConfig = require('./webpack.base.conf');
 
 module.exports = merge(baseWebpackConfig, {
-  entry: './src/index.js',
+  entry: {
+    'vue-select': './src/index.js',
+    'renderless': './src/components/Renderless.vue',
+  },
   output: {
-    filename: 'vue-select.js',
+    filename: '[name].js',
     library: 'VueSelect',
     libraryTarget: 'umd',
     globalObject: 'typeof self !== \'undefined\' ? self : this',
@@ -21,5 +24,5 @@ module.exports = merge(baseWebpackConfig, {
         },
       }),
     ],
-  }
+  },
 });

src/components/Renderless.vue

@@ -0,0 +1,27 @@
+<script>
+import Select from './Select';
+
+export default {
+  ...Select,
+  computed: {
+    ...Select.computed,
+    searchEl() {
+      return this.$root.$el.querySelector('input[type=search]');
+    }
+  },
+  render () {
+    const scope = {};
+
+    for (const property in {
+      ...Select.computed,
+      ...Select.methods,
+      ...Select.props,
+      ...this.$data,
+    }) {
+      scope[property] = this[property];
+    }
+
+    return this.$scopedSlots.default(scope);
+  },
+};
+</script>

src/components/Select.vue

@@ -1,7 +1,3 @@
-<style lang="scss">
-  @import '../scss/vue-select.scss';
-</style>
-
 <template>
   <div :dir="dir" class="v-select" :class="stateClasses">
     <div ref="toggle" @mousedown.prevent="toggleDropdown" class="vs__dropdown-toggle">

src/index.js

@@ -1,5 +1,7 @@
 import VueSelect from './components/Select.vue'
 import mixins from './mixins/index'
 
+import './scss/vue-select.scss';
+
 export default VueSelect
 export { VueSelect, mixins }