vue-mobile-sized-view
vue-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
🚀 Demo & Examples
Find out here
📦 Usage
yarn add vue-mobile-sized-view
import Vue from 'vue';
import VueMobileSizedView from 'vue-mobile-sized-view';
export default Vue.extend({
name: 'ComponentA',
components: {
VueMobileSizedView
},
data () {
return {
backgroundColor: "#f6dadb",
screenBackgroundColor: "#fefefe",
screenLightShadow: "-31px -31px 62px #FAE0E0",
screenDarkShadow: "31px 31px 62px #EAB6BE",
isRounded: true,
};
}
});
<template>
<vue-mobile-sized-view
:background-color="backgroundColor"
:screen-background-color="screenBackgroundColor"
:screen-light-shadow="screenLightShadow"
:screen-dark-shadow="screenDarkShadow"
:is-rounded="isRounded">
<div>Replace here with your contents.</div>
</vue-mobile-sized-view>
</template>
Dependencies
Dependencies
@babel/core: ^7.17.8@babel/preset-env: ^7.16.11@babel/preset-typescript: ^7.16.7@rollup/plugin-alias: ^3.1.9@rollup/plugin-babel: ^5.3.1@rollup/plugin-commonjs: ^21.0.3@rollup/plugin-node-resolve: ^13.1.3@rollup/plugin-replace: ^4.0.0@vue/cli-plugin-babel: ^5.0.4@vue/cli-plugin-typescript: ^5.0.4@vue/cli-service: ^5.0.4@zerollup/ts-transform-paths: ^1.7.18cross-env: ^7.0.3minimist: ^1.2.6rimraf: ^3.0.2rollup: ^2.70.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0rollup-plugin-typescript2: ^0.31.2ttypescript: ^1.5.13typescript: ^4.6.3vue: ^2.6.14vue-template-compiler: ^2.6.14