Leveraging the VueUse Fullscreen Composable

The @vueuse/core ecosystem provides a suite of composition utilities that streamline browser API interactions. Among these, useFullscreen wraps the native Fullscreen API to offer reactive state management for viewport expansion and restoration.

Package Installation

Integrate the dependency into your project workspace:

npm install @vueuse/core

API Structure and State Management

Invoking the composable yields a collection of reactive references and control methods. Destructuring allows immediate access to the necessary state handlers:

import { useFullscreen } from '@vueuse/core'

const {
  isFullscreen: isExpanded,
  enter: activateView,
  exit: restoreView,
  toggle: handleToggle
} = useFullscreen()

• isExpanded: Reactive boolean tracking the current viewport state.
• activateView: Triggers fullscreen mode for the target element or window.
• restoreView: Returns the layout to standard window dimensions.
• handleToggle: Automatically switches between activation and restoration states.

Integrating Dynamic SVG Icons

To visualize the state changes effectively, pair the composable with a configurable SVG renderer. The following component demonstrates a header control that swaps icons based on the reactive fullscreen state. Asset files (typically exported as .svg from icon repositories) should be organized in your static asset directory.

<template>
  <header class="top-bar">
    <nav class="utility-menu">
      <VectorIcon name="bell-outline" size="22px" />
      <button class="viewport-btn" @click="handleToggle">
        <VectorIcon
          :name="isExpanded ? 'shrink-screen' : 'expand-screen'"
          size="22px"
          tint="#4a5568"
        />
      </button>
    </nav>
  </header>
</template>

<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';

const { isFullscreen: isExpanded, toggle: handleToggle } = useFullscreen();
</script>

<style scoped lang="scss">
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.utility-menu {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.viewport-btn {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    background: #f7fafc;
    border-color: #e2e8f0;
  }
}
</style>

Configurable Vector Renderer

The VectorIcon component abstracts symbol references and applies dynamic styling. It computes the sprite path and binds inline dimensions and color properties.

<template>
  <svg
    class="svg-symbol"
    aria-hidden="true"
    :style="{ width: size, height: size }"
  >
    <use :href="spriteLink" :fill="tint" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface IconConfig {
  name: string;
  size?: string;
  tint?: string;
  prefix?: string;
}

const props = withDefaults(defineProps<IconConfig>(), {
  size: '16px',
  tint: 'currentColor',
  prefix: 'sprite'
});

const spriteLink = computed(() => `#${props.prefix}-${props.name}`);
</script>

<style scoped>
.svg-symbol {
  vertical-align: middle;
  display: block;
  overflow: visible;
}
</style>