https://github.com/shwilliam/vue-direction

👋 Declarative, direction-aware hover in Vuejs
https://github.com/shwilliam/vue-direction

component direction hover mouse vue

Last synced: 8 months ago
JSON representation

👋 Declarative, direction-aware hover in Vuejs

• Host: GitHub
• URL: https://github.com/shwilliam/vue-direction
• Owner: shwilliam
• License: mit
• Created: 2019-03-02T07:48:06.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T06:49:04.000Z (almost 3 years ago)
• Last Synced: 2025-03-26T13:53:47.946Z (9 months ago)
• Topics: component, direction, hover, mouse, vue
• Language: Vue
• Homepage: https://www.npmjs.com/package/vue-direction
• Size: 105 KB
• Stars: 35
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-direction - Declarative, direction-aware hover in Vuejs ` 📝 a year ago` (Utilities [🔝](#readme))
• awesome-vue - vue-direction - 👋 Direction aware hover in Vuejs (Utilities / Miscellaneous)
• awesome-vue - vue-direction - 👋 Direction aware hover in Vuejs (Components & Libraries / Utilities)

README

          
# vue-direction

![Minified size](https://img.shields.io/bundlephobia/min/vue-direction.svg?style=plastic)

> Direction aware hover in Vuejs

![Usage](https://user-images.githubusercontent.com/38357771/53678998-b326c680-3c94-11e9-8e4f-f65feee8651f.gif)

[![Try it on codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3x46lrlk1q)

## Installation

Install the component via npm by running `npm i vue-direction` or `yarn add vue-direction`.

## Usage

Import, register and place the component in your Vue app.

```html

  

    

      

      {{ mouseDirection.x }}

      {{ mouseDirection.y }}

    

  

```

```js

import VueDirection from 'vue-direction'

export default {

  components: {

    VueDirection,

  },

}

```

## Dev

Running `dev` script requires @vue/cli and @vue/cli-service-global to be installed. Install these globally by running `npm i --g @vue/cli @vue/cli-service-global` or `yarn add global vue/cli @vue/cli-service-global`.

## Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/vue-direction/issues). If you wish to work on this project:

1.  [Fork the project](https://github.com/shwilliam/vue-direction/archive/master.zip)

2.  Create your feature branch (`git checkout -b new-feature-branch`)

3.  Commit your changes (`git commit -am 'add new feature'`)

4.  Push to the branch (`git push origin new-feature-branch`)

5.  [Submit a pull request!](https://github.com/shwilliam/vue-direction/pull/new/master)