nuxt setup, tailwind

dev/Dev.vue

@@ -6,8 +6,8 @@
 
 <script>
 import vSelect from "../src/components/Select";
-import countries from "../docs/.vuepress/data/countryCodes";
-import books from "../docs/.vuepress/data/books";
+import countries from "../docs/data/countryCodes";
+import books from "../docs/data/books";
 
 export default {
   components: { vSelect },

docs/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.nuxt
+dist

docs/.vuepress/config/plugins.js

@@ -18,5 +18,5 @@ module.exports = [
   "@vuepress/plugin-active-header-links",
   "@vuepress/plugin-search",
   "@vuepress/plugin-nprogress",
-  require('../github/index')
+  require('../../github/index')
 ];

docs/.vuepress/theme/components/EthicalAds.vue

@@ -1,54 +0,0 @@
-<script>
-/**
- * @see https://ethical-ad-client.readthedocs.io/en/latest/
- */
-export default {
-  render(h) {
-    return h("div", {
-      attrs: {
-        id: "ads",
-        "data-ea-publisher": "vue-select",
-        "data-ea-type": "image"
-      },
-      class: "flat horizontal"
-    });
-  },
-  mounted() {
-    this.load();
-  },
-  watch: {
-    $route(to, from) {
-      if (
-        to.path !== from.path &&
-        // Only reload if the ad has been loaded
-        // otherwise it's possible that the script is appended but
-        // the ads are not loaded yet. This would result in duplicated ads.
-        [...this.$el.classList].includes("loaded")
-      ) {
-        this.$el.innerHTML = "";
-        this.$el.classList.remove("loaded");
-        this.load();
-      }
-    }
-  },
-  methods: {
-    load() {
-      const s = document.createElement("script");
-      s.id = "_ads_js";
-      s.src = `https://media.ethicalads.io/media/client/ethicalads.min.js`;
-      s.async = "async";
-      this.$el.appendChild(s);
-    }
-  }
-};
-</script>
-
-<style scoped>
-#ads {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  min-height: 264px;
-}
-</style>

docs/.vuepress/theme/index.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extend: '@vuepress/theme-default',
-};

docs/.vuepress/theme/layouts/Layout.vue

@@ -1,22 +0,0 @@
-<template>
-  <ParentLayout></ParentLayout>
-</template>
-
-<script>
-import ParentLayout from "@parent-theme/layouts/Layout.vue";
-
-export default {
-  components: {
-    ParentLayout,
-  }
-};
-</script>
-
-<style>
-#ads {
-  border-bottom: 1px solid #eaecef;
-}
-#ads + .sidebar-links {
-  padding-top: 1rem;
-}
-</style>

docs/README.md

@@ -22,8 +22,8 @@ developer experience, and customization.
 </div>
 
 Vue Select aims to be as lightweight as possible, while maintaining high standards for accessibility,
-developer experience, and customization. Huge thanks to the [sponsors](sponsors.md) and
-[contributors](contributors.md) that make Vue Select possible!
+developer experience, and customization. Huge thanks to the [sponsors](content/sponsors.md) and
+[contributors](content/contributors.md) that make Vue Select possible!
 
 ## Features
 

docs/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

docs/components/CodePen.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import mountCodePen from '../utils/codePen';
+import mountCodePen from '../utils/codePen.js';
 
 export default {
   props: {

docs/components/CountrySelect.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import countryCodes from '../data/countryCodes';
+import countryCodes from '../data/countryCodes.js';
 
 export default {
   name: 'CountrySelect',

docs/components/FuseFilter.vue

@@ -10,7 +10,7 @@
 
 <script>
 import Fuse from "fuse.js";
-import books from "../data/books";
+import books from "../data/books.js";
 
 export default {
   computed: {

docs/components/InfiniteScroll.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import countries from '../data/countries';
+import countries from '../data/countries.js';
 
 export default {
   name: "InfiniteScroll",

docs/components/LimitSelectionQuantity.vue

@@ -9,7 +9,7 @@
   />
 </template>
 <script>
-import books from '../data/books';
+import books from '../data/books.js';
 export default {
   data() {
     return { selected: [] }

docs/components/LoopedSelect.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import countries from '../data/countries';
+import countries from '../data/countries.js';
 
 export default {
   data: () => ({

docs/components/Paginated.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import countries from '../data/countries';
+import countries from '../data/countries.js';
 export default {
   data: () => ({
     countries,

docs/components/PositionedWithPopper.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import countries from '../data/countries'
+import countries from '../data/countries.js'
 import { createPopper } from '@popperjs/core';
 
 export default {

docs/components/Sandbox.vue

@@ -164,9 +164,9 @@
 <script>
 import Fuse from 'fuse.js';
 import debounce from 'lodash/debounce';
-import vSelect from '../../../src/components/Select.vue';
-import countries from '../data/countryCodes';
-import books from '../data/books';
+import vSelect from '../../src/components/Select.vue';
+import countries from '../data/countryCodes.js';
+import books from '../data/books.js';
 
 const defaultConfig = () => ({
   options: countries,

docs/components/UnselectableExample.vue

@@ -7,7 +7,7 @@
   />
 </template>
 <script>
-import books from '../data/books';
+import books from '../data/books.js';
 export default {
   computed: {
     books: () => books,

docs/components/ValidationRequired.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import books from '../data/books'
+import books from '../data/books.js'
 export default {
   data: () => ({
     books,

docs/contributors.md

@@ -1,10 +0,0 @@
----
-sidebarDepth: 0
----
-
-# Contributors
-
-Vue Select is supported by a community of awesome contributors! Without their contributions,
-the package would not be what it is today.
-
-<Contributors />

docs/github/index.js

@@ -1,4 +1,4 @@
-const clientDynamicModules = require('./clientDynamicModules');
+const clientDynamicModules = require('./clientDynamicModules.js');
 
 module.exports = {
   clientDynamicModules: async () => await clientDynamicModules(),

docs/layouts/default.vue

@@ -0,0 +1 @@
+<template></template>

docs/nuxt.config.js

@@ -0,0 +1,4 @@
+export default {
+  env: {},
+  buildModules: ["@nuxtjs/tailwindcss"],
+};

docs/package.json

@@ -1,32 +1,27 @@
 {
   "name": "@vue-select/docs",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "scripts": {
-    "serve": "vuepress dev",
-    "build": "vuepress build",
-    "build:preview": "cross-env DEPLOY_PREVIEW=true vuepress build"
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "start": "nuxt start"
   },
   "devDependencies": {
-    "@octokit/graphql": "^4.3.1",
-    "@popperjs/core": "^2.1.0",
-    "@vuepress/plugin-active-header-links": "^1.4.0",
-    "@vuepress/plugin-google-analytics": "^1.4.0",
-    "@vuepress/plugin-nprogress": "^1.4.0",
-    "@vuepress/plugin-pwa": "^1.4.0",
-    "@vuepress/plugin-register-components": "^1.4.0",
-    "@vuepress/plugin-search": "^1.4.0",
-    "axios": "^0.19.2",
-    "cross-env": "^7.0.2",
-    "date-fns": "^2.11.0",
-    "dotenv": "^8.2.0",
-    "fuse.js": "^6.4.0",
-    "gh-pages": "^2.2.0",
-    "node-sass": "^4.12.0",
-    "octonode": "^0.9.5",
-    "sass-loader": "^8.0.2",
-    "vue": "^2.6.10",
-    "vuepress": "^1.4.0",
-    "vuex": "^3.1.0"
+    "@nuxt/content": "^1.14.0",
+    "@nuxtjs/tailwindcss": "^4.2.1",
+    "@octokit/graphql": "^4.6.4",
+    "@popperjs/core": "^2.9.2",
+    "autoprefixer": "^10.3.1",
+    "axios": "^0.21.1",
+    "date-fns": "^2.23.0",
+    "fuse.js": "^6.4.6",
+    "nuxt": "^2.15.7",
+    "octonode": "^0.10.2",
+    "postcss": "^8.3.6",
+    "prettier": "^2.3.2",
+    "tailwindcss": "^2.2.7",
+    "vuex": "^3.6.2"
   }
 }

docs/pages/contributors.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'Contributors',
+};
+</script>
+
+<style scoped>
+
+</style>

docs/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'Home.vue',
+};
+</script>
+
+<style scoped>
+
+</style>

docs/pages/sandbox.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'Sandbox',
+};
+</script>
+
+<style scoped>
+
+</style>

docs/pages/sponsors.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'Sponsors',
+};
+</script>
+
+<style scoped>
+
+</style>

docs/sandbox.md

@@ -1,6 +0,0 @@
----
-sidebar: false
-editLink: false
-layout: Sandbox
----
-

docs/sponsors.md

@@ -1,9 +0,0 @@
----
-sidebarDepth: 0
----
-
-<SponsorMe />
-
-## Sponsors
-
-<Sponsors />

docs/tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  purge: [
+    "./components/**/*.{vue,js}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./nuxt.config.{js,ts}",
+  ],
+  mode: "jit",
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

docs/validation.md

@@ -1 +0,0 @@
-<CodePen url="zZQJKW" height="60"/>