vue3-mobile-sized-view
v1.0.0
Published
Remain the mobile view on desktop.
Downloads
4
Readme
vue3-mobile-sized-view
Responsive Mobile-sized Wrapper for Vuejs - Easily prototype your mobile-sized web apps with desktop support
This project's source and idea are fully based on
react-mobile-sized-view
Special thanks to @junhoyeo Special thanks to @UX&I GmbH Special thanks to @yingshaoxo
🚀 Demo & Examples
Find out here
📦 Usage
yarn add vue3-mobile-sized-view
<script setup lang="ts">
import { onBeforeMount, reactive, ref } from 'vue'
import Vue3MobileSizedView from 'vue3-mobile-sized-view';
const dict = reactive({
css: {
backgroundColor: "#f6dadb",
screenBackgroundColor: "#fefefe",
screenLightShadow: "-31px -31px 62px #FAE0E0",
screenDarkShadow: "31px 31px 62px #EAB6BE",
isRounded: true,
},
})
<template>
<vue3-mobile-sized-view
:background-color="dict.css.backgroundColor"
:screen-background-color="dict.css.screenBackgroundColor"
:screen-light-shadow="dict.css.screenLightShadow"
:screen-dark-shadow="dict.css.screenDarkShadow"
:is-rounded="dict.css.isRounded"
>
<div>Replace here with your contents.</div>
</vue3-mobile-sized-view>
</template>