zitumi/v-aspect-ratio

Vue.js derective for setting an aspect ratio

v-aspect-ratio

Vue.js directive for setting an aspect ratio

1.x documentation can be found here.

• v-aspect-ratio
  • Installation
    • Via NPM
    • Via Yarn
    • Directly in browser
  • Initialization
    • As a global plugin
    • As a global directive
    • As a local directive
    • As a Nuxt.js SSR directive
    • Directly in browser
  • Usage
  • Demo
  • Tests
  • Development
  • Build
  • License

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

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

1. Clone this repository
2. Install the dependencies running yarn install or npm install command
3. 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

License

MIT