### Install vfit-react

Source: https://github.com/v-plugin/vfit/blob/main/vfit-react/README.md

Install the package via npm.

```bash
npm install vfit-react
```

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

### Install vfit package

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/getting-started.md

Use npm to add the vfit dependency to your project.

```bash
npm i vfit
```

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

### FitContainer Centered with Percentage Units

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/fitcontainer.md

This example demonstrates centering content using percentage-based positioning. When 'unit="%"' is used, the position remains fixed relative to the container, and only the content scales proportionally with the global scale.

```vue
<FitContainer :top="50" :left="50" unit="%">
  <div class="card">Content</div>
</FitContainer>
```

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

### Centering Element with Percentage Offsets

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/positions.md

This example demonstrates how to center an element using percentage-based offsets for `top` and `left`. The `transform: translate(-50%, -50%)` on the inner div is crucial for true centering when using percentage-based positioning.

```vue
<FitContainer :top="50" :left="50" unit="%">
  <div class="card" style="transform: translate(-50%, -50%);">Center</div>
</FitContainer>
```

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

### Get Current Scale Value with useFitScale

Source: https://context7.com/v-plugin/vfit/llms.txt

Use the `useFitScale` composable within your Vue components to access the globally calculated scale value. This allows for dynamic styling or conditional rendering based on the current scale.

```APIDOC
## useFitScale - Get Current Scale Value

The `useFitScale` composable returns a reactive reference to the current scale value, allowing components to access the global scale for custom calculations or conditional rendering based on the current scale level.

```vue
<script setup lang="ts">
import { useFitScale } from 'vfit'
import { computed } from 'vue'

// Get the reactive scale value
const scale = useFitScale()

// Use scale for custom calculations
const dynamicFontSize = computed(() => `${16 * scale.value}px`)
const showDetailedView = computed(() => scale.value > 0.8)

// Access in template or watchers
console.log('Current scale:', scale.value) // e.g., 0.75 on smaller screens
</script>

<template>
  <div :style="{ fontSize: dynamicFontSize }">
    <p>Current scale: {{ scale.toFixed(2) }}</p>
    <DetailedChart v-if="showDetailedView" />
    <SimpleChart v-else />
  </div>
</template>
```
```

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

### createFitScale(options)

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/api.md

Initializes the global scale configuration and injects it into the application.

```APIDOC
## createFitScale(options)

### Description
Initializes the plugin and injects the global scale into the application via provide. 

### Parameters
#### Request Body
- **target** (string | HTMLElement) - Optional - The target element to scale (default: #app)
- **designHeight** (number) - Optional - The design height (default: 1080)
- **designWidth** (number) - Optional - The design width (default: 1920)
- **scaleMode** ('height' | 'width' | 'auto') - Optional - The scaling strategy (default: auto)

### Response
- **plugin object** (Object) - Returns the plugin instance.
```

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

### createFitScale(options)

Source: https://github.com/v-plugin/vfit/blob/main/docs/guide/api.md

Initializes the vfit plugin to handle global screen scaling.

```APIDOC
## createFitScale(options)

### Description
Initializes the plugin and injects global scaling into the Vue app.

### Parameters
#### Request Body
- **target** (string | HTMLElement) - Optional - The target element to scale, defaults to #app.
- **designHeight** (number) - Optional - The design height, defaults to 1080.
- **designWidth** (number) - Optional - The design width, defaults to 1920.
- **scaleMode** ('height' | 'width' | 'auto') - Optional - The scaling strategy, defaults to auto.
```

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

### Initialize vfit plugin

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/getting-started.md

Register the plugin in your main entry file with design dimensions and scaling configuration.

```ts
// main.ts
import { createFitScale } from 'vfit'
import 'vfit/style.css'

app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920, scaleMode: 'auto' }))
```

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

### Configure FitScaleProvider

Source: https://github.com/v-plugin/vfit/blob/main/vfit-react/README.md

Wrap the application with FitScaleProvider to enable global scaling based on design dimensions.

```tsx
// App.tsx
import React from 'react'
import { FitScaleProvider } from 'vfit-react'

const App = () => {
  return (
    <FitScaleProvider options={{ designHeight: 1080, designWidth: 1920, scaleMode: 'auto' }}>
      <MyDashboard />
    </FitScaleProvider>
  )
}

export default App
```

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

### Build custom components with useFitPosition

Source: https://context7.com/v-plugin/vfit/llms.txt

The useFitPosition composable generates reactive style objects for custom positioning logic.

```vue
<script setup lang="ts">
import { useFitPosition } from 'vfit'

const props = defineProps({
  scale: { type: Number, default: 0 },
  top: { type: Number },
  left: { type: Number },
  unit: { type: String, default: 'px' },
  z: { type: Number, default: 300 }
})

// Basic usage - returns position object and origin
const { position, origin } = useFitPosition(props)

// Advanced usage with custom options
const { position: customPosition, origin: customOrigin } = useFitPosition(props, {
  origin: '50% 50%',           // Force specific transform origin
  scaleKeys: ['top', 'left'],  // Which position keys scale with the ratio
  extraTransform: 'translate(-50%, -50%)'  // Additional CSS transform
})
</script>

<template>
  <!-- Use computed position values in your custom component -->
  <div
    class="custom-container"
    :style="{
      transform: position.scale,
      transformOrigin: origin,
      top: position.top,
      left: position.left,
      zIndex: props.z
    }"
  >
    <slot />
  </div>
</template>

<style scoped>
.custom-container {
  position: absolute;
  will-change: transform;
  backface-visibility: hidden;
}
</style>
```

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

### Implement VFit in React

Source: https://context7.com/v-plugin/vfit/llms.txt

Wrap the application with FitScaleProvider to initialize scaling and use FitContainer for absolute positioning within the scaled environment.

```tsx
// App.tsx
import React from 'react'
import { FitScaleProvider, FitContainer, useFitScale } from 'vfit-react'

// Wrap your app with the provider
function App() {
  return (
    <FitScaleProvider options={{
      target: '#root',
      designWidth: 1920,
      designHeight: 1080,
      scaleMode: 'auto'
    }}>
      <Dashboard />
    </FitScaleProvider>
  )
}

// Use FitContainer for positioning
function Dashboard() {
  const scale = useFitScale() // Access current scale value

  return (
    <div style={{ position: 'relative', width: '100%', height: '100vh' }}>
      {/* Top-left logo */}
      <FitContainer top={20} left={20}>
        <img src="/logo.svg" alt="Logo" width={200} height={60} />
      </FitContainer>

      {/* Top-right time */}
      <FitContainer top={20} right={20}>
        <TimeWidget />
      </FitContainer>

      {/* Centered main content */}
      <FitContainer top={50} left={50} unit="%">
        <div style={{ transform: 'translate(-50%, -50%)' }}>
          <MainChart />
        </div>
      </FitContainer>

      {/* Bottom-right controls with custom scale */}
      <FitContainer bottom={20} right={20} scale={0.8} z={500}>
        <ControlPanel />
      </FitContainer>

      {/* Custom styling */}
      <FitContainer
        top={100}
        left={100}
        className="custom-container"
        style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
      >
        <DataPanel />
      </FitContainer>
    </div>
  )
}

export default App
```

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

### useFitScale()

Source: https://github.com/v-plugin/vfit/blob/main/docs/guide/api.md

Hook to retrieve the current scaling factor within components.

```APIDOC
## useFitScale()

### Description
Returns a Ref<number> representing the current scaling value calculated by the plugin.
```

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

### Plugin Initialization with createFitScale

Source: https://context7.com/v-plugin/vfit/llms.txt

Initialize the VFit plugin in your Vue application. You can use default options or provide custom configurations for target element, design dimensions, and scale mode.

```APIDOC
## createFitScale - Plugin Initialization

The `createFitScale` function creates a Vue 3 plugin that monitors a target element for size changes and provides a reactive scale value to all child components. It accepts options for target element, design dimensions, and scale mode, and automatically registers all positioning components globally.

```typescript
// main.ts
import { createApp } from 'vue'
import { createFitScale } from 'vfit'
import 'vfit/style.css'
import App from './App.vue'

const app = createApp(App)

// Basic setup with default options (1920x1080 design, auto scale mode)
app.use(createFitScale())

// Custom configuration for a 4K design
app.use(createFitScale({
  target: '#app',           // CSS selector or HTMLElement (default: '#app')
  designWidth: 3840,        // Design width in pixels (default: 1920)
  designHeight: 2160,       // Design height in pixels (default: 1080)
  scaleMode: 'auto'         // 'auto' | 'width' | 'height' (default: 'auto')
}))

// Scale modes explained:
// - 'height': scale = containerHeight / designHeight
// - 'width': scale = containerWidth / designWidth
// - 'auto': maintains aspect ratio, picks width or height based on which fits better

app.mount('#app')
```
```

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

### Create Fit Scale with Auto Mode

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/scale-modes.md

Use createFitScale to apply global scaling. Configure target element, design dimensions, and set scaleMode to 'auto' for automatic width or height scaling to maintain aspect ratio.

```typescript
app.use(createFitScale({
  target: '#app',
  designHeight: 1080,
  designWidth: 1920,
  scaleMode: 'auto'
}))
```

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

### Top Left Layout (Logo, Weather)

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Position content at the top-left corner of the screen.

```vue
<vfit-lt :top="20" :left="20">
  <WeatherWidget />
</vfit-lt>
```

```vue
<FitContainer :top="20" :left="20" unit="px">
  <WeatherWidget />
</FitContainer>
```

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

### Positioning Components

Source: https://github.com/v-plugin/vfit/blob/main/docs/guide/api.md

Specialized components for absolute positioning at screen corners or center.

```APIDOC
## Positioning Components

### Description
Components for corner (<vfit-lt>, <vfit-rt>, <vfit-lb>, <vfit-rb>) and center (<vfit-center>) positioning.

### Parameters
#### Corner Components Attributes
- **top/bottom/left/right** (number) - Optional - Positioning offset.
- **unit** (string) - Optional - Measurement unit.
- **scale** (number) - Optional - Scaling override.
- **z** (number) - Optional - Z-index value.

#### Center Component Attributes
- **scale** (number) - Optional - Scaling override.
- **z** (number) - Optional - Z-index value.
```

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

### Bottom Right Layout (Control Panel)

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Position content at the bottom-right corner of the screen.

```vue
<vfit-rb :bottom="20" :right="20">
  <ControlPanel />
</vfit-rb>
```

```vue
<FitContainer :bottom="20" :right="20" unit="px">
  <ControlPanel />
</FitContainer>
```

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

### Initialize VFit Plugin

Source: https://context7.com/v-plugin/vfit/llms.txt

Register the VFit plugin in your Vue application entry point. You can use default settings or provide custom design dimensions and scale modes.

```typescript
// main.ts
import { createApp } from 'vue'
import { createFitScale } from 'vfit'
import 'vfit/style.css'
import App from './App.vue'

const app = createApp(App)

// Basic setup with default options (1920x1080 design, auto scale mode)
app.use(createFitScale())

// Custom configuration for a 4K design
app.use(createFitScale({
  target: '#app',           // CSS selector or HTMLElement (default: '#app')
  designWidth: 3840,        // Design width in pixels (default: 1920)
  designHeight: 2160,       // Design height in pixels (default: 1080)
  scaleMode: 'auto'         // 'auto' | 'width' | 'height' (default: 'auto')
}))

// Scale modes explained:
// - 'height': scale = containerHeight / designHeight
// - 'width': scale = containerWidth / designWidth
// - 'auto': maintains aspect ratio, picks width or height based on which fits better

app.mount('#app')
```

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

### Bottom Left Layout (Charts, Lists)

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Position content at the bottom-left corner of the screen.

```vue
<vfit-lb :bottom="20" :left="20">
  <DataPanel />
</vfit-lb>
```

```vue
<FitContainer :bottom="20" :left="20" unit="px">
  <DataPanel />
</FitContainer>
```

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

### Screen Center Layout (Main Chart, Map)

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Center content on the screen. The concise component handles centering automatically.

```vue
<vfit-center>
  <MainChart />
</vfit-center>
```

```vue
<FitContainer :top="50" :left="50" unit="%">
  <!-- Manual centering -->
  <div style="transform: translate(-50%, -50%);">
    <MainChart />
  </div>
</FitContainer>
```

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

### FitScaleProvider Component

Source: https://github.com/v-plugin/vfit/blob/main/vfit-react/README.md

The FitScaleProvider component wraps your application to provide global scaling values based on design dimensions.

```APIDOC
## FitScaleProvider Props

### Parameters
#### Request Body
- **options.target** (string | HTMLElement) - Optional - The container to listen for resize events (default: document.body)
- **options.designHeight** (number) - Optional - The design draft height (default: 1080)
- **options.designWidth** (number) - Optional - The design draft width (default: 1920)
- **options.scaleMode** ('height' | 'width' | 'auto') - Optional - The scaling mode (default: 'auto')
```

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

### Positioning Components

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/api.md

Components for absolute positioning relative to the scaled container.

```APIDOC
## Positioning Components

### Description
Components for corner and center positioning: <vfit-lt>, <vfit-rt>, <vfit-lb>, <vfit-rb>, <vfit-center>.

### Parameters
#### Corner Component Props
- **top/bottom/left/right** (number) - Optional - Positioning offsets
- **unit** (string) - Optional - Measurement unit
- **scale** (number) - Optional - Scale override
- **z** (number) - Optional - Z-index

#### Center Component Props
- **scale** (number) - Optional - Scale override
- **z** (number) - Optional - Z-index
```

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

### Top Right Layout (Time, Status)

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Position content at the top-right corner of the screen.

```vue
<vfit-rt :top="20" :right="20">
  <TimeWidget />
</vfit-rt>
```

```vue
<FitContainer :top="20" :right="20" unit="px">
  <TimeWidget />
</FitContainer>
```

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

### useFitScale()

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/api.md

Retrieves the current scale value within a Vue component.

```APIDOC
## useFitScale()

### Description
Returns the current scale value as a reactive reference.

### Response
- **scale** (Ref<number>) - The current scale factor.
```

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

### FitContainer Component

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/api.md

A container component for managing layout and scaling.

```APIDOC
## FitContainer

### Description
Container component for applying specific layout and scaling rules.

### Parameters
#### Props
- **top/bottom/left/right** (number) - Optional - Positioning offsets
- **unit** ('px' | '%') - Optional - Measurement unit (default: px)
- **scale** (number) - Optional - Overrides global scale
- **z** (number) - Optional - Z-index (default: 300)
```

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

### Use vfit-lt positioning component

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/getting-started.md

Implement the vfit-lt component for top-left aligned layout within a relative container.

```vue
<template>
  <div class="viewport">
    <!-- Top-left corner, 90px from top/left -->
    <vfit-lt :top="90" :left="90">
      <div class="box">Content</div>
    </vfit-lt>
  </div>
</template>

<style scoped>
.viewport { position: relative; width: 100%; height: 100vh; }
.box { width: 120px; height: 80px; }
</style>
```

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

### Custom Scale Configuration

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Apply a custom scale factor to a component.

```vue
<!-- Force scale to 0.8 -->
<vfit-lt :top="100" :left="100" :scale="0.8">
  <MiniMap />
</vfit-lt>
```

```vue
<FitContainer :top="100" :left="100" unit="px" :scale="0.8">
  <MiniMap />
</FitContainer>
```

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

### Center content with vfit-center

Source: https://context7.com/v-plugin/vfit/llms.txt

Use vfit-center for automatic horizontal and vertical centering with optional scaling and z-index overrides.

```vue
<template>
  <div class="dashboard">
    <!-- Main chart centered on screen -->
    <vfit-center>
      <div class="main-chart" style="width: 1200px; height: 800px;">
        <LineChart :data="mainData" :options="chartOptions" />
      </div>
    </vfit-center>

    <!-- 3D map container -->
    <vfit-center :z="200">
      <div class="map-container" style="width: 1600px; height: 900px;">
        <ThreeDMap :region="selectedRegion" />
      </div>
    </vfit-center>

    <!-- Centered with custom scale -->
    <vfit-center :scale="1.2">
      <HeroStats :stats="heroStats" />
    </vfit-center>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const mainData = ref([/* time series data */])
const chartOptions = ref({ responsive: false, maintainAspectRatio: true })
const selectedRegion = ref('north-america')
const heroStats = ref({ users: 12500, revenue: 450000, growth: 23.5 })
</script>
```

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

### Use FitContainer for Positioning

Source: https://github.com/v-plugin/vfit/blob/main/vfit-react/README.md

Use FitContainer to position elements with automatic scaling support, choosing between pixel or percentage units.

```tsx
import React from 'react'
import { FitContainer } from 'vfit-react'

const MyDashboard = () => {
  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}>
      {/* 百分比定位 - 保持居中 */}
      <FitContainer top={50} left={50} unit="%">
        <div style={{ transform: 'translate(-50%, -50%)', border: '1px solid red' }}>
          Centered Content
        </div>
      </FitContainer>

      {/* 像素定位 - 随屏幕缩放 */}
      <FitContainer top={100} left={100} unit="px">
        <div style={{ width: 200, height: 100, background: 'lightblue' }}>
          Scaled Box
        </div>
      </FitContainer>
    </div>
  )
}
```

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

### Bottom-Left Positioning with vfit-lb

Source: https://context7.com/v-plugin/vfit/llms.txt

Employ vfit-lb for positioning content from the bottom-left corner, setting the transform origin to 0 100%. Suitable for auxiliary charts, data lists, and supplementary information panels.

```vue
<template>
  <div class="dashboard">
    <!-- Data list panel -->
    <vfit-lb :bottom="20" :left="20">
      <div class="data-panel" style="width: 400px; height: 300px;">
        <h3>Recent Transactions</h3>
        <ul class="transaction-list">
          <li v-for="tx in transactions" :key="tx.id">
            {{ tx.description }} - ${{ tx.amount }}
          </li>
        </ul>
      </div>
    </vfit-lb>

    <!-- Secondary chart -->
    <vfit-lb :bottom="20" :left="440">
      <BarChart
        :data="monthlyData"
        :width="350"
        :height="280"
      />
    </vfit-lb>

    <!-- Legend at percentage position -->
    <vfit-lb :bottom="5" :left="2" unit="%">
      <ChartLegend :items="legendItems" />
    </vfit-lb>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const transactions = ref([
  { id: 1, description: 'Server upgrade', amount: 2500 },
  { id: 2, description: 'Software license', amount: 1200 },
  { id: 3, description: 'Cloud storage', amount: 450 }
])
const monthlyData = ref([/* chart data */])
const legendItems = ref([/* legend items */])
</script>
```

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

### Access Scale with useFitScale Hook

Source: https://github.com/v-plugin/vfit/blob/main/vfit-react/README.md

Retrieve the current raw scaling value directly using the useFitScale hook.

```tsx
import React from 'react'
import { useFitScale } from 'vfit-react'

const ScaleDisplay = () => {
  const scale = useFitScale()
  return <div>Current Scale: {scale}</div>
}
```

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

### Position elements with FitContainer

Source: https://context7.com/v-plugin/vfit/llms.txt

FitContainer allows for precise edge-based positioning using top, bottom, left, and right offsets with configurable units.

```vue
<template>
  <div class="dashboard">
    <!-- Top-left positioning (equivalent to vfit-lt) -->
    <FitContainer :top="20" :left="20" unit="px">
      <Logo />
    </FitContainer>

    <!-- Top-right positioning -->
    <FitContainer :top="20" :right="40" unit="px">
      <TimeDisplay />
    </FitContainer>

    <!-- Bottom-right positioning -->
    <FitContainer :bottom="30" :right="30" unit="px">
      <ControlButtons />
    </FitContainer>

    <!-- Centered using percentage (requires manual transform) -->
    <FitContainer :top="50" :left="50" unit="%">
      <div style="transform: translate(-50%, -50%);">
        <MainChart />
      </div>
    </FitContainer>

    <!-- Custom scale override -->
    <FitContainer :top="100" :left="100" unit="px" :scale="0.75">
      <ThumbnailView />
    </FitContainer>

    <!-- High z-index for overlays -->
    <FitContainer :top="0" :left="0" unit="px" :z="1000">
      <LoadingOverlay v-if="isLoading" />
    </FitContainer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isLoading = ref(false)
</script>

<style scoped>
.dashboard {
  position: relative;
  width: 100%;
  height: 100vh;
}
</style>
```

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

### Custom Positioning Unit

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/recipes.md

Override the default unit (px) with percentage (%) for positioning.

```vue
<!-- Position using 10% distance -->
<vfit-lt :top="10" :left="10" unit="%">
  <Logo />
</vfit-lt>
```

```vue
<FitContainer :top="10" :left="10" unit="%">
  <Logo />
</FitContainer>
```

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

### vfit-lt - Top-Left Positioning Component

Source: https://context7.com/v-plugin/vfit/llms.txt

The `vfit-lt` component is used for positioning elements absolutely from the top-left corner with automatic scaling. It accepts `top`, `left`, `z-index`, and an optional `scale` prop for fine-grained control.

```APIDOC
## vfit-lt - Top-Left Positioning Component

The `vfit-lt` component positions content absolutely from the top-left corner with automatic scaling. It's ideal for logos, weather widgets, and other elements that should anchor to the top-left of the viewport.

```vue
<template>
  <div class="dashboard">
    <!-- Basic usage: 90px from top, 90px from left -->
    <vfit-lt :top="90" :left="90">
      <img src="/logo.svg" alt="Logo" width="200" height="60" />
    </vfit-lt>

    <!-- With custom z-index for layering -->
    <vfit-lt :top="20" :left="20" :z="500">
      <WeatherWidget />
    </vfit-lt>

    <!-- Using percentage positioning -->
    <vfit-lt :top="5" :left="5" unit="%">
      <NotificationBadge />
    </vfit-lt>

    <!-- Override global scale (scale at 80% of normal) -->
    <vfit-lt :top="100" :left="100" :scale="0.8">
      <MiniMap />
    </vfit-lt>
  </div>
</template>

<style scoped>
.dashboard {
  position: relative; /* Required for absolute positioning */
  width: 100%;
  height: 100vh;
  background: #0a1628;
}
</style>
```
```

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

### FitContainer Component

Source: https://github.com/v-plugin/vfit/blob/main/docs/guide/api.md

A container component that applies scaling and positioning logic to its children.

```APIDOC
## FitContainer

### Description
Provides a container with configurable scaling and positioning.

### Parameters
#### Attributes
- **top/bottom/left/right** (number) - Optional - Positioning offset.
- **unit** ('px' | '%') - Optional - Measurement unit, defaults to px.
- **scale** (number) - Optional - Scaling override.
- **z** (number) - Optional - Z-index, defaults to 300.
```

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

### Fixed Offset Positioning with Pixels

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/positions.md

Use this snippet to position an element a fixed distance from the bottom-right corner. The `unit="px"` attribute ensures the offsets are interpreted as pixels.

```vue
<FitContainer :top="80" :right="40" unit="px">
  <Widget />
</FitContainer>
```

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

### Access Scale Value with useFitScale

Source: https://context7.com/v-plugin/vfit/llms.txt

Use the useFitScale composable to retrieve a reactive reference to the current scale, enabling dynamic calculations or conditional rendering.

```vue
<script setup lang="ts">
import { useFitScale } from 'vfit'
import { computed } from 'vue'

// Get the reactive scale value
const scale = useFitScale()

// Use scale for custom calculations
const dynamicFontSize = computed(() => `${16 * scale.value}px`)
const showDetailedView = computed(() => scale.value > 0.8)

// Access in template or watchers
console.log('Current scale:', scale.value) // e.g., 0.75 on smaller screens
</script>

<template>
  <div :style="{ fontSize: dynamicFontSize }">
    <p>Current scale: {{ scale.toFixed(2) }}</p>
    <DetailedChart v-if="showDetailedView" />
    <SimpleChart v-else />
  </div>
</template>
```

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

### Complete Dashboard Layout with vfit Components

Source: https://context7.com/v-plugin/vfit/llms.txt

This Vue.js component utilizes vfit positioning components to arrange elements like headers, charts, sidebars, and action panels within a responsive dashboard. It demonstrates combining multiple positioning strategies for a complex UI.

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useFitScale } from 'vfit'

const scale = useFitScale()
const currentTime = ref(new Date().toLocaleTimeString())
const isLoading = ref(true)

// Sample data
const kpiData = ref([
  { label: 'Revenue', value: '$1.2M', trend: '+12%' },
  { label: 'Users', value: '45,230', trend: '+8%' },
  { label: 'Orders', value: '3,847', trend: '+15%' }
])

onMounted(() => {
  // Update time every second
  setInterval(() => {
    currentTime.value = new Date().toLocaleTimeString()
  }, 1000)

  // Simulate data loading
  setTimeout(() => isLoading.value = false, 1500)
})
</script>

<template>
  <div class="dashboard-viewport">
    <!-- Header: Logo (top-left) -->
    <vfit-lt :top="30" :left="40">
      <div class="logo">
        <img src="/logo.svg" alt="Company Logo" />
        <span>Analytics Dashboard</span>
      </div>
    </vfit-lt>

    <!-- Header: Time & Status (top-right) -->
    <vfit-rt :top="30" :right="40">
      <div class="header-info">
        <span class="time">{{ currentTime }}</span>
        <span class="status online">● Live</span>
      </div>
    </vfit-rt>

    <!-- Main Content: Center Chart -->
    <vfit-center>
      <div class="main-chart-container">
        <h2>Revenue Overview</h2>
        <div class="chart-placeholder" style="width: 1000px; height: 500px;">
          <!-- Your chart component here -->
          <RevenueChart v-if="!isLoading" :data="revenueData" />
          <LoadingSpinner v-else />
        </div>
      </div>
    </vfit-center>

    <!-- Sidebar: KPI Cards (left side) -->
    <vfit-lt :top="150" :left="40">
      <div class="kpi-sidebar">
        <div v-for="kpi in kpiData" :key="kpi.label" class="kpi-card">
          <span class="kpi-label">{{ kpi.label }}</span>
          <span class="kpi-value">{{ kpi.value }}</span>
          <span class="kpi-trend positive">{{ kpi.trend }}</span>
        </div>
      </div>
    </vfit-lt>

    <!-- Bottom Left: Recent Activity -->
    <vfit-lb :bottom="30" :left="40">
      <div class="activity-panel" style="width: 380px; height: 250px;">
        <h3>Recent Activity</h3>
        <ActivityFeed :limit="5" />
      </div>
    </vfit-lb>

    <!-- Bottom Right: Quick Actions -->
    <vfit-rb :bottom="30" :right="40">
      <div class="action-panel">
        <button class="action-btn">Export Report</button>
        <button class="action-btn">Share Dashboard</button>
        <button class="action-btn">Settings</button>
      </div>
    </vfit-rb>

    <!-- Scale indicator (debug) -->
    <vfit-rb :bottom="30" :right="200" :scale="0.8">
      <div class="scale-info">
        Scale: {{ scale.toFixed(2) }}
      </div>
    </vfit-rb>
  </div>
</template>

<style scoped>
.dashboard-viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0a1628 0%, #1a2942 100%);
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 24px;
  font-weight: 600;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}

.time { font-size: 28px; font-weight: 500; }
.status.online { color: #4ade80; }

.main-chart-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 30px;
  backdrop-filter: blur(10px);
}

.main-chart-container h2 {
  color: white;
  margin-bottom: 20px;
}

.kpi-sidebar { display: flex; flex-direction: column; gap: 20px; }

.kpi-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  width: 200px;
  color: white;
}

.kpi-label { display: block; font-size: 14px; opacity: 0.7; }
.kpi-value { display: block; font-size: 32px; font-weight: 700; margin: 8px 0; }
.kpi-trend.positive { color: #4ade80; font-size: 14px; }

.activity-panel, .action-panel {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  color: white;
}

.action-panel { display: flex; flex-direction: column; gap: 10px; }

.action-btn {
  background: rgba(59, 130, 246, 0.8);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.action-btn:hover { background: rgba(59, 130, 246, 1); }

.scale-info {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: monospace;
}
</style>
```

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

### Bottom-Right Positioning with vfit-rb

Source: https://context7.com/v-plugin/vfit/llms.txt

Utilize vfit-rb to position elements from the bottom-right corner, with a transform origin of 100% 100%. This is ideal for control panels, action buttons, and legends.

```vue
<template>
  <div class="dashboard">
    <!-- Control panel -->
    <vfit-rb :bottom="20" :right="20">
      <div class="control-panel">
        <button @click="toggleFullscreen">Fullscreen</button>
        <button @click="refreshData">Refresh</button>
        <button @click="exportPDF">Export PDF</button>
      </div>
    </vfit-rb>

    <!-- Navigation controls -->
    <vfit-rb :bottom="100" :right="20">
      <div class="nav-controls">
        <button @click="prevPage">← Previous</button>
        <span>Page {{ currentPage }} / {{ totalPages }}</span>
        <button @click="nextPage">Next →</button>
      </div>
    </vfit-rb>

    <!-- Zoom controls with custom scale -->
    <vfit-rb :bottom="180" :right="20" :scale="0.9">
      <ZoomControls v-model="zoomLevel" />
    </vfit-rb>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const totalPages = ref(5)
const zoomLevel = ref(100)

const toggleFullscreen = () => document.fullscreenElement
  ? document.exitFullscreen()
  : document.documentElement.requestFullscreen()
const refreshData = () => console.log('Refreshing...')
const exportPDF = () => console.log('Exporting...')
const prevPage = () => currentPage.value = Math.max(1, currentPage.value - 1)
const nextPage = () => currentPage.value = Math.min(totalPages.value, currentPage.value + 1)
</script>
```

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

### FitContainer with Fixed Pixel Distance

Source: https://github.com/v-plugin/vfit/blob/main/docs/en/guide/fitcontainer.md

Use this snippet to position an element a fixed pixel distance from the top and right edges of the screen. The 'unit="px"' prop ensures that 'top' and 'left' values scale with the global scale, while 'right' and 'bottom' maintain their actual screen pixel distance.

```vue
<FitContainer :top="80" :right="40" unit="px">
  <Rankings />
</FitContainer>
```

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

### Top-Right Positioning with vfit-rt

Source: https://context7.com/v-plugin/vfit/llms.txt

Use vfit-rt to position elements from the top-right corner. It automatically sets the transform origin to 100% 0 for scaling from the right edge. Ideal for time displays, status indicators, and system information.

```vue
<template>
  <div class="dashboard">
    <!-- System time in top-right corner -->
    <vfit-rt :top="20" :right="20">
      <div class="time-widget">
        <span class="time">{{ currentTime }}</span>
        <span class="date">{{ currentDate }}</span>
      </div>
    </vfit-rt>

    <!-- Status indicators -->
    <vfit-rt :top="80" :right="20">
      <div class="status-panel">
        <StatusIndicator label="CPU" :value="cpuUsage" />
        <StatusIndicator label="Memory" :value="memoryUsage" />
        <StatusIndicator label="Network" :value="networkStatus" />
      </div>
    </vfit-rt>

    <!-- User profile with custom z-index -->
    <vfit-rt :top="20" :right="100" :z="400">
      <UserAvatar :user="currentUser" />
    </vfit-rt>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentTime = ref('14:32:05')
const currentDate = ref('2025-01-15')
const cpuUsage = ref(45)
const memoryUsage = ref(68)
const networkStatus = ref('Online')
</script>
```

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