@jitendra84/fulcrum-framework v1.2.4

fulcrum-framework

Add library to project

npm install @jitendra84/fulcrum-framework

or

yarn add @jitendra84/fulcrum-framework

Initialize framework :

import FulcrumFramework from '@jitendra84/fulcrum-framework'
import {Utils} from '@jitendra84/fulcrum-framework'

Vue.use(FulcrumFramework)
Vue.mixin(Utils)

Setup quasar in project

This framework uses third-party UI framework Quasar

1. https://quasar.dev/introduction-to-quasar

2. https://quasar.dev/quasar-cli/quasar-conf-js

If project is in Vue-CLI

• run js add quasar in command-line to install quasar plugin
• in 'quasar.js' keep only styles and remove rest of the thing to include styles from quasar

Components

1. MyCalendar

• Name: 'my-calendar'
• Usage: <my-calendar :events:"events">
• props:
  • events : data
  • @eventCreated : method
  • @eventDeleted : method
  • @eventEdited : method
• Example:

<template>
    <div>
        <MyCalendar
                :events="events"
                @eventEdited="onEventEditCallback"
                @eventDeleted="onEventDeleteCallback"
                @eventCreated="onEventCreatedCallback"/>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                events: []
            }
        },
        components: {
            MyCalendar: MyCalendar
        },
        methods: {
            onEventCreatedCallback(event) {
                
            },
            onEventDeleteCallback(event) {
                
            },
            onEventEditCallback(event) {
               
            }
        }
    }
</script>

<style>
   @import '~@jitendra84/fulcrum-framework/dist/lib.css';
</style>
           

Mixins

• Import Mixins

  import {Utils} from '@jitendra84/fulcrum-framework'
  Vue.mixin(Utils)

• Usage

  this.success({message: "Event has been edited successfully"});

Start Storybook

https://storybook.js.org/docs/guides/guide-vue/

• run command yarn run storybook:serve in command line to serve the storybook web UI

References

1. https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3

2. https://www.telerik.com/blogs/vuejs-how-to-build-your-first-package-publish-it-on-npm