vue3-mobile-sized-view v1.0.0

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>