.editorconfig

@@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.{js,vue}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module',
+  },
+  plugins: ['prettier'],
+  extends: [
+    'plugin:prettier/recommended',
+    'plugin:vue/recommended',
+    'prettier/vue',
+  ],
+  ignorePatterns: [
+    '!.*.js',
+    '!docs/.vuepress',
+    'docs/.vuepress/dist',
+    'node_modules',
+    'dist',
+    'coverage',
+    'yarn.lock',
+  ],
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +1,27 @@
 ---
-name: Bug report
-about: Create a report to help us improve
+name: Bug Report
+about: Create a bug report to help fix an issue with the component.
 title: ''
-labels: ''
+labels: 'bug'
 assignees: ''
-
 ---
 
+> Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.
+
+- Vue Version: 
+- Vue Select Version: 
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+**Reproduction Link**
+A link to a reproduction of the bug. This is a huge help.
+
+**Steps To Reproduce**
+Outline the steps to reproduce the bug.
 
 **Expected behavior**
 A clear and concise description of what you expected to happen.
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discussions
+    url: https://github.com/sagalbot/vue-select/discussions
+    about: If you're not submitting a bug or feature request, please use discussions instead.

.github/workflows/release.yml

@@ -5,7 +5,7 @@ on:
       - master
 jobs:
   release:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1

.github/workflows/test.yml

@@ -2,7 +2,7 @@ name: Test & Build
 on: [pull_request]
 jobs:
   test:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
@@ -15,13 +15,16 @@ jobs:
       - name: Test with Coverage
         run: yarn test --coverage --coverageReporters=lcov
 
+      - name: ESLint
+        run: yarn eslint
+
       - name: Report Coverage
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+coverage
+yarn.lock
+dist
+dist/*

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "proseWrap": "always"
+}

README.md

@@ -1,4 +1,4 @@
-# vue-select ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) ![Bundle Size](https://flat.badgen.net/bundlephobia/min/vue-select) ![Monthly Downloads](https://img.shields.io/npm/dm/vue-select.svg?style=flat-square) [![Coverage Status](https://coveralls.io/repos/github/sagalbot/vue-select/badge.svg?branch=master)](https://coveralls.io/github/sagalbot/vue-select?branch=master) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square)
+# vue-select ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) ![Release Date](https://img.shields.io/github/release-date/sagalbot/vue-select?style=flat-square) ![Bundle Size](https://flat.badgen.net/bundlephobia/min/vue-select) ![Monthly Downloads](https://img.shields.io/npm/dm/vue-select.svg?style=flat-square) [![Coverage Status](https://coveralls.io/repos/github/sagalbot/vue-select/badge.svg?branch=master)](https://coveralls.io/github/sagalbot/vue-select?branch=master) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square)
 
 > **Everything you wish the HTML `<select>` element could do, wrapped up into a lightweight, zero
 > dependency, extensible Vue component.**
@@ -24,16 +24,57 @@ developer experience, and customization.
 Complete documentation and examples available at https://vue-select.org.
 
 - **[API Documentation](https://vue-select.org)**
-- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
+- **[Vue 2 CodePen Template](https://codepen.io/pen?template=VwdrdzG)**
+- **[Vue 3 CodePen Template](https://codepen.io/pen?template=NpwrQO)**
 
 ## Sponsors :tada:
 
 It takes a lot of effort to maintain this project. If it has saved you development time, please consider [sponsoring the project](https://github.com/sponsors/sagalbot)
 with GitHub sponsors!
 
-Huge thanks to the [sponsors](https://github.com/sponsors/sagalbot) and [contributors](https://github.com/sagalbot/vue-select/graphs/contributors) that make Vue Select possible.
+Huge thanks to the [sponsors](https://github.com/sponsors/sagalbot) and [contributors](https://github.com/sagalbot/vue-select/graphs/contributors) that make Vue Select possible!
 
-## Install
+## Get started
+
+**Vue 3 / Vue Select 4.x-beta**
+
+> Vue 3 support is on the `beta` channel: `vue-select@beta`, and will become the new default when `v4` is released. See [#1579](https://github.com/sagalbot/vue-select/issues/1597) for more details!
+
+Install:
+
+```bash
+yarn add vue-select@beta
+
+# or use npm
+
+npm install vue-select@beta
+```
+
+Then, import and register the component:
+
+```js
+# main.ts or main.js
+
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import { VueSelect } from "vue-select";
+
+createApp(App)
+    .component("v-select", VueSelect)
+    .mount("#app");
+```
+
+The component itself does not include any CSS. You'll need to include it separately in your Component.vue:
+```vue
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
+```
+
+**Vue 2 / Vue Select 3.x**
+
+Install:
 
 ```bash
 yarn add vue-select
@@ -58,12 +99,6 @@ The component itself does not include any CSS. You'll need to include it separat
 import "vue-select/dist/vue-select.css";
 ```
 
-Alternatively, you can import the scss for complete control of the component styles:
-
-```scss
-@import "vue-select/src/scss/vue-select.scss";
-```
-
 You can also include vue-select directly in the browser. Check out the
 [documentation for loading from CDN.](https://vue-select.org/guide/install.html#in-the-browser).
 

build/webpack.base.conf.js

@@ -1,17 +1,14 @@
-const path = require('path');
-const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path')
+const webpack = require('webpack')
+const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-const env = process.env.NODE_ENV === 'production'
-  ? 'production'
-  : 'development';
+const env = process.env.NODE_ENV === 'production' ? 'production' : 'development'
 
-const devtool = env === 'production' ? 'source-map' : 'eval-source-map';
+const devtool = env === 'production' ? 'source-map' : 'eval-source-map'
 
-const extractOrInjectStyles = env !== 'production'
-  ? 'vue-style-loader'
-  : MiniCssExtractPlugin.loader;
+const extractOrInjectStyles =
+  env !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader
 
 module.exports = {
   mode: env,
@@ -24,11 +21,11 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue'],
     alias: {
-      'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../docs/assets'),
-      'mixins': path.resolve(__dirname, '../src/mixins'),
-      'components': path.resolve(__dirname, '../src/components'),
-      'vue$': 'vue/dist/vue.esm.js',
+      src: path.resolve(__dirname, '../src'),
+      assets: path.resolve(__dirname, '../docs/assets'),
+      mixins: path.resolve(__dirname, '../src/mixins'),
+      components: path.resolve(__dirname, '../src/components'),
+      vue$: 'vue/dist/vue.esm.js',
     },
   },
   module: {
@@ -44,12 +41,14 @@ module.exports = {
         exclude: /node_modules/,
       },
       {
-        test: /\.s?css$/,
+        test: /\.css$/i,
         use: [
           extractOrInjectStyles,
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 },
+          },
           'postcss-loader',
-          'sass-loader',
         ],
       },
     ],
@@ -67,4 +66,4 @@ module.exports = {
     children: false,
     modules: false,
   },
-};
+}

build/webpack.dev.conf.js

@@ -1,39 +1,21 @@
-const merge = require('webpack-merge');
-const chokidar = require('chokidar');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const baseWebpackConfig = require('./webpack.base.conf');
+const { merge } = require('webpack-merge')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const baseWebpackConfig = require('./webpack.base.conf')
 
-/**
- *
- */
 module.exports = merge(baseWebpackConfig, {
   entry: './dev/dev.js',
+  devServer: {
+    open: true,
+    static: false,
+    client: { overlay: true },
+    watchFiles: ['dev/dev.html'],
+  },
+  stats: false,
   plugins: [
     new HtmlWebpackPlugin({
+      title: 'dev',
       template: './dev/dev.html',
       inject: true,
     }),
   ],
-  optimization: {
-    noEmitOnErrors: true,
-  },
-  devServer: {
-    hot: true,
-    hotOnly: true,
-    open: true,
-    inline: true,
-    stats: {
-      children: false,
-      modules: false,
-      chunks: false,
-    },
-    port: 8080,
-    before (app, server) {
-      chokidar.watch([
-        './**/*.html',
-      ]).on('all', function () {
-        server.sockWrite(server.sockets, 'content-changed');
-      });
-    },
-  },
-});
+})

build/webpack.prod.conf.js

@@ -1,20 +1,17 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const merge = require('webpack-merge');
-const baseWebpackConfig = require('./webpack.base.conf');
+const TerserPlugin = require('terser-webpack-plugin')
+const { merge } = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
 
 module.exports = merge(baseWebpackConfig, {
   entry: './src/index.js',
   output: {
     filename: 'vue-select.js',
     library: 'VueSelect',
     libraryTarget: 'umd',
-    globalObject: 'typeof self !== \'undefined\' ? self : this',
+    globalObject: "typeof self !== 'undefined' ? self : this",
   },
   optimization: {
-    minimizer: [
-      new TerserPlugin({
-        sourceMap: true,
-      }),
-    ],
-  }
-});
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+})