wip

doesn't work, this is the worst

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

docs/app.vue

@@ -5,6 +5,7 @@ import ApplicationHeader from '~/components/ApplicationHeader.vue'
 import SidebarNavigation from '~/components/SidebarNavigation.vue'
 import PageContent from '~/components/PageContent.vue'
 import { useContent } from '#imports'
+import '../src/css/vue-select.css'
 
 useHead({
   title: 'Vue Select',

docs/components/Hero.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Button from '~/components/Button.vue'
 import TimelineSvg from '~/components/TimelineSvg.vue'
+import VueSelect from 'vue-select'
 </script>
 
 <template>
@@ -9,7 +10,7 @@ import TimelineSvg from '~/components/TimelineSvg.vue'
   >
     <div class="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
       <div
-        class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"
+        class="lg:max-w-8xl mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"
       >
         <div class="relative z-10 md:text-center lg:text-left">
           <img
@@ -22,7 +23,7 @@ import TimelineSvg from '~/components/TimelineSvg.vue'
           />
           <div class="relative">
             <p
-              class="inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent"
+              class="font-display inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
             >
               The complete Vue.js combobox solution.
             </p>
@@ -82,7 +83,9 @@ import TimelineSvg from '~/components/TimelineSvg.vue'
                 class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
               ></div>
               <div class="pl-4 pt-4">
-                <div class="mt-6 flex items-start px-1 text-sm"></div>
+                <div class="mt-6 flex items-start px-1 text-sm">
+                  <vue-select :options="['hello']" />
+                </div>
               </div>
             </div>
           </div>

docs/components/SidebarNavigation.vue

@@ -13,7 +13,7 @@ const navigation = [
       { href: '/guide/install', title: 'Installation' },
       { href: '/guide/options', title: 'Dropdown Options' },
       { href: '/guide/values', title: 'Selecting Values' },
-      { href: '/guide/upgrading', title: 'Upgrading 2.x to 3.x' },
+      { href: '/guide/upgrading', title: 'Upgrade Guide' },
     ],
   },
   {

docs/content/guide/install.md

@@ -10,9 +10,7 @@ yarn add vue-select@beta
 npm install vue-select@beta
 ```
 
-Next you'll import and register the component. You can register the component globally or locally. *
-Unsure what this means? Check
-the [VueJS docs on component registration](https://vuejs.org/guide/components/registration.html#component-registration)
+Next you'll import and register the component. You can register the component globally or locally. *Unsure what this means? Check the [VueJS docs on component registration](https://vuejs.org/guide/components/registration.html#component-registration)
 .*
 
 ### Global Registration

docs/nuxt.config.ts

@@ -1,5 +1,3 @@
-import { fileURLToPath, URL } from 'url'
-
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   css: ['~/assets/styles/fonts.css'],
@@ -37,16 +35,6 @@ export default defineNuxtConfig({
     },
   },
 
-  vite: {
-    resolve: {
-      alias: {
-        'vue-select': fileURLToPath(
-          new URL('../src/index.js', import.meta.url)
-        ),
-      },
-    },
-  },
-
   build: {
     // @see https://github.com/tailwindlabs/headlessui/discussions/1545#discussioncomment-2871517
     transpile: ['@headlessui/vue'],

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'docs'