apertureless

Open Source

vue-chartjs

# vue-chartjs <img align="right" width="150" height="150" alt="vue-chartjs logo" src="https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/vue-chartjs.png"> **vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components. Supports Chart.js v4. [![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) [![Build Status](https://img.shields.io/github/actions/workflow/status/apertureless/vue-chartjs/ci.yml?branch=main)](https://github.com/apertureless/vue-chartjs/actions) [![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs) [![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs) [![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt) [![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs) [![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs) [![Donate](https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/donate.svg)](https://www.paypal.me/apertureless/50eur) [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C) <br /> <a href="#quickstart">QuickStart</a> <span>  •  </span> <a href="#docs">Docs</a> <span>  •  </span> <a href="https://stackoverflow.com/questions/tagged/vue-chartjs">Stack Overflow</a> <br /> <hr /> ## Quickstart Install this library with peer dependencies: ```bash pnpm add vue-chartjs chart.js # or yarn add vue-chartjs chart.js # or npm i vue-chartjs chart.js ``` Then, import and use individual components: ```vue <template> <Bar :data="data" :options="options" /> </template> <script lang="ts"> import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js' import { Bar } from 'vue-chartjs' ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend) export default { name: 'App', components: { Bar }, data() { return { data: { labels: ['January', 'February', 'March'], datasets: [{ data: [40, 20, 12] }] }, options: { responsive: true } } } } </script> ``` <hr /> Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps. <br /> [![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs) ## Docs - [Reactivity](https://vue-chartjs.org/guide/#updating-charts) - [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance) - [Accessibility](https://vue-chartjs.org/guide/#accessibility) - [Migration from v4 to v5](https://vue-chartjs.org/migration-guides/#migration-from-v4-to-v5/) - [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/) - [API](https://vue-chartjs.org/api/) - [Examples](https://vue-chartjs.org/examples/) ## Build Setup ``` bash # install dependencies pnpm install # build for production with minification pnpm build # run unit tests pnpm test:unit # run all tests pnpm test ``` ## Contributing 1. Fork it ( https://github.com/apertureless/vue-chartjs/fork ) 2. Create your feature branch (`git checkout -b my-new-feature`) 3. Commit your changes (`git commit -am 'Add some feature'`) 4. Push to the branch (`git push origin my-new-feature`) 5. Create a new Pull Request ## License This software is distributed under [MIT license](LICENSE.txt). <a href="https://www.buymeacoffee.com/xcqjaytbl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

Web Components & Widgets Data Visualisation

5.7K Github Stars

vue-parallax

# vue-parallaxy [![npm version](https://badge.fury.io/js/vue-parallaxy.svg)](https://badge.fury.io/js/vue-parallaxy) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-parallax/blob/master/LICENSE.txt) [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C) Is a compontent for fast 60fps parallax scroll effects in vue 2. ## Demo [Demo here](https://apertureless.github.io/vue-parallax/) ## Install `npm install vue-parallaxy` or `yarn add vue-parallaxy` ## Usage *vue-parallax* works with slots. So you can pass an image or even srcsets for better mobile experiences. ```html // Image.vue <template> <parallax> <img src="path/cool-background-image.jpg" alt="very cool bg"> </parallax> </template> <script> import Parallax from 'vue-parallaxy' export default { components: { Parallax } } </script> ``` ## Props | Prop | Type | Default Value | Description |----------|:-------------:|------|------| | parallax | Boolean | true | Activates parallax effect | | speedFactor | Number | 0.15 | factor on how strong the effect is| | direction | String | 'up' | Either 'up' or 'down', determines scroll direction of image | | fixed | Boolean | false | Other parallax effect. Image is fixed in position | | sectionHeight | Number | 70 | section height for mobile | | breakpoint | String | '(min-width: 968px)' | Media query for mobile deactivation | | sectionClass | String | 'Masthead' | CSS class of the outer section tag | | containerClass | String | 'Masthead__image' | CSS class of the container holding the image | | parallaxClass | String | 'is-parallax' | Modifier class for the parallax effect | | fixedClass | String | 'is-fixed' | Modifier class for the fixed parallax effect | ## Customizing You can change some of the behavior by changing the css classes. To be more clean, you can change them over the props. No need to overwrite or `!important` the existing classes. ## Build Setup ``` bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # run unit tests npm run unit # run all tests npm test ``` For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). ## Contributing 1. Fork it ( https://github.com/apertureless/vue-parallax/fork ) 2. Create your feature branch (`git checkout -b my-new-feature`) 3. Commit your changes (`git commit -am 'Add some feature'`) 4. Push to the branch (`git push origin my-new-feature`) 5. Create a new Pull Request ## License This software is distributed under [MIT license](LICENSE.txt).

Web Development JavaScript Libraries & Components

629 Github Stars

vue-password-strength-meter

# 🔓 vue-password-strength-meter [![npm version](https://badge.fury.io/js/vue-password-strength-meter.svg)](https://badge.fury.io/js/vue-password-strength-meter) [![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-password-strength-meter/blob/master/LICENSE.txt) [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C) Interactive password strength meter based on [zxcvbn](https://github.com/dropbox/zxcvbn) for vue.js <p align="center"> <img src="/static/demo.gif" alt="🔓" title="🔓 Demo" /> </p> ## 📺 Demo [Demo here](https://apertureless.github.io/vue-password-strength-meter/) ## 🔧 Install `yarn add vue-password-strength-meter zxcvbn` ## 👈 Usage ```javascript <template> <password v-model="password"/> </template> <script> import Password from 'vue-password-strength-meter' import 'vue-password-strength-meter/style.css' export default { components: { Password }, data: () => ({ password: null }) } </script> ``` ## 👈 With events ```javascript <template> <password v-model="password" :toggle="true" @score="showScore" @feedback="showFeedback" /> </template> <script> import Password from 'vue-password-strength-meter' import 'vue-password-strength-meter/style.css' export default { components: { Password }, data: () => ({ password: null }), methods: { showFeedback ({suggestions, warning}) { console.log('🙏', suggestions) console.log('⚠', warning) }, showScore (score) { console.log('💯', score) } } } </script> ``` ### With custom input ```html <template> <div> <input type="password" v-model="password"> <password v-model="password" :strength-meter-only="true"/> </div> </template> <script> import Password from 'vue-password-strength-meter' import 'vue-password-strength-meter/style.css' export default { components: { Password }, data: () => ({ password: null }) } </script> ``` ### Composition API ```html <template> <password v-model="password" /> </template> <script setup> import { ref } from 'vue' import Password from 'vue-password-strength-meter' import 'vue-password-strength-meter/style.css' const password = ref(null) </script> ``` ## Props | Prop | Type | Default Value | Description |----------|:-------------:|------|------| | secureLength | Number | 7 | password min length | | badge | Boolean | true | display password count badge | | toggle | Boolean | false | show button to toggle password visibility | | showPassword | Boolean | false | If you are not using the `toggle` button you can directly show / hide the password with this prop | | defaultClass | String | Password__field | input field class | | disabledClass | String | Password__field--disabled | disabled input field class | | errorClass | String | Password__badge--error | error class for password count badge | | successClass | String | Password__badge--success | success class for password count badge | | strengthMeterClass | String | Password__strength-meter | strength-meter class | | strengthMeterFillClass | String | Password__strength-meter--fill | strength-meter class for individual data fills | | showStrengthMeter | Boolean | true | Hide the Strength Meter if you want to implement your own | | strengthMeterOnly | Boolean | false | Hides the built-in input if you want to implement your own | | labelHide | String | 'Hide Password' | Label for the hide icon | labelShow | String | 'Show Password' | Label for the show icon | userInputs | Array | empty array | Array of strings that zxcvbn will treat as an extra dictionary | referenceValue | String | 'input' | Prop to change the `ref` of the input. This way you can have the input outside of the component. ## Events ### Show / Hide Password - `@show` will be emitted if showing the password - `@hide` will be emitted if hiding the password - `@score` will return the zxcvbn score (Integer from 0-4) [ℹ] (https://github.com/dropbox/zxcvbn#usage) - `@feedback` will return an zxcvbn feedback object with `suggestion` and `warning` ## 💅 Customizing You can customize the styling of the input field, badge and strength-meter by passing your own css classes to `defaultClass`, `strengthMeterClass` etc. ## Build Setup ``` bash # install dependencies npm install # serve with hot reload npm run dev # build for production with minification npm run build # run tests npm test ``` ## Support <a href="https://www.buymeacoffee.com/xcqjaytbl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

JavaScript Libraries & Components Web Components & Widgets

562 Github Stars

Software by apertureless

vue-chartjs

vue-parallax

vue-password-strength-meter