Introduction

Introducing Shfrontend: Your Instant Vue.js Development Framework

Are you a developer staring at a blank screen, wondering how on earth you'll summon the courage to start yet another Vue.js project from scratch. Are you Feeling like you've hit the "refresh" button on your creative energy just a few too many times? Well, dust off that old wizard hat and grab your enchanted mouse, because Shfrontend is here to grant your development wishes faster than you can say "abracadabra"!

Welcome to Shfrontend, your ultimate solution for accelerating Vue.js development projects with ease! Shfrontend is a powerful framework designed to streamline the creation of stunning web applications by leveraging Bootstrap components and a collection of essential features. It uses Bootstrap 5 for styling and is designed to be used with Vue 3 applications.

Getting Started

To get started, make sure you have a Vue 3 application set up using Vite. If you don't have one, you can set up a new Vue 3 application using Vite by running the following command.

npm init vite@latest

Installation

Install this package in your existing or freshly installed vue 3 framework using vite

npm install @iankibetsh/shframework

or

yarn add @iankibetsh/shframework

usage

Import and use the package in your main.js or the entry file for your Vue 3 application.

import {ShFrontend} from '@iankibetsh/shframework'

Then use it this way.

app.use(ShFrontend,{
    sessionTimeout: 400,
    loginUrl: '/sh-auth',
    registerEndpoint: 'auth/register',
    forgotEndpoint: 'auth/forgot',
    logoutApiEndpoint: 'auth/logout',
    registerTitle: 'Welcome, create a new account',
    registerSubTitle: 'Create a new account to access the system',
    redirectRegister: '/login',
    loginTitle: 'Login to your account',
    redirectLogin: '/dashboard',
    tablePaginationStyle: 'loadMore',
    tablePerPage: 20,
    toastTimer: 5000
})

Here is the explanation.

1. sessionTimeout: This is the time in minutes that the user will be logged out if inactive.
2. LoginUrl: This is the url that the user will be redirected to when they are not logged in.
3. registerEndpoint: This is the api endpoint that will be called when the user registers.
4. forgotEndpoint: This is the api endpoint that will be called when the user forgets their password.
5. logoutApiEndpoint: This is the api endpoint that will be called when the user logs out.
6. registerTitle: This is the title that will be displayed on the register page.
7. registerSubTitle: This is the subtitle that will be displayed on the register page.
8. redirectRegister: This is the url that the user will be redirected to after registering.
9. loginTitle: This is the title that will be displayed on the login page
10. tablePaginationStyle: This is the style of pagination that will be used in the table. It can be either 'loadMore' or 'pagination'
11. tablePerPage: This is the number of items that will be displayed per page in the table.
12. toastTimer: This is the time in milliseconds that the toast will be displayed.