A Vue Component to proportionally scale your content
npm i vue-hako
Register the component to be used anywhere in your app.
Inside of main.js
import { createApp } from 'vue'
import { HakoPlugin } from 'vue-hako'
import App from './App.vue'
createApp(App)
.use(Hako)
.mount('#app')
Or import the component on a per-component basis.
Inside of your component
<script setup>
import { Hako } from 'vue-hako'
</script>
<template>
...
</template>
Using the component
<script setup>
import { ref } from 'vue'
const disableScaling = ref(false)
const width = ref(1920)
const height = ref(1080)
</script>
<template>
<div>
<Hako
:width="width"
:height="height"
:disable-scaling="disableScaling"
>
This content will scale to its container
</Hako>
</div>
</template>
MIT License © 2021-PRESENT Jacob Clevenger