Vue 3 components to render a physical iPhone device + basic iMessage
npm install vue-iphone-imessageA 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
``bash`
npm install vue-iphone-imessage
Then, import styles in your main.js file:
`js`
import 'vue-iphone-imessage/dist/style.css';
You can use the components in your Vue 3 like this:
`vue
`
You can, in theory, inject any component instead of iMessageAppComponent`, but that hasn't been tested yet.
!Screenshot1
!Screenshot2
!Screenshot3
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.