### Project Setup and Commands

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Provides essential commands for setting up and managing the Vitesse Lite project. This includes cloning the repository, installing dependencies, starting the development server, building for production, running tests, and performing type checking.

```bash
npx degit antfu-collective/vitesse-lite my-vitesse-app
cd my-vitesse-app
pnpm install
pnpm dev
pnpm build
pnpm test
pnpm typecheck
```

--------------------------------

### Vue Macros Usage Example (Vue)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Shows how to leverage Vue Macros for props destructuring and `defineModel` within a Vue component's script setup. Props destructuring maintains reactivity, and `defineModel` provides a concise way to handle v-model bindings.

```vue
<script setup lang="ts">
// Props destructure - maintains reactivity
const { title, count = 0 } = defineProps<{ 
  title: string
  count?: number
}>()

// defineModel for v-model support
const modelValue = defineModel<string>()
</script>
```

--------------------------------

### Path Aliasing Usage Example (TypeScript)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Demonstrates the benefit of path aliasing by showing how to import modules using the `~/` alias instead of long relative paths. This improves code maintainability and readability.

```typescript
// Instead of relative paths
import { isDark } from '../../../../composables'

// Use aliased paths
import { isDark } from '~/composables'
```

--------------------------------

### Example Vue Component Test with Vitest

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

An example of a unit test for a Vue component using Vitest and Vue Test Utils. It demonstrates mounting a component and asserting its rendered text content.

```typescript
import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import MyComponent from '~/components/MyComponent.vue'

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent, {
      props: { title: 'Hello' }
    })
    expect(wrapper.text()).toContain('Hello')
  })
})
```

--------------------------------

### Path Aliasing Example (TypeScript)

Source: https://github.com/saltand/clerk-toc-vue/blob/main/src/pages/README.md

Demonstrates path aliasing in TypeScript, where '~/' is mapped to './src/'. This simplifies import paths, reducing the need for relative path navigation.

```typescript
import { isDark } from '~/composables'
```

--------------------------------

### Clone Project with Degit

Source: https://github.com/saltand/clerk-toc-vue/blob/main/README.md

This command uses `degit` to clone the Vitesse Lite repository into a local directory, effectively creating a new project based on the template. It's a quick way to start a new project without the full Git history.

```bash
npx degit antfu-collective/vitesse-lite my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```

--------------------------------

### File-Based Routing Setup in Vue.js

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Demonstrates how to set up file-based routing in a Vue 3 application using `unplugin-vue-router`. Routes are automatically generated based on the file structure within the `src/pages/` directory, simplifying route management.

```typescript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})
app.use(router)
app.mount('#app')
```

--------------------------------

### Configure Vitest with jsdom Environment

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Configures Vitest to use the jsdom environment for unit and component testing. This setup is essential for simulating a browser environment in Node.js.

```typescript
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
  },
})
```

--------------------------------

### useTocThumb Composable Usage (Vue)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Illustrates the usage of the `useTocThumb` composable to create a dynamic visual indicator within a TOC navigation. It uses `useAnchorObserver` to track active items and `useTemplateRef` to get the container element, then applies the calculated position and height to style the indicator.

```vue
<script setup lang="ts">
const containerRef = useTemplateRef('containerRef')
const headings = ['section-1', 'section-2', 'section-3']
const active = useAnchorObserver(headings, false)
const pos = useTocThumb(containerRef, active)
// pos.value = [120, 48] - indicator at 120px from top, 48px tall
</script>

<template>
  <div ref="containerRef" class="relative">
    <!-- Visual indicator -->
    <div
      class="absolute left-0 w-1 bg-blue-500 transition-all"
      :style="{
        marginTop: `${pos[0]}px`,
        height: `${pos[1]}px`,
      }"
    />
    <!-- TOC items -->
    <a v-for="id in headings" :key="id" :href="`#${id}`">{{ id }}</a>
  </div>
</template>
```

--------------------------------

### Run Vitest Tests

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Commands to execute tests using pnpm. Includes options for running tests once or in watch mode for continuous testing during development.

```bash
# Run tests
pnpm test

# Run tests in watch mode
pnpm test --watch
```

--------------------------------

### useAnchorObserver Composable Usage (Vue)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Demonstrates how to use the `useAnchorObserver` composable within a Vue component to highlight navigation links based on the currently visible section. It takes an array of heading IDs and returns a ref with the active IDs.

```vue
<script setup lang="ts">
const headings = ['section-1', 'section-2', 'section-3']
const active = useAnchorObserver(headings, false)

// Highlight active items in navigation
</script>

<template>
  <nav>
    <a
      v-for="id in headings"
      :key="id"
      :href="`#${id}`"
      :class="{ 'text-blue-600': active.includes(id) }"
    >
      {{ id }}
    </a>
  </nav>
</template>
```

--------------------------------

### UnoCSS Configuration for Atomic Styling

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Defines the configuration for UnoCSS, an atomic CSS engine, including presets like `presetWind4`, `presetAttributify`, `presetIcons`, and `presetWebFonts`. It also showcases custom shortcuts for common styling patterns.

```typescript
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetWebFonts,
  presetWind4,
} from 'unocss'

export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
    presetWind4(),
    presetAttributify(),
    presetIcons({ scale: 1.2, warn: true }),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
})
```

--------------------------------

### Vue Component Usage with Auto Imports and UnoCSS

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Illustrates a Vue 3 component template that leverages auto-imported directives and functions, as well as UnoCSS for styling. It demonstrates the conciseness achieved by eliminating explicit imports and using atomic CSS classes and shortcuts.

```vue
<script setup lang="ts">
const count = ref(0)
const doubled = computed(() => count.value * 2)

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <MyButton>Click me</MyButton>
  <UserCard :user="currentUser" />

  <button class="btn">Submit</button>
  <span class="icon-btn i-carbon-sun" />

  <div class="flex items-center gap-4 p-4 bg-gray-100 rounded-lg">
    <span class="text-2xl font-bold text-teal-600">Hello</span>
  </div>

  <div flex="~ col" p="4" bg="gray-100">
    Content
  </div>
</template>
```

--------------------------------

### Vite Path Aliasing Configuration (TypeScript)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Configures Vite to resolve the `~/` path alias to the `src/` directory. This simplifies import paths in the project, making them more readable and less dependent on relative directory structures.

```typescript
// vite.config.ts
import path from 'node:path'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
})
```

--------------------------------

### Component Auto Import Configuration in Vue.js

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Sets up automatic importing for Vue components located in the `src/components/` directory using `unplugin-vue-components`. This allows components to be used directly in templates without requiring explicit import statements.

```typescript
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dts: true,
    }),
  ],
})
```

--------------------------------

### Vue Macros Vite Configuration (TypeScript)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Configures Vite to use the `unplugin-vue-macros` plugin, enabling enhanced Vue syntax features like props destructuring and `defineModel`. This configuration integrates Vue Macros with the standard Vue plugin.

```typescript
// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'

export default defineConfig({
  plugins: [
    VueMacros({
      defineOptions: false,
      defineModels: false,
      plugins: {
        vue: Vue({
          script: {
            propsDestructure: true,  // Destructure props reactively
            defineModel: true,       // Two-way binding macro
          },
        }),
      },
    }),
  ],
})
```

--------------------------------

### TOC Component Usage (Vue)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Renders a Table of Contents list and corresponding content sections. It utilizes the `TTocItem` type and dynamically creates headings with anchor links. The component expects a `toc-list` prop to display the navigation.

```vue
<script setup lang="ts">
import type { TTocItem } from './TOC.vue'
import Toc from './TOC.vue'

const tocList: TTocItem[] = [
  { title: 'Introduction', link: '#intro', depth: 1 },
  { title: 'Getting Started', link: '#getting-started', depth: 1 },
  { title: 'Installation', link: '#installation', depth: 2 },
  { title: 'Configuration', link: '#configuration', depth: 2 },
  { title: 'Advanced Usage', link: '#advanced', depth: 1 },
  { title: 'Custom Plugins', link: '#plugins', depth: 2 },
]
</script>

<template>
  <div class="flex">
    <Toc :toc-list="tocList" class="h-screen w-60 top-0 sticky overflow-y-auto" />
    <main class="flex-1 p-4">
      <section v-for="item in tocList" :key="item.link">
        <h1 :id="item.link.slice(1)" :style="{ 'scroll-margin-top': '80px' }">
          {{ item.title }}
        </h1>
        <p>Section content...</p>
      </section>
    </main>
  </div>
</template>
```

--------------------------------

### Auto Import Configuration for Vue.js

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Configures automatic imports for Vue Composition API, VueUse utilities, and Vue Router using `unplugin-auto-import`. This eliminates the need for explicit import statements in Vue components, reducing boilerplate code.

```typescript
import AutoImport from 'unplugin-auto-import/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        '@vueuse/core',
        VueRouterAutoImports,
        {
          'vue-router/auto': ['useLink'],
        },
      ],
      dts: true,
      dirs: ['./src/composables'],
      vueTemplate: true,
    }),
  ],
})
```

--------------------------------

### useAnchorObserver Composable (TypeScript)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

A composable function that utilizes IntersectionObserver to track which heading IDs are currently visible in the viewport. It can optionally track only a single active item. The function returns a ref containing an array of active heading IDs.

```typescript
// useAnchorObserver.ts
export function useAnchorObserver(
  watch: string[],      // Array of heading IDs to observe
  single: boolean = false  // If true, only track one active item
): Ref<string[]>

// Usage
const headingIds = ['intro', 'getting-started', 'installation']
const activeAnchors = useAnchorObserver(headingIds, false)
// Returns: ref(['getting-started', 'installation']) - all visible headings

const singleActive = useAnchorObserver(headingIds, true)
// Returns: ref(['getting-started']) - only first visible heading
```

--------------------------------

### useTocThumb Composable (TypeScript)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Calculates the position and height for a visual indicator (thumb) that follows the active TOC item. It takes a ref to the TOC container element and the active anchor IDs. The composable returns a ref containing a tuple of [top, height] for the indicator.

```typescript
// useTocThumb.ts
export type TOCThumb = [top: number, height: number]

export function useTocThumb(
  containerRef: Ref<HTMLElement | null>,  // TOC container element
  active: Ref<string[]>                   // Active anchor IDs
): Ref<TOCThumb>

// Returns: ref([top, height]) - position for the visual indicator
```

--------------------------------

### Theme Toggling Script (JavaScript)

Source: https://github.com/saltand/clerk-toc-vue/blob/main/index.html

This script checks for user color scheme preferences (both system-level and local storage) and applies a 'dark' class to the document element if a dark theme is preferred. It ensures the application respects user's visual settings.

```javascript
(function () {
  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  const setting = localStorage.getItem('color-schema') || 'auto';
  if (setting === 'dark' || (prefersDark && setting !== 'light')) {
    document.documentElement.classList.toggle('dark', true);
  }
})();
```

--------------------------------

### TOC Component Type Definition (TypeScript)

Source: https://context7.com/saltand/clerk-toc-vue/llms.txt

Defines the structure for individual Table of Contents items, including display text, anchor link, and heading depth. This type is used to structure the data passed to the TOC component.

```typescript
// TTocItem type definition
export interface TTocItem {
  title: string   // Display text
  link: string    // Anchor link (e.g., '#section-1')
  depth: number   // Heading level (1, 2, 3...)
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.