mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

Refactor docs to use Nuxt Content v3 and file-based pages

Browse Source 
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
2025-11-13 11:56:09 -08:00
parent 06d9a373f2
commit 7644929efe
23 changed files with 669 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.data/content/contents.sqlite
BIN
View File
Binary file not shown.
docs/app.vue
+18 -24
View File
@@ -1,27 +1,21 @@
<script setup lang="ts">
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>
<script setup lang="ts"></script>
<template>
<div>
<ApplicationHeader />
<Hero v-if="page?.hero" />
<div
class="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"
>
<SidebarNavigation />
<PageContent />
</div>
</div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</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>
docs/components/Hero.vue
+1 -1
View File
@@ -35,7 +35,7 @@ import {
</p>
<p class="mt-3 text-2xl tracking-tight text-slate-400">
Everything you wish <code>&lt;select&gt;</code> could do, wrapped
up in a lightweight, extendable Vue component.
up in lightweight, composable Vue component.
</p>
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
<Button variant="primary"> Get started </Button>
docs/components/PageContent.vue
+16 -31
View File
@@ -1,36 +1,21 @@
<script setup lang="ts">
import ContentFooterNavigation from '~/components/PageContentFooterNavigation.vue'
import PageContentHeader from '~/components/PageContentHeader.vue'
import PageTableOfContents from '~/components/PageTableOfContents.vue'
import Prose from '~/components/Prose.vue'
import type { PageCollections } from '@nuxt/content'
type PageCollectionItem = PageCollections[keyof PageCollections]
defineProps<{
page: PageCollectionItem
}>()
</script>
<template>
<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"
>
<article>
<PageContentHeader />
<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',
]"
>
<ContentDoc :path="$route.path" />
</div>
</article>
<ContentFooterNavigation />
</div>
<PageTableOfContents />
<article>
<PageContentHeader :page />
<Prose>
<ContentRenderer :value="page" :path="$route.path" />
</Prose>
</article>
<PageContentFooterNavigation :page />
<PageTableOfContents :toc="page.body.toc" />
</template>
docs/components/PageContentHeader.vue
+6 -2
View File
@@ -1,7 +1,11 @@
<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>
<template>
docs/components/PageTableOfContents.vue
+5 -4
View File
@@ -1,13 +1,14 @@
<script setup lang="ts">
import { computed, useContent } from '#imports'
import type { MarkdownRoot } from '@nuxt/content'
const { toc, page } = useContent()
const shouldRender = computed(() => page.value?.hideToc !== true)
defineProps<{
toc?: MarkdownRoot['toc']
}>()
</script>
<template>
<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"
>
<nav aria-labelledby="on-this-page-title" class="w-56">
docs/components/Prose.vue
+25
View File
@@ -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>
docs/components/SidebarNavigation.vue
+2 -2
View File
@@ -61,7 +61,7 @@ const navigation = [
],
},
]
const router = { pathname: '' }
const route = useRoute()
</script>
<template>
@@ -97,7 +97,7 @@ const router = { pathname: '' }
:href="link.href"
: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',
link.href === router.pathname
link.href === route.path
? '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',
]"
docs/components/content/Lead.vue
+1 -1
View File
@@ -1,3 +1,3 @@
<template>
<p class="lead"><ContentSlot :use="$slots.default" unwrap="p" /></p>
<p class="lead"><slot mdc-unwrap="p" /></p>
</template>
docs/components/content/QuickLink.vue
+1 -1
View File
@@ -24,7 +24,7 @@ defineProps<{
</NuxtLink>
</h2>
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
<ContentSlot :use="$slots.default" unwrap="p" />
<slot mdc-unwrap="p" />
</p>
</div>
</div>
docs/content.config.ts
+19
View File
@@ -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',
}),
},
})
docs/content/contributors.md
-10
View File
@@ -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/content/index.md
-77
View File
@@ -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)**
docs/content/sandbox.md
-6
View File
@@ -1,6 +0,0 @@
---
sidebar: false
editLink: false
layout: Sandbox
---
docs/content/sponsors.md
-9
View File
@@ -1,9 +0,0 @@
---
sidebarDepth: 0
---
<SponsorMe />
## Sponsors
<Sponsors />
docs/content/validation.md
-1
View File
@@ -1 +0,0 @@
<CodePen url="zZQJKW" height="60"/>
docs/layouts/default.vue
+26
View File
@@ -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>
docs/package.json
+1 -1
View File
@@ -7,7 +7,7 @@
"preview": "nuxt preview"
},
"devDependencies": {
"@nuxt/content": "^2.13.4",
"@nuxt/content": "^3.3.0",
"@nuxt/eslint-config": "^1.2.0",
"@nuxtjs/color-mode": "^3.5.2",
"@nuxtjs/google-fonts": "^3.2.0",
docs/pages/contributors.vue
+12
View File
@@ -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>
docs/pages/guide/[...slug].vue
+18
View File
@@ -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>
docs/pages/index.vue
+140
View File
@@ -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>
docs/pages/sponsors.vue
+7
View File
@@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div>
<h2>Sponsors</h2>
</div>
</template>
pnpm-lock.yaml
Generated
+371 -272
View File
File diff suppressed because it is too large Load Diff