vue3_typescript_3d_iphone_mockup_with_texture.ts

1<script setup lang="ts">
2import { VueThreeDMockup } from 'vue-three-d-mockup';
3import 'vue-three-d-mockup/dist/style.css';
4
5// Define the texture for the mockup (e.g., a screenshot of your app)
6const myTexture = 'https://raw.githubusercontent.com/shubhadip/vue-three-d-mockup/main/src/assets/screen.png';
7</script>
8
9<template>
10  <div style="height: 500px; width: 100%;">
11    <!-- 
12      The component renders a 3D device mockup.
13      'device' specifies the model (e.g., 'iphone-14-pro')
14      'texture' is the image mapped onto the device screen
15    -->
16    <VueThreeDMockup 
17      device="iphone-14-pro" 
18      :texture="myTexture" 
19      :is-responsive="true"
20    />
21  </div>
22</template>
23
24<style scoped>
25/* Ensure the container has dimensions for the 3D canvas */
26div {
27  display: flex;
28  justify-content: center;
29  align-items: center;
30}
31</style>