var

v-aspect-ratio

Vue.js derective for setting an aspect ratio

Showing:

Popularity

Downloads/wk

127

GitHub Stars

23

Maintenance

Last Commit

4mos ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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 MadeWithVueJs.com shield

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial