diff --git a/docs/content/guide/install.md b/docs/content/guide/install.md index 6e97f35..f6b6b6f 100644 --- a/docs/content/guide/install.md +++ b/docs/content/guide/install.md @@ -1,29 +1,46 @@ - - ## Yarn / NPM Install with yarn or npm: ```bash -# vue 2 -yarn add vue-select - -# vue 3 +# Yarn yarn add vue-select@beta -# or, using NPM -npm install vue-select +# NPM +npm install vue-select@beta ``` -Then, import and register the component: +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 ```js -import Vue from 'vue' +import { createApp } from "vue"; +import vSelect from "vue-select"; + +const app = createApp({}); + +app.component('vSelect', vSelect); +``` + +### Local Registration + +```vue + + + + ``` The component itself does not include any CSS. You'll need to include it separately: @@ -35,7 +52,7 @@ import 'vue-select/dist/vue-select.css'; ## In the Browser vue-select ships as an UMD module that is accessible in the browser. When loaded -in the browser, you can access the component through the `VueSelect.VueSelect` +in the browser, you can access the component through the `VueSelect.VueSelect` global variable. You'll need to load Vue.js, vue-select JS & vue-select CSS. ```html @@ -50,15 +67,21 @@ global variable. You'll need to load Vue.js, vue-select JS & vue-select CSS. ``` + Then register the component in your javascript: ```js Vue.component('v-select', VueSelect.VueSelect); ``` - +::code-pen +--- +url: dJjzeP +--- ## Vue Compatibility -- Vue `2.x`, use vue-select `3.x`. -- Vue `3.x`, use vue-select `3.x@beta`. +| Vue | Vue Select | Notes | +|------|------------|----------------------------------------------------------------------------| +| ^2.3 | 3.x | The 3.x branch of Vue Select supports Vue 2.3 and above. View the v3 docs. | +| ^3.0 | 4.0-beta | The latest version of Vue Select for Vue 3 applications. |