Simulate iPhone’s Dynamic Island In Vue

Install & Download:

# NPM
$ npm i v-dynamic-island

Description:

A Vue 3 component to simulate the Dynamic Island introduced in the brand new Apple iPhone 14 Pro.

How to use it:

1. Import and register the component.

import { ref } from 'vue'
import { DynamicIsland } from 'v-dynamic-island'
import 'v-dynamic-island/style.css'

2. Add the Dynamic Island to the app.

<template>
  <DynamicIsland :shown="shown" :expanded="expanded">
    <template #leading>
      ...
    </template>
    <template #trailing>
      ...
    </template>
    <template #expanded>
      ...
    </template>
  </DynamicIsland>
</template>

const shown = ref(false)
const expanded = ref(false)

Preview: