https://github.com/philippebeck/vesan
Frontend Framework made with Vue & Animadio
https://github.com/philippebeck/vesan
animadio framework frontend javascript jest ui vue
Last synced: 10 months ago
JSON representation
Frontend Framework made with Vue & Animadio
- Host: GitHub
- URL: https://github.com/philippebeck/vesan
- Owner: philippebeck
- License: apache-2.0
- Created: 2023-01-24T15:03:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-08T13:02:15.000Z (almost 2 years ago)
- Last Synced: 2025-05-26T21:05:02.096Z (10 months ago)
- Topics: animadio, framework, frontend, javascript, jest, ui, vue
- Language: Vue
- Homepage: https://www.npmjs.com/package/vesan
- Size: 4.51 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vesan
Vesan is a User Interface Framework made with Vue & Animadio
[](https://www.npmjs.com/package/vesan)
[](https://github.com/philippebeck/vesan)
[](https://github.com/philippebeck/vesan/tree/master)
[](https://www.npmjs.com/package/vesan)
[](https://github.com/philippebeck/vesan/commits/master)
[](https://www.codacy.com/gh/philippebeck/vesan/dashboard)
[](https://codeclimate.com/github/philippebeck/vesan/maintainability)
- [Vesan](#vesan)
- [Download](#download)
- [Package](#package)
- [Installation](#installation)
- [Configuration](#configuration)
- [Usage](#usage)
- [Production](#production)
- [Content](#content)
- [Documentation](#documentation)
---
## Download
[Use this Template](https://github.com/philippebeck/vesan/generate)
or
`git clone https://github.com/philippebeck/vesan.git`
or
[Latest Release](https://github.com/philippebeck/vesan/releases)
---
## Package
NPM : `npm i vesan`
or
Yarn : `yarn add vesan`
**If you choose to get Vesan from NPM or Yarn : you need to copy Vesan from *node_modules/vesan* to the root of your App**
---
## Installation
Install the frontend dependencies :
`$ npm install`
---
## Configuration
To configure the frontend constants, replace values :
`/src/config/values.example.js` *(then rename it /src/config/values.js)*
---
## Usage
To run the UI :
`$ npm start`
---
## Production
1. Compile the frontend :
`$ npm run build`
2. Then use the files of the dist folder for your prod UI
---
## Content
Elements Components :
- **BtnElt** *(Link & Button Elements)*
- **CardElt** *(Article & Section Elements)*
- **FieldElt** *(User Input & User Select Elements)*
- **FootElt** *(Footer Element)*
- **ListElt** *(List Element)*
- **MediaElt** *(Audio, Image, Quote & Video Elements)*
- **NavElt** *(Navbar & Sidebar Elements)*
- **SliderElt** *(Slider Element)*
- **TableElt** *(Table Element)*
Setters Components :
- **ArticleSet** *(Article Setter)*
- **GallerySet** *(Gallery Setter)*
- **ImageSet** *(Image Setter)*
- **LinkSet** *(Link Setter)*
- **OrderSet** *(Order Setter)*
- **ProductSet** *(Product Setter)*
- **ProjectSet** *(Project Setter)*
- **UserSet** *(User Setter)*
Main Views :
- **HomeView** *(Home)*
- **ContactView** *(Contact)*
- **LegalView** *(Legal notice)*
- **LoginView** *(Sign in, Sign up, Forgot password)*
- **ProfileView** *(User profile)*
- **ErrorView** *(Error)*
Data Views :
- **BlogView** *(Blog with articles list)*
- **ArticleView** *(Article of the blog)*
- **PortfolioView** *(Portfolio of projects)*
- **ShopView** *(Shop with products list)*
- **ProductView** *(Product of the shop)*
- **BasketView** *(Basket & order process)*
- **GalleryView** *(Galleries list)*
- **ImageView** *(Images of a gallery)*
- **LinkView** *(Links list)*
Services :
- **Checkers** : checkRange(), checkRegex(), checkRole()
- **Fetchers** : getData(), postData(), putData(), deleteData()
- **Getters** : getCats(), getItemName(), getItemsByCat()
- **Setters** : setError(), setGlobalMeta(), setMeta()
---
## Documentation
Available Demo :
- [**Animadio**](https://philippebeck.github.io/animadio)
Available Readme :
- [**Animadio**](https://github.com/philippebeck/animadio)