Merge branch '@beta/nuxt/pnpm-workspace' into beta--nuxt

.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 '~/components/VueSelect.vue'
 </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">
+                  <VueSelect :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/components/VueSelect.vue

@@ -0,0 +1,7 @@
+<script setup>
+import VueSelect from '../../src/index.js'
+</script>
+
+<template>
+  <VueSelect v-bind="$attrs" />
+</template>

docs/components/content/VueSelect.vue

@@ -0,0 +1,7 @@
+<script setup>
+import VueSelect from '~/components/VueSelect.vue'
+</script>
+
+<template>
+  <VueSelect v-bind="$attrs" />
+</template>

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/content/guide/values.md

@@ -1,9 +1,3 @@
-<script setup>
-import vSelect from 'vue-select';
-import ReducerNestedValue from '@/components/ReducerNestedValue.vue';
-import ReducedWithNoMatchingOption from '@/components/ReducedWithNoMatchingOption.vue';
-</script>
-
 ## Getting and Setting
 
 ### `v-model`
@@ -75,7 +69,10 @@ is true, `v-model` and `value` must be an array.
 <v-select multiple v-model="selected" :options="['Canada','United States']" />
 ```
 
-<v-select multiple :options="['Canada','United States']" />
+::vue-select{options=['Canada','United States'],multiple=true}
+
+::
+
 
 ## Transforming Selections
 
@@ -151,7 +148,7 @@ To allow input that's not present within the options, set the `taggable` prop to
 <v-select taggable multiple />
 ```
 
-<v-select taggable multiple />
+<vue-select taggable multiple />
 
 If you want added tags to be pushed to the options array, set `push-tags` to true.
 
@@ -159,7 +156,7 @@ If you want added tags to be pushed to the options array, set `push-tags` to tru
 <v-select taggable multiple push-tags />
 ```
 
-<v-select taggable multiple push-tags />
+<vue-select taggable multiple push-tags />
 
 ### Using `taggable` & `reduce` together
 

docs/nuxt.config.ts

@@ -1,5 +1,4 @@
-import { fileURLToPath, URL } from 'url'
-
+import { resolve } from 'path'
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   css: ['~/assets/styles/fonts.css'],
@@ -40,9 +39,8 @@ export default defineNuxtConfig({
   vite: {
     resolve: {
       alias: {
-        'vue-select': fileURLToPath(
-          new URL('../src/index.js', import.meta.url)
-        ),
+        // resolve the aliases used in the vue-select build
+        '@': resolve(__dirname, '../src'),
       },
     },
   },

pnpm-workspace.yaml

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