v-aspect-ratio
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

v-aspect-ratio

Vue.js directive for setting an aspect ratio

BuildStatus Version Bundle Size Codacy Badge Total alerts Language grade: JavaScript codecov Downloads LastCommit License

1.x documentation can be found here.

Computer screens with different aspect ratios

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

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

Dependents (4)

Package Sidebar

Install

npm i v-aspect-ratio

Weekly Downloads

126

Version

2.0.1

License

MIT

Unpacked Size

19.1 kB

Total Files

22

Last publish

Collaborators

  • 3vil_arthas