A component renders its content in a fixed aspect ratio container.
Drop the component in with a <script>
tag alongside Vue:
<div id="app">
<!-- ... use component here ... -->
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-layout-primitives.frame"></script>
<script>
new Vue({ el: '#app' })
</script>
Install the component with NPM:
npm install vue-layout-primitives.frame
Then import the component:
import Frame from 'vue-layout-primitives.frame'
And either globally register it for use in all components:
Vue.component(Frame, 'vue-layout-primitives.frame')
or locally register it for use in an individual component:
export default {
components: { Frame }
}
<!-- No props or content are necessary. -->
<Frame>
...
</Frame>