Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devmnj/reusable-vue-components
A set of reusable Vuejs components that could be work with Bulma and Buefy. These are independent components which require bulma css library
https://github.com/devmnj/reusable-vue-components
animation bootstrap-components buefy bulma css javascript vue-component-library vuejs
Last synced: 11 days ago
JSON representation
A set of reusable Vuejs components that could be work with Bulma and Buefy. These are independent components which require bulma css library
- Host: GitHub
- URL: https://github.com/devmnj/reusable-vue-components
- Owner: devmnj
- Created: 2021-05-16T05:36:37.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-05-29T18:44:08.000Z (over 3 years ago)
- Last Synced: 2024-11-15T23:25:46.478Z (2 months ago)
- Topics: animation, bootstrap-components, buefy, bulma, css, javascript, vue-component-library, vuejs
- Language: Vue
- Homepage: oh-vue-components.vercel.app
- Size: 906 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# About
This project contain a set of reusable vuejs components for web development using **Bulma** CSS.
## Demo
A [demo](https://oh-vue-components.vercel.app/) of these components is the best way to explore..
# Animation and CSS
Some of the CSS animation and other class is adapted from codepen authors and from other resources. All I do is the Vue part and Bulma. **Thanks for the awesome animation and design**
# Components
1. FlipCard
2. FImgCard - Animated Featured Image Card
3. PCard - Colorfull Profile Card
4. HSVGCard - Hover SVG Card
5. ImgCards - Picture Stack Card
6. PostCard - Blog post Card
7. HBox - Boxed Animation
8. LBox - Line Animation
9. FBox - Fading Animation
10. Clash Card - Clash of the Clan style
11. Profiler - Tween Profile picture
12. SCard - Reusable Product Card with Picture on Top
13. OCard - Picture with more info
14. Sidebar - A sidebar with opening pane
15. TextBoxes - FBox,HBox,LBox
16. CMenu - Circular Menu component
17. LWave - A wave loader for Vue
18. ColorPicker- A simple Color Pallet
19. CheckGroup - CheckGroup
20. 404
21. CCounter - Item counter
## How to use
How to use the component in your projects ? Donwload or clone the project and
drag and drop components to your project.
Install Bulma
````
npm i -s bulma
or
yarn add bulma
````
And enable bulma support by importing the css module in **main.js**
```
import Vue from "vue";
import App from "./App.vue";
import "bulma/css/bulma.css";
```
then you can use the components as follows
```
import ImgCards from '@/components/ImgCards'
export default {
name: "ACards",
...
components: {
'b-img':ImgCards,
},
};
```
### More giudes and docs avaibale @ developer site
See [JavaScript Superuser](https://javascriptsu.wordpress.com).