Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewvasilchuk/v-aspect-ratio
Vue.js derective for setting an aspect ratio
https://github.com/andrewvasilchuk/v-aspect-ratio
aspect-ratio aspect-ratio-layout aspect-ratios hacktoberfest nuxt nuxt-ssr nuxtjs vue vue2 vuejs vuejs2
Last synced: 3 months ago
JSON representation
Vue.js derective for setting an aspect ratio
- Host: GitHub
- URL: https://github.com/andrewvasilchuk/v-aspect-ratio
- Owner: andrewvasilchuk
- License: mit
- Created: 2019-03-07T10:48:57.000Z (almost 6 years ago)
- Default Branch: dev
- Last Pushed: 2023-02-12T13:54:41.000Z (almost 2 years ago)
- Last Synced: 2024-10-08T14:34:11.048Z (3 months ago)
- Topics: aspect-ratio, aspect-ratio-layout, aspect-ratios, hacktoberfest, nuxt, nuxt-ssr, nuxtjs, vue, vue2, vuejs, vuejs2
- Language: TypeScript
- Homepage: https://andrewvasilchuk.github.io/v-aspect-ratio/
- Size: 4.83 MB
- Stars: 29
- Watchers: 1
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# v-aspect-ratio
> Vue.js directive for setting an aspect ratio
[](https://github.com/andrewvasilchuk/v-aspect-ratio/actions?query=workflow%3AIntegration)
[](https://www.npmjs.com/package/v-aspect-ratio)
[](https://bundlephobia.com/result?p=v-aspect-ratio)
[](https://www.codacy.com/gh/andrewvasilchuk/v-aspect-ratio/dashboard?utm_source=github.com&utm_medium=referral&utm_content=andrewvasilchuk/v-aspect-ratio&utm_campaign=Badge_Grade)
[](https://lgtm.com/projects/g/andrewvasilchuk/v-aspect-ratio/alerts/)
[](https://lgtm.com/projects/g/andrewvasilchuk/v-aspect-ratio/context:javascript)
[](https://codecov.io/gh/andrewvasilchuk/v-aspect-ratio)
[](https://www.npmjs.com/package/v-aspect-ratio)
[](https://github.com/andrewvasilchuk/v-aspect-ratio/commits/master)
[](https://github.com/andrewvasilchuk/v-aspect-ratio/blob/master/LICENSE)
[](https://madewithvuejs.com/p/v-aspect-ratio/shield-link)
`1.x` documentation can be found [here](https://github.com/andrewvasilchuk/v-aspect-ratio/tree/1.x).
- [v-aspect-ratio](#v-aspect-ratio)
- [Installation](#installation)
- [Via NPM](#via-npm)
- [Via Yarn](#via-yarn)
- [Directly in browser](#directly-in-browser)
- [Initialization](#initialization)
- [As a global plugin](#as-a-global-plugin)
- [As a global directive](#as-a-global-directive)
- [As a local directive](#as-a-local-directive)
- [As a Nuxt.js SSR directive](#as-a-nuxtjs-ssr-directive)
- [Directly in browser](#directly-in-browser-1)
- [Usage](#usage)
- [Demo](#demo)
- [Tests](#tests)
- [Development](#development)
- [Build](#build)
- [License](#license)
## Installation
### Via NPM
```bash
$ npm install v-aspect-ratio --save
```
### Via Yarn
```bash
$ yarn add v-aspect-ratio
```
### Directly in browser
```html
```
## Initialization
### As a global plugin
It must be called before `new Vue()`
```js
import Vue from 'vue'
import AspectRatio from 'v-aspect-ratio'
Vue.use(AspectRatio)
```
### As a global directive
```js
import Vue from 'vue'
import { directive } from 'v-aspect-ratio'
Vue.directive('aspect-ratio', directive)
```
### As a local directive
```javascript
import { directive } from 'v-aspect-ratio'
export default {
name: 'YourAwesomeComponent',
directives: {
'aspect-ratio': directive,
},
}
```
### As a Nuxt.js SSR directive
```js
// 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
```html
Vue.use(VAspectRatio.default)
new Vue({
// ...
})
new Vue({
// ...
directives: { 'aspect-ratio': VAspectRatio.directive },
// ...
})
```
## Usage
```html
```
## Demo
[Demo](https://andrewvasilchuk.github.io/v-aspect-ratio)
[](https://codesandbox.io/s/ko425ro4k7)
## Tests
[`jest`](https://jestjs.io) and [`@vue/test-utils`](https://vue-test-utils.vuejs.org) is used for unit tests.
You can run unit tests by running the next command:
```bash
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](http://opensource.org/licenses/MIT)