v-aspect-ratio
Vue.js directive for setting an aspect ratio
1.x
documentation can be found here.
Installation
Via NPM
$ npm install v-aspect-ratio --save
Via Yarn
$ yarn add v-aspect-ratio
Directly in browser
Initialization
As a global plugin
It must be called before new Vue()
Vue
As a global directive
Vue
As a local directive
name: 'YourAwesomeComponent' directives: 'aspect-ratio': directive
As a Nuxt.js SSR directive
// nuxt.config.js const directive = moduleexports = // ... render: bundleRenderer: directives: 'aspect-ratio': directive // ...
Directly in browser
<!-- As a global directive --><!-- As a local directive -->
Usage
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
- Clone this repository
- Install the dependencies running
yarn install
ornpm install
command - 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