Nevermore: a Poet's Mantra

    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

    Install

    npm i v-aspect-ratio

    DownloadsWeekly Downloads

    119

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    22

    Last publish

    Collaborators

    • 3vil_arthas