vesan

Vesan is a Frontend Framework made with Vue 3, TypeScript & Animadio
Includes Axios, Font-Awesome, Recaptcha, PayPal, Sass, TinyMCE, Vitest & Cypress

WARNING: build is not ready yet on the version 3 (alpha mode)
For production ready: use the last version 2

Migration of all scripts from JS to TS in progress (~ 90%)
Migration of the tests from Jest to Vitest in progress too (~ 70%)

Migration from Option API to Composition API soon
Migration of the store from Vuex to Pinia soon
Added e2e tests with Cypress soon too

• vesan
  • Recommended IDE Setup
  • Type Support for .vue Imports in TS
  • Customize configuration
  • Download
  • Package
  • Configuration
  • Project Setup
    • Compile and Hot-Reload for Development
    • Type-Check, Compile and Minify for Production
    • Run Unit Tests with Vitest
    • Run End-to-End Tests with Cypress
    • Lint with ESLint
  • Content
    • Elements Components
    • Setters Components
    • Main Views
    • Data Views
    • Services
  • Documentation

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Download

Use this Template
or
git clone https://github.com/philippebeck/vesan.git
or
Latest Release

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

Configuration

To configure the frontend constants, replace values :
/src/assets/values.example.js (then rename it /src/assets/values.js)

Project Setup

npm i

Compile and Hot-Reload for Development

npm start

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

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(), checkSlot()
• Fetchers : getData(), postData(), putData(), deleteData()
• Getters : getCats(), getItemName(), getItemsByCat()
• Setters : setError(), setGlobalMeta(), setMeta()

---

Documentation

Available Demo :

• Animadio

Available Readme :

• Animadio