Vue.js derective for setting an aspect ratio

$ npm install v-aspect-ratio --save

$ yarn add v-aspect-ratio

<script src="https://unpkg.com/v-aspect-ratio"></script>

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>

npm run test