vue-iphone-imessage

A set of Vue 3 components that mimic the look and feel of a physical iPhone, including the default Messages app.

There is no real purpose to this project, it was mostly a fun CSS challenge, but can be used to create beautiful mockups.

Based on this "iPhone 14 w/ Dynamic Island" CodePen: https://codepen.io/lukemeyrick/pen/poVyEdZ

Installation

npm install vue-iphone-imessage

Then, import styles in your main.js file:

import 'vue-iphone-imessage/dist/style.css';

You can use the components in your Vue 3 like this:

<script setup>
import { iPhoneComponent, iMessageAppComponent } from 'vue-iphone-imessage';

const conversations = [
  {
    sender: '+1 123 456 7890',
    messages: [
      {
        timestamp: 'Yesterday',
        text: "Hey, what's up?",
        sentByMe: false
      }
    ]
  }
];
</script>

<template>
  <iPhoneComponent network-text="4G" :battery-percentage="75">
    <iMessageAppComponent :conversations="conversations" />
  </iPhoneComponent>
</template>

You can, in theory, inject any component instead of iMessageAppComponent, but that hasn't been tested yet.

Screenshots

TypeScript

This project is written in TypeScript and so it ships with built-in types. You shouldn't have to do anything special to use them.