### Element Plus Component Usage Example (Vue)

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Illustrates the usage of various Element Plus components including buttons, tags, switches, input fields, and date pickers. It demonstrates state management with Vue's `ref` and event handling for component interactions. Dependencies include 'element-plus' and 'vue'.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const count = ref(0)
const input = ref('element-plus')
const curDate = ref('')
const switchValue = ref(true)

function handleClick() {
  ElMessage.success('Button clicked!')
}
</script>

<template>
  <div>
    <!-- Buttons with different types -->
    <el-button @click="count++">Default: {{ count }}</el-button>
    <el-button type="primary" @click="count++">Primary: {{ count }}</el-button>
    <el-button type="success" @click="count++">Success: {{ count }}</el-button>
    <el-button type="warning" @click="count++">Warning: {{ count }}</el-button>
    <el-button type="danger" @click="count++">Danger: {{ count }}</el-button>
    <el-button type="info" @click="count++">Info: {{ count }}</el-button>

    <!-- Tags -->
    <el-tag type="success" class="m-1">Success Tag</el-tag>
    <el-tag type="warning" class="m-1">Warning Tag</el-tag>
    <el-tag type="danger" class="m-1">Danger Tag</el-tag>
    <el-tag type="info" class="m-1">Info Tag</el-tag>

    <!-- Switch with custom colors -->
    <el-switch v-model="switchValue" />
    <el-switch
      v-model="switchValue"
      style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
    />

    <!-- Input and Date Picker -->
    <el-input v-model="input" style="width: 200px" placeholder="Enter text" />
    <el-date-picker
      v-model="curDate"
      type="date"
      placeholder="Pick a day"
    />
  </div>
</template>
```

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

### ViteSSG Application Setup with Vue Router

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Sets up a server-side generated Vue application using ViteSSG. It integrates Vue Router for file-based routing and includes global SCSS styles and Element Plus message box styles.

```typescript
// src/main.ts
import type { UserModule } from './types'
import { ViteSSG } from 'vite-ssg'
import { routes } from 'vue-router/auto-routes'
import App from './App.vue'
import '~/styles/index.scss'
import 'uno.css'
import 'element-plus/theme-chalk/src/message.scss'
import 'element-plus/theme-chalk/src/message-box.scss'

export const createApp = ViteSSG(
  App,
  {
    routes,
    base: import.meta.env.BASE_URL,
  },
  (ctx) => {
    Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
      .forEach(i => i.install?.(ctx))
  },
)
```

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

### ElMessage Notification Component Usage

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Demonstrates how to use the Element Plus `ElMessage` component to display toast notifications. It shows examples for success and error messages with customizable content and duration.

```typescript
// Usage in Vue component
import { ElMessage } from 'element-plus'

function showNotification() {
  ElMessage.success('Operation completed successfully')
}

function showError() {
  ElMessage({
    type: 'error',
    message: 'Something went wrong',
    duration: 3000,
  })
}
```

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

### UnoCSS Configuration for Atomic CSS

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Sets up UnoCSS, an atomic CSS engine, with various presets including Uno, Attributify, Icons, Typography, and Web Fonts. It defines custom shortcuts for common utility classes and uses transformers for directives and variant groups. Safelist includes basic prose classes.

```typescript
// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({ scale: 1.2 }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  safelist: 'prose prose-sm m-auto text-left'.split(' '),
})

// Usage in templates:
// <div class="flex items-center justify-center gap-2">
// <button class="btn">Click me</button>
// <div class="icon-btn" i-ep-sunny />
// 
```

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

### ElMessageBox Dialogs and Confirmations (Vue)

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Demonstrates how to use ElMessageBox to create alert dialogs and confirmation prompts. It utilizes a callback pattern for alerts and async/await for confirmations, handling user actions with ElMessage. Dependencies include 'element-plus' for UI components and 'vue' for reactivity.

```vue
<script lang="ts" setup>
import type { Action } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

function openDialog() {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}

async function openConfirm() {
  try {
    await ElMessageBox.confirm(
      'This will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
    )
    ElMessage.success('Delete completed')
  } catch {
    ElMessage.info('Delete canceled')
  }
}
</script>

<template>
  <el-button plain @click="openDialog">
    Open Dialog
  </el-button>
</template>
```

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

### Vue App Layout Structure with Element Plus

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Defines the root application layout using Element Plus's ConfigProvider for global configuration and custom namespace. It integrates a header and a sidebar navigation, with the main content area rendering the current route view via RouterView.

```vue
<script setup lang="ts">
</script>

<template>
  <el-config-provider namespace="ep">
    <BaseHeader />
    <div class="main-container flex">
      <BaseSide />
      <div w="full" py="4">
        <RouterView />
      </div>
    </div>
  </el-config-provider>
</template>

<style>
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

.main-container {
  height: calc(100vh - var(--ep-menu-item-height) - 4px);
}
</style>
```

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

### Vite Auto-Import Configuration for Vue and Element Plus

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Configures Vite to automatically import Vue and Element Plus components on demand using `unplugin-vue-components`. It also sets up file-based routing with `unplugin-vue-router` and UnoCSS for atomic CSS.

```typescript
// vite.config.ts
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
        api: 'modern-compiler',
      },
    },
  },
  plugins: [
    Vue(),
    VueRouter({
      extensions: ['.vue', '.md'],
      dts: 'src/typed-router.d.ts',
    }),
    Components({
      extensions: ['vue', 'md'],
      include: [/.vue$/, /.vue\?vue/, /.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
    Unocss(),
  ],
  ssr: {
    noExternal: ['element-plus'],
  },
})
```

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

### Custom Element Plus Theme Configuration (SCSS)

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Customizes Element Plus component styling using SCSS variables. It overrides default color palettes and button padding by forwarding Element Plus theme configuration files with custom values.

```scss
/* src/styles/element/index.scss */
$--colors: (
  'primary': (
    'base': green,
  ),
  'success': (
    'base': #21ba45,
  ),
  'warning': (
    'base': #f2711c,
  ),
  'danger': (
    'base': #db2828,
  ),
  'error': (
    'base': #db2828,
  ),
  'info': (
    'base': #42b8dd,
  ),
);

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $--colors,
  $button-padding-horizontal: ('default': 50px)
);

@use './dark.scss';
```

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

### Horizontal Navigation Menu with Router Integration (Vue)

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Implements a responsive horizontal navigation menu using Element Plus components. Features include router integration for navigation, submenus, disabled items, a dark mode toggle, and links to external repositories. Styling is handled via SCSS. Dependencies include 'element-plus', 'vue', and potentially a global composable for dark mode toggling.

```vue
<script lang="ts" setup>
import { repository } from '~/../package.json'
import { toggleDark } from '~/composables'
</script>

<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
    <el-menu-item index="/">
      <div class="flex items-center justify-center gap-2">
        <div class="text-xl" i-ep-element-plus />
        <span>Element Plus</span>
      </div>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">nested item</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <el-menu-item index="3" disabled>Info</el-menu-item>

    <el-menu-item h="full" @click="toggleDark()">
      <button class="cursor-pointer border-none bg-transparent">
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>

    <el-menu-item h="full">
      <a :href="repository.url" target="_blank">
        <div i-ri-github-fill />
      </a>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss">
.el-menu-demo {
  &.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
    margin-right: auto;
  }
}
</style>
```

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

### Dark Mode Toggle Composable with VueUse

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Provides reactive dark mode state management using VueUse. It exports `isDark` for checking the current theme and `toggleDark` for switching between light and dark modes.

```typescript
// src/composables/dark.ts
import { useDark, useToggle } from '@vueuse/core'

export const isDark = useDark()
export const toggleDark = useToggle(isDark)

// Usage in component:
// <script setup>
// import { toggleDark, isDark } from '~/composables'
// </script>
// <button @click="toggleDark()">
//   <i :class="isDark ? 'i-ep-moon' : 'i-ep-sunny'" />
// </button>
```

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

### Vue Vertical Sidebar Navigation with Element Plus

Source: https://context7.com/element-plus/element-plus-vite-starter/llms.txt

Implements a vertical sidebar navigation menu using Element Plus components. It supports nested menus, icons, and integrates with Vue Router for file-based routing. The menu includes handlers for opening and closing submenus.

```vue
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

function handleOpen(key: string, keyPath: string[]) {
  console.log('Menu opened:', key, keyPath)
}

function handleClose(key: string, keyPath: string[]) {
  console.log('Menu closed:', key, keyPath)
}
</script>

<template>
  <el-menu
    router
    default-active="1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="/nav/1/item-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <el-menu-item index="/nav/2">
      <el-icon><IconMenu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>

    <el-menu-item index="3" disabled>
      <el-icon><Document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>

    <el-menu-item index="/nav/4">
      <el-icon><Setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
</template>
```

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