README
v-aspect-ratio
Vue.js directive for setting an aspect ratio
1.x
documentation can be found here.
Installation
Via NPM
$ npm install v-aspect-ratio --save
Via Yarn
$ yarn add v-aspect-ratio
Directly in browser
<script src="https://unpkg.com/v-aspect-ratio"></script>
Initialization
As a global plugin
It must be called before new Vue()
import Vue from 'vue'
import AspectRatio from 'v-aspect-ratio'
Vue.use(AspectRatio)
As a global directive
import Vue from 'vue'
import { directive } from 'v-aspect-ratio'
Vue.directive('aspect-ratio', directive)
As a local directive
import { directive } from 'v-aspect-ratio'
export default {
name: 'YourAwesomeComponent',
directives: {
'aspect-ratio': directive,
},
}
As a Nuxt.js SSR directive
// nuxt.config.js
const {
directive,
} = require('v-aspect-ratio/dist/v-aspect-ratio.ssr.common.js')
module.exports = {
// ...
render: {
bundleRenderer: {
directives: {
'aspect-ratio': directive,
},
},
},
// ...
}
Directly in browser
<!-- As a global directive -->
<script>
Vue.use(VAspectRatio.default)
new Vue({
// ...
})
</script>
<!-- As a local directive -->
<script>
new Vue({
// ...
directives: { 'aspect-ratio': VAspectRatio.directive },
// ...
})
</script>
Usage
<template>
<div>
<div v-aspect-ratio="'16:9'"></div>
<div v-aspect-ratio="'4:3'"></div>
</div>
</template>
Demo
Tests
jest
and @vue/test-utils
is used for unit tests.
You can run unit tests by running the next command:
npm run test
Development
- Clone this repository
- Install the dependencies running
yarn install
ornpm install
command - Start a development server using
npm run dev
command
Build
To build the production ready bundle simply run npm run build
:
After the successful build the following files will be generated in the dist
folder:
├── plugin
├── index.d.ts
├── directive.d.ts
├── helpers.d.ts
├── index.d.ts
├── v-aspect-ratio.common.js
├── v-aspect-ratio.esm.js
├── v-aspect-ratio.js
├── v-aspect-ratio.min.js
├── v-aspect-ratio.ssr.common.js
├── v-aspect-ratio.ssr.esm.js
├── v-aspect-ratio.ssr.js
├── v-aspect-ratio.ssr.min.js