[vue-cordova] cordova-plugin-device

Contacts.vue

<template>
	<div id="app">
		<h2>contacts</h2>
		<v-btn @click="device">버튼 ㅋ</v-btn>
		<div class="dump" v-if="cordova">
			<div>cordova.deviceready : {{ cordova.deviceready }}</div>
			<div>cordova.device : {{ cordova.device }}</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';

	export default {
		methods: {
			pluginEnabled() {
				console.log(this.cordova.plugins);
			},
			device() {
				this.$CORDOVA_API.device.getDeviceInfo();
			},
		},

		data() {
			return {
				cordova: Vue.cordova,
			};
		},
	};
</script>

<style>
	html {
		height: 100%;
	}
	body {
		height: 100%;
	}
	#app {
		color: #2c3e50;
		margin: 40px auto;
		max-width: 640px;
		font-family: Source Sans Pro, Helvetica, sans-serif;
		text-align: center;
	}
	.logo {
		padding-bottom: 30px;
	}
	.logo span {
		position: relative;
		top: -30px;
		font-size: 36px;
		margin: 0 20px;
	}
	.logo img {
		width: 90px;
		height: 90px;
	}
	div.dump {
		background: #eee;
		text-align: left;
		border: solid 1px #ccc;
		padding: 20px;
		max-width: 600px;
		box-sizing: border-box;
		font-family: monospace;
		white-space: pre;
	}
	div.alert {
		color: #c00;
		font-weight: bold;
		font-size: 0.9em;
		padding-bottom: 30px;
		line-height: 1.6;
	}
	div.alert a {
		color: inherit;
	}
	div.indicators {
		width: 340px;
		margin: 0 auto 40px;
		text-align: left;
		font-family: Courier, Courier New, sans-serif;
	}
	div.indicators div {
		padding-bottom: 15px;
		opacity: 0.6;
	}
	div.indicators div.ok {
		opacity: 1;
		cursor: pointer;
	}
	div.indicators div.ok span {
		background: #0c0;
	}
	div.indicators div span {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #c00;
		border-radius: 20px;
		position: relative;
		top: 3px;
		margin-right: 15px;
	}
	div.indicators p {
		font-size: 0.8em;
		font-weight: bold;
		padding-bottom: 20px;
	}
</style>

utils/cordova.js

/**
 * cordova-plugin-device
 */
const device = {
	getDeviceInfo() {
		if (!Vue.cordova.device) {
			window.alert('FAILED : 디바이스 정보 확인 실패');
		} else {
			window.alert(
				'Device : ' +
					Vue.cordova.device.manufacturer +
					' ' +
					Vue.cordova.device.platform +
					' ' +
					Vue.cordova.device.version,
			);
		}
	},
};
const CORDOVA_API = { device };
export default CORDOVA_API;

main.js

import Vue from 'vue';

...(생략)

import VueCordova from 'vue-cordova';
import CORDOVA_API from '@/utils/cordova.js';
Vue.use(VueCordova);
Vue.prototype.$CORDOVA_API = CORDOVA_API;
Vue.config.productionTip = false;

new Vue({
	router,
	store,
	vuetify,
	render: h => h(App),
}).$mount('#app');