vue-hako

A Vue Component to proportionally scale your content

Installation

npm i vue-hako

Usage

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>

License

MIT License © 2021-PRESENT Jacob Clevenger