Simulate iPhone’s Dynamic Island In Vue

Install & Download:

$ npm i v-dynamic-island


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.

  <DynamicIsland :shown="shown" :expanded="expanded">
    <template #leading>
    <template #trailing>
    <template #expanded>
const shown = ref(false)
const expanded = ref(false)


Simulate iPhone's Dynamic Island In Vue

Add Comment