Code Snippet

0.8.11
Source

Usage

<template>
  <UiButton variant="ghost" size="icon" @click="toggleDark">
    <Icon name="lucide:sun" class="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" size="18" />
    <Icon name="lucide:moon" class="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" size="18" />
    <span class="sr-only">Toggle theme</span>
  </UiButton>
</template>

<script setup lang="ts">
const colorMode = useColorMode();
function toggleDark() {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
}
</script>

::code-snippet
---
file: /components/DarkModeToggle.vue
language: vue
---
::

Highlighting Lines

useBreadcrumb
interface BreadcrumbItem {
  title: string;
  href: string;
}

export function useBreadcrumb(url: string): BreadcrumbItem[] {
  const { navigation } = useContent();

  const breadcrumbItems: BreadcrumbItem[] = [];
  // Remove empty segments
  const segments = url.split('/').filter(segment => segment !== '');

  // Construct breadcrumb for each segment
  let href = '';
  let nav = navigation.value;

  if (!nav)
    return [];

  for (let i = 0; i < segments.length; i++) {
    const segment = segments[i].replace('.html', '');
    href += `/${segment}`;
    const page = nav?.find(x => (x._path as string) === href);
    nav = page?.children;
    breadcrumbItems.push({ title: page?.title ?? segment, href });
  }
  return breadcrumbItems;
}

::code-snippet
---
file: /composables/useBreadcrumb.ts
language: ts
title: useBreadcrumb
highlights: 9-11
meta: line-numbers height=300
---
::

Translates to:

````ts [useBreadcrumb] {9-11} line-numbers height=300
// code imported from /composables/useBreadcrumb.ts
````

Using Offset Props

export function useBreadcrumb(url: string): BreadcrumbItem[] {
  const { navigation } = useContent();

  const breadcrumbItems: BreadcrumbItem[] = [];

::code-snippet
---
file: /composables/useBreadcrumb.ts
language: ts
start: 6
offset: 4
---
::

Fetching From a Remote URL

<template>
  <div
    class="px-4 py-6 md:px-8"
    :class="[config.main.padded && 'container']"
  >
    <ContentRenderer
      :key="page._id"
      :value="page"
      :data="(appConfig.shadcnDocs as any)?.data"
    />
  </div>
</template>

<script setup lang="ts">
const { page } = useContent();
const config = useConfig();
const appConfig = useAppConfig();

useSeoMeta({
  title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
  ogTitle: page.value?.title,
  description: page.value?.description,
  ogDescription: page.value?.description,
  ogImage: config.value.site.ogImage,
  twitterCard: 'summary_large_image',
});
</script>

::code-snippet
---
url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
language: vue
---
::

Props

filestring
The path to the imported file
urlstring
A remote URL to fetch the code from
titlestring
Code block title
languagestring
Code block highlight language
highlightsstring
Code block highlights lines
metastring
Code block meta
startnumber
Starting line index
offsetnumber
Number of lines to display from start
Edit this page
Code Group
Field