### Install and Configure Vite Plugin

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Basic Vite plugin setup for @uni-helper/vite-plugin-uni-layouts. Ensure this plugin is listed before the uni-app plugin in your vite.config.ts for correct transformation order. It takes configuration options for the default layout name, directory, and project root.

```typescript
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'

export default defineConfig({
  plugins: [
    UniLayouts({
      layout: 'default',        // default layout name
      layoutDir: 'src/layouts', // directory containing layouts
      cwd: process.cwd()        // project root directory
    }),
    uni()
  ],
})
```

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

### Create a Layout Component

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Example of creating a layout component in Vue Single File Component (SFC) format. Layout components use slots to render page content, with the default slot accepting the main page content. This example includes basic structure for header, content, and footer.

```vue
<!-- src/layouts/default.vue -->
<template>
  <view class="layout-default">
    <view class="header">
      <text>Application Header</text>
    </view>

    <view class="content">
      <slot>main</slot>
    </view>

    <view class="footer">
      <text>Application Footer</text>
    </view>
  </view>
</template>

<script setup>
// Layout-specific logic
</script>

<style scoped>
.layout-default {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
</style>
```

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

### Pages Configuration with Layouts

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

This `pages.json` example illustrates how to assign layouts to specific pages. Setting `layout` to a string assigns a layout by name, while `layout: false` disables layout usage for a page.

```json
// pages.json
{
  "pages": [
    {
      "path": "pages/home/home",
      "layout": "default"
    },
    {
      "path": "pages/dashboard/dashboard",
      "layout": false
    }
  ]
}
```

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

### Default Layout Component

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

An example of a default layout component using Vue. This component includes a header and a slot for page content. It's defined in `src/layouts/default.vue`.

```vue
<!-- src/layouts/default.vue -->
<template>
  <view class="default-layout">
    <view class="header">
      <text>App Header</text>
    </view>
    <slot />
  </view>
</template>
```

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

### Dynamic Layout Usage in a Page

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

This Vue component example shows how to use the `<uni-layout>` component within a page to dynamically apply a layout named 'dashboard'. It also demonstrates how to use slots provided by the layout.

```vue
<!-- pages/dashboard/dashboard.vue -->
<template>
  <uni-layout name="dashboard">
    <template #sidebar>
      <view>Nav Items</view>
    </template>
    <view>Dashboard Content</view>
  </uni-layout>
</template>
```

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

### Dynamic Layout Selection with uni-layout Component

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Utilizing the `<uni-layout>` component for dynamic layout selection at runtime, particularly when layouts are disabled in pages.json. This example shows reactive binding of the layout name and the use of named slots for custom header and footer content.

```vue
<!-- pages/dashboard/dashboard.vue -->
<template>
  <uni-layout :name="currentLayout" ref="uniLayout">
    <template #header>
      <view class="custom-header">
        <text>Dashboard Header</text>
        <button @click="toggleLayout">Switch Layout</button>
      </view>
    </template>

    <view class="page-content">
      <text>Main dashboard content</text>
      <view v-for="item in items" :key="item.id">
        {{ item.name }}
      </view>
    </view>

    <template #footer>
      <view class="custom-footer">
        <text>Dashboard Footer</text>
      </view>
    </template>
  </uni-layout>
</template>

<script setup>
import { ref } from 'vue'

const currentLayout = ref('default')
const uniLayout = ref()
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
])

function toggleLayout() {
  currentLayout.value = currentLayout.value === 'default' ? 'sidebar' : 'default'
}

// Access layout component instance
onMounted(() => {
  console.log(uniLayout.value)
})
</script>
```

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

### Dashboard Layout Component

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

An example of a dashboard layout component using Vue. This layout includes named slots for a sidebar and the main content. It's defined in `src/layouts/dashboard.vue`.

```vue
<!-- src/layouts/dashboard.vue -->
<template>
  <view class="dashboard-layout">
    <view class="sidebar">
      <slot name="sidebar" />
    </view>
    <view class="content">
      <slot />
    </view>
  </view>
</template>
```

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

### Load Pages JSON Function

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Parses the pages.json configuration file, including any subpackages. It returns a flattened array of page objects, each potentially including its assigned layout.

```typescript
import { loadPagesJson } from '@uni-helper/vite-plugin-uni-layouts/dist/utils'

const pages = loadPagesJson('src/pages.json', process.cwd())

// Returns:
// [
//   {
//     path: 'pages/index/index',
//     layout: 'default',
//     style: { navigationBarTitleText: 'Home' }
//   },
//   {
//     path: 'subpkg/pages/detail/detail',
//     layout: 'sidebar'
//   },
//   {
//     path: 'pages/login/login',
//     layout: false
//   }
// ]
```

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

### Virtual Module Generation and Registration

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

This code demonstrates how to import and use the virtual module generated by vite-plugin-uni-layouts in your main entry point (e.g., main.ts). It shows the usage of `app.use(layouts)` for global registration of layout components.

```typescript
// Import in main.ts
import { createSSRApp } from 'vue'
import layouts from 'virtual:uni-layouts'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)

  // Automatically registers all layout components globally
  app.use(layouts)

  return {
    app
  }
}

// The virtual module exports:
// {
//   layouts: {
//     Layout_Default_Uni: DefineComponent,
//     Layout_Sidebar_Uni: DefineComponent
//   },
//   install(app) {
//     app.component('layout-default-uni', Layout_Default_Uni)
//     app.component('layout-sidebar-uni', Layout_Sidebar_Uni)
//   }
// }
```

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

### Vite Configuration for Uni Layouts

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

This configuration snippet shows how to integrate vite-plugin-uni-layouts into your Vite project. It specifies the default layout, the directory for layout components, and the current working directory.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'

export default defineConfig({
  plugins: [
    UniLayouts({
      layout: 'default',
      layoutDir: 'src/layouts',
      cwd: process.cwd()
    }),
    uni()
  ]
})
```

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

### Assign Layouts Statically in pages.json

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Configuration in pages.json to statically assign layouts to pages. The 'layout' property in each page object specifies which layout component to use. Setting 'layout' to 'false' disables layout for that specific page. This also demonstrates layout assignment within subPackages.

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "layout": "default",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/profile/profile",
      "layout": "sidebar",
      "style": {
        "navigationBarTitleText": "Profile"
      }
    },
    {
      "path": "pages/login/login",
      "layout": false,
      "style": {
        "navigationBarTitleText": "Login"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subpkg",
      "pages": [
        {
          "path": "pages/detail/detail",
          "layout": "default"
        }
      ]
    }
  ]
}
```

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

### VitePluginUniLayouts Factory Function

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Creates a Vite plugin instance for handling UniApp layouts. It takes user options to configure layout directory and other settings, integrating into the Vite build process via hooks.

```typescript
import { VitePluginUniLayouts } from '@uni-helper/vite-plugin-uni-layouts'
import type { UserOptions } from '@uni-helper/vite-plugin-uni-layouts'

const options: UserOptions = {
  layout: 'main',
  layoutDir: 'src/app-layouts',
  cwd: process.cwd()
}

const plugin = VitePluginUniLayouts(options)

// Plugin interface:
// {
//   name: 'vite-plugin-uni-layouts',
//   enforce: 'pre',
//   configResolved(config) { ... },
//   configureServer(server) { ... },
//   resolveId(id) { ... },
//   load(id) { ... },
//   transform(code, id) { ... }
// }
```

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

### Context Transform Method for Page Components

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

The core transformation logic within the plugin that wraps page components with their assigned layout. It parses the Vue SFC and injects the layout component tag around the page's template content.

```typescript
import { Context } from '@uni-helper/vite-plugin-uni-layouts/dist/context'
import type { ResolvedOptions } from '@uni-helper/vite-plugin-uni-layouts'

const options: ResolvedOptions = {
  layout: 'default',
  layoutDir: 'src/layouts',
  cwd: process.cwd()
}

const ctx = new Context(options)
ctx.pageJsonPath = 'src/pages.json'

// Transform a page component
const code = `
<template>
  <view>Page content</view>
</template>
<script setup>
// page logic
</script>
`

const result = await ctx.transform(code, '/path/to/pages/index/index.vue')

// Result:
// {
//   code: `
//     <template>
//     <layout-default-uni>
//       <view>Page content</view>
//     </layout-default-uni>
//     </template>
//     <script setup>
//     // page logic
//     </script>
//   `,
//   map: SourceMap
// }
```

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

### Scan Layouts Function

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Scans a specified directory for Vue layout components. It generates metadata for each layout, including its name in different casing formats, to aid in automatic registration.

```typescript
import { scanLayouts } from '@uni-helper/vite-plugin-uni-layouts/dist/scan'

const layouts = scanLayouts('src/layouts', process.cwd())

// Returns array of Layout objects:
// [
//   {
//     name: 'default',
//     path: '/absolute/path/to/src/layouts/default.vue',
//     pascalName: 'Default',
//     kebabName: 'default'
//   },
//   {
//     name: 'sidebarLayout',
//     path: '/absolute/path/to/src/layouts/sidebar-layout.vue',
//     pascalName: 'SidebarLayout',
//     kebabName: 'sidebar-layout'
//   }
// ]
```

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

### Configure Viewport Meta Tag with CSS Support Check (JavaScript)

Source: https://github.com/uni-helper/vite-plugin-uni-layouts/blob/main/playground/index.html

This JavaScript code checks if the browser supports CSS environment variables using `CSS.supports()`. If supported, it dynamically adds `viewport-fit=cover` to the viewport meta tag for better handling of screen notches and cutouts on mobile devices. Otherwise, it generates a standard viewport meta tag.

```javascript
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
```

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

### Vue Layout with Named Slots

Source: https://context7.com/uni-helper/vite-plugin-uni-layouts/llms.txt

Defines a Vue component template for a layout that uses named slots ('sidebar', 'header', 'footer') and a default slot for content. This allows for flexible page structures with reusable components.

```vue
<template>
  <view class="layout-sidebar">
    <view class="sidebar">
      <slot name="sidebar">
        <text>Default Sidebar</text>
      </slot>
    </view>

    <view class="main-area">
      <view class="header">
        <slot name="header">
          <text>Default Header</text>
        </slot>
      </view>

      <view class="content">
        <slot>Main content</slot>
      </view>

      <view class="footer">
        <slot name="footer">
          <text>Default Footer</text>
        </slot>
      </view>
    </view>
  </view>
</template>

<style scoped>
.layout-sidebar {
  display: flex;
}
.sidebar {
  width: 200px;
}
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
```

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