Vue.js directive for setting an aspect ratio
1.x
documentation can be found here.
$ npm install v-aspect-ratio --save
$ yarn add v-aspect-ratio
<script src="https://unpkg.com/v-aspect-ratio"></script>
It must be called before new Vue()
import Vue from 'vue'
import AspectRatio from 'v-aspect-ratio'
Vue.use(AspectRatio)
import Vue from 'vue'
import { directive } from 'v-aspect-ratio'
Vue.directive('aspect-ratio', directive)
import { directive } from 'v-aspect-ratio'
export default {
name: 'YourAwesomeComponent',
directives: {
'aspect-ratio': 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,
},
},
},
// ...
}
<!-- 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>
<template>
<div>
<div v-aspect-ratio="'16:9'"></div>
<div v-aspect-ratio="'4:3'"></div>
</div>
</template>
jest
and @vue/test-utils
is used for unit tests.
You can run unit tests by running the next command:
npm run test
yarn install
or npm install
commandnpm run dev
commandTo 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
Author: andrewvasilchuk
Demo: https://andrewvasilchuk.github.io/v-aspect-ratio/
Source Code: https://github.com/andrewvasilchuk/v-aspect-ratio
#vuejs #vue #javascript