mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Refactor docs to use Nuxt Content v3 and file-based pages
Migrates documentation from markdown-based content to Nuxt Content v3 with file-based routing. Removes old markdown content files, adds new Vue page components, updates layout and content rendering logic, introduces a Prose wrapper, and updates dependencies for Nuxt Content v3 and related packages.
This commit is contained in:
Jeff Sagal
Binary file not shown.
+18
-24
@@ -1,27 +1,21 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
import Hero from '~/components/Hero.vue'
|
|
||||||
import ApplicationHeader from '~/components/ApplicationHeader.vue'
|
|
||||||
import SidebarNavigation from '~/components/SidebarNavigation.vue'
|
|
||||||
import PageContent from '~/components/PageContent.vue'
|
|
||||||
import '../src/css/vue-select.css'
|
|
||||||
|
|
||||||
useHead({
|
|
||||||
title: 'Vue Select',
|
|
||||||
bodyAttrs: { class: 'bg-white dark:bg-slate-900' },
|
|
||||||
})
|
|
||||||
|
|
||||||
const { page } = useContent()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<NuxtLayout>
|
||||||
<ApplicationHeader />
|
<NuxtPage />
|
||||||
<Hero v-if="page?.hero" />
|
</NuxtLayout>
|
||||||
<div
|
|
||||||
class="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"
|
|
||||||
>
|
|
||||||
<SidebarNavigation />
|
|
||||||
<PageContent />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.page-enter-active,
|
||||||
|
.page-leave-active {
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.page-enter-from,
|
||||||
|
.page-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
filter: blur(0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ import {
|
|||||||
</p>
|
</p>
|
||||||
<p class="mt-3 text-2xl tracking-tight text-slate-400">
|
<p class="mt-3 text-2xl tracking-tight text-slate-400">
|
||||||
Everything you wish <code><select></code> could do, wrapped
|
Everything you wish <code><select></code> could do, wrapped
|
||||||
up in a lightweight, extendable Vue component.
|
up in lightweight, composable Vue component.
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
|
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
|
||||||
<Button variant="primary"> Get started </Button>
|
<Button variant="primary"> Get started </Button>
|
||||||
|
|||||||
@@ -1,36 +1,21 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ContentFooterNavigation from '~/components/PageContentFooterNavigation.vue'
|
import Prose from '~/components/Prose.vue'
|
||||||
import PageContentHeader from '~/components/PageContentHeader.vue'
|
import type { PageCollections } from '@nuxt/content'
|
||||||
import PageTableOfContents from '~/components/PageTableOfContents.vue'
|
|
||||||
|
type PageCollectionItem = PageCollections[keyof PageCollections]
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
page: PageCollectionItem
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<article>
|
||||||
class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16"
|
<PageContentHeader :page />
|
||||||
>
|
<Prose>
|
||||||
<article>
|
<ContentRenderer :value="page" :path="$route.path" />
|
||||||
<PageContentHeader />
|
</Prose>
|
||||||
<div
|
</article>
|
||||||
:class="[
|
<PageContentFooterNavigation :page />
|
||||||
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
|
<PageTableOfContents :toc="page.body.toc" />
|
||||||
// headings
|
|
||||||
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
|
|
||||||
// lead
|
|
||||||
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
|
|
||||||
// links
|
|
||||||
'prose-a:font-semibold dark:prose-a:text-sky-400',
|
|
||||||
// link underline
|
|
||||||
'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]',
|
|
||||||
// pre
|
|
||||||
'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
|
|
||||||
// hr
|
|
||||||
'dark:prose-hr:border-slate-800',
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<ContentDoc :path="$route.path" />
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<ContentFooterNavigation />
|
|
||||||
</div>
|
|
||||||
<PageTableOfContents />
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useContent } from '#imports'
|
import type { PageCollections } from '@nuxt/content'
|
||||||
|
|
||||||
const { page } = useContent()
|
type PageCollectionItem = PageCollections[keyof PageCollections]
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
page: PageCollectionItem
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -1,13 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, useContent } from '#imports'
|
import type { MarkdownRoot } from '@nuxt/content'
|
||||||
|
|
||||||
const { toc, page } = useContent()
|
defineProps<{
|
||||||
const shouldRender = computed(() => page.value?.hideToc !== true)
|
toc?: MarkdownRoot['toc']
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="shouldRender && toc.links"
|
v-if="toc"
|
||||||
class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6"
|
class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6"
|
||||||
>
|
>
|
||||||
<nav aria-labelledby="on-this-page-title" class="w-56">
|
<nav aria-labelledby="on-this-page-title" class="w-56">
|
||||||
|
|||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
|
||||||
|
// headings
|
||||||
|
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
|
||||||
|
// lead
|
||||||
|
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
|
||||||
|
// links
|
||||||
|
'prose-a:font-semibold dark:prose-a:text-sky-400',
|
||||||
|
// link underline
|
||||||
|
'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]',
|
||||||
|
// pre
|
||||||
|
'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
|
||||||
|
// hr
|
||||||
|
'dark:prose-hr:border-slate-800',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -61,7 +61,7 @@ const navigation = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const router = { pathname: '' }
|
const route = useRoute()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -97,7 +97,7 @@ const router = { pathname: '' }
|
|||||||
:href="link.href"
|
:href="link.href"
|
||||||
:class="[
|
:class="[
|
||||||
'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
|
'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
|
||||||
link.href === router.pathname
|
link.href === route.path
|
||||||
? 'font-semibold text-sky-500 before:bg-sky-500'
|
? 'font-semibold text-sky-500 before:bg-sky-500'
|
||||||
: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
|
: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
|
||||||
]"
|
]"
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<p class="lead"><ContentSlot :use="$slots.default" unwrap="p" /></p>
|
<p class="lead"><slot mdc-unwrap="p" /></p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ defineProps<{
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
|
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
|
||||||
<ContentSlot :use="$slots.default" unwrap="p" />
|
<slot mdc-unwrap="p" />
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { defineContentConfig, defineCollection } from '@nuxt/content'
|
||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
export default defineContentConfig({
|
||||||
|
collections: {
|
||||||
|
guide: defineCollection({
|
||||||
|
type: 'page',
|
||||||
|
source: 'guide/**/*.md',
|
||||||
|
schema: z.object({
|
||||||
|
section: z.string().optional(),
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
|
||||||
|
api: defineCollection({
|
||||||
|
type: 'page',
|
||||||
|
source: 'api/**/*.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 />
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
---
|
|
||||||
hero: true
|
|
||||||
hideToc: true
|
|
||||||
title: Vue Select
|
|
||||||
section: Introduction
|
|
||||||
description: Everything you wish the HTML select element could do, shipped as a lightweight, accessible and extendable Vue component.
|
|
||||||
---
|
|
||||||
|
|
||||||
:::lead
|
|
||||||
Vue Select is a feature rich combobox component. You might know it as a dropdown or
|
|
||||||
typeahead select. They're a staple on the web, and they're notoriously tough to get right!
|
|
||||||
:::
|
|
||||||
|
|
||||||
Vue Select provides a default template that fits most use cases. The component is designed
|
|
||||||
to be as lightweight as possible, while maintaining high standards for accessibility, developer
|
|
||||||
experience, and customization.
|
|
||||||
|
|
||||||
:::quick-links
|
|
||||||
|
|
||||||
:::quick-link{title="Installation" href="/guide/install"}
|
|
||||||
Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!
|
|
||||||
|
|
||||||
#icon
|
|
||||||
<svg data-name="arrow-down-tray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
|
||||||
<path fill-rule="evenodd" d="M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::quick-link{title="Options and Selections" href="/"}
|
|
||||||
You'll need to register some options so your users can select them.
|
|
||||||
|
|
||||||
#icon
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::quick-link{title="Customizing" href="/"}
|
|
||||||
Vue Select is plug-and-play by design, but you can always customize the look and feel.
|
|
||||||
|
|
||||||
#icon
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
|
||||||
</svg>
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::quick-link{title="Premium Resources" icon="theming" href="/"}
|
|
||||||
Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option
|
|
||||||
loading and more.
|
|
||||||
|
|
||||||
#icon
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- Tagging
|
|
||||||
- Filtering / Searching
|
|
||||||
- Vuex Support
|
|
||||||
- AJAX Support
|
|
||||||
- SSR Support
|
|
||||||
- Accessible
|
|
||||||
- ~20kb Total / ~5kb CSS / ~15kb JS
|
|
||||||
- Select Single/Multiple Options
|
|
||||||
- Customizable with slots and SCSS variables
|
|
||||||
- Zero dependencies
|
|
||||||
|
|
||||||
## Resources
|
|
||||||
|
|
||||||
- **[GitHub](https://github.com/sagalbot/vue-select)**
|
|
||||||
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
sidebar: false
|
|
||||||
editLink: false
|
|
||||||
layout: Sandbox
|
|
||||||
---
|
|
||||||
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
sidebarDepth: 0
|
|
||||||
---
|
|
||||||
|
|
||||||
<SponsorMe />
|
|
||||||
|
|
||||||
## Sponsors
|
|
||||||
|
|
||||||
<Sponsors />
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<CodePen url="zZQJKW" height="60"/>
|
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
hero?: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
bodyAttrs: { class: 'bg-white dark:bg-slate-900' },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ApplicationHeader />
|
||||||
|
<Hero v-if="hero" />
|
||||||
|
<div
|
||||||
|
class="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"
|
||||||
|
>
|
||||||
|
<SidebarNavigation />
|
||||||
|
<div
|
||||||
|
class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
+1
-1
@@ -7,7 +7,7 @@
|
|||||||
"preview": "nuxt preview"
|
"preview": "nuxt preview"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxt/content": "^2.13.4",
|
"@nuxt/content": "^3.3.0",
|
||||||
"@nuxt/eslint-config": "^1.2.0",
|
"@nuxt/eslint-config": "^1.2.0",
|
||||||
"@nuxtjs/color-mode": "^3.5.2",
|
"@nuxtjs/color-mode": "^3.5.2",
|
||||||
"@nuxtjs/google-fonts": "^3.2.0",
|
"@nuxtjs/google-fonts": "^3.2.0",
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<h1>Contributors</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Vue Select is supported by a community of awesome contributors! Without
|
||||||
|
their contributions, the package would not be what it is today.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const { data: page } = await useAsyncData(route.path, () => {
|
||||||
|
return queryCollection('guide').path(route.path).first()
|
||||||
|
})
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: page.value?.title,
|
||||||
|
description: page.value?.description,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<article>
|
||||||
|
<PageContent :page v-if="page" />
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import '../src/css/vue-select.css'
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
title: 'Vue Select',
|
||||||
|
})
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: false,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NuxtLayout :hero="true" name="default">
|
||||||
|
<Prose>
|
||||||
|
<Lead>
|
||||||
|
Vue Select is a feature rich combobox component. You might know it as a
|
||||||
|
dropdown or typeahead select. They're a staple on the web, and they're
|
||||||
|
notoriously tough to get right!
|
||||||
|
</Lead>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Vue Select provides a default template that fits most use cases. The
|
||||||
|
component is designed to be as lightweight as possible, while
|
||||||
|
maintaining high standards for accessibility, developer experience, and
|
||||||
|
customization.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<QuickLinks>
|
||||||
|
<QuickLink title="Installation" href="/guide/install">
|
||||||
|
Step-by-step instructions to install Vue Select in your project.
|
||||||
|
Couple lines and you're done!
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
data-name="arrow-down-tray"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</QuickLink>
|
||||||
|
|
||||||
|
<QuickLink title="Options and Selections" href="/">
|
||||||
|
You'll need to register some options so your users can select them.
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</QuickLink>
|
||||||
|
|
||||||
|
<QuickLink title="Customizing" href="/">
|
||||||
|
Vue Select is plug-and-play by design, but you can always customize
|
||||||
|
the look and feel.
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</QuickLink>
|
||||||
|
|
||||||
|
<QuickLink title="Premium Resources" href="/">
|
||||||
|
Pre-built Vue Select instances with custom themes and features.
|
||||||
|
Infinite scroll, remote option loading and more.
|
||||||
|
<template #icon>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</QuickLink>
|
||||||
|
</QuickLinks>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Features</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Tagging</li>
|
||||||
|
<li>Filtering / Searching</li>
|
||||||
|
<li>Vuex Support</li>
|
||||||
|
<li>AJAX Support</li>
|
||||||
|
<li>SSR Support</li>
|
||||||
|
<li>Accessible</li>
|
||||||
|
<li>~20kb Total / ~5kb CSS / ~15kb JS</li>
|
||||||
|
<li>Select Single/Multiple Options</li>
|
||||||
|
<li>Customizable with slots and SCSS variables</li>
|
||||||
|
<li>Zero dependencies</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Resources</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/sagalbot/vue-select">GitHub</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="http://codepen.io/sagalbot/pen/NpwrQO">CodePen Template</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</Prose>
|
||||||
|
</NuxtLayout>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>Sponsors</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Generated
+371
-272
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user