0.0.198 • Public • Published

    Build status

    The RAM Frontend Vue Component Library

    See the wiki for more details

    This library contains all the "smart" components to be used in the Vue frontend.

    Styling is based on Vuetify and the Vuely theme.

    The components will accept a "user" prop, in conjuction with other component specific props. This will enable the component to be smart about the permissions allocated to the user.

    It will also enable the components to be fully reusable throughout the various frontend applications.


    There is a sample component included called src/SampleComponent.vue that can be used as a reference.

    Using The Package

    Install the package into a vue project by using: npm install --save ram.vue.components.lib You can view the package page over here

    Building The New Package Version

    After creating a new component, or editing an existing one, be sure to:

    • Register it in ./src/index.js - Only if it is a new component
    • Update the version number in package.json as per Semantic versioning
    • Commit your changes and do a pull request to 'master' branch
    • Once reviewed and no comments that require additional work then continue with the following two points
    • When the branch is merged into master then the package will be built and published to NPM

    Best Practice

    Keep only the required logic as needed and no more Components should not make any API calls or modify the state in anyway Any data the component requires for rendering, validation, or computation should be passed in as 'props' The component should be reactive and '$emit' all events required to the parent component

    User object

    The components require the user object to be defined in an object with a structure similar to this: { "UserID": 432, "UserEmail": "someone@somewhere.co.za", "FirstName": "Someone", "LastName": "Doe", ... "Permissions": [ { "ID": 123, "CanCreate": false, "CanEdit": true }, { "ID": 25, "CanCreate": false, "CanEdit": false }, { "ID": 567, "CanCreate": true, "CanEdit": true } ] }

    This user object should be stored in the Vuex state store and passed in as a prop to each component.




    npm i ram.vue.components.lib

    DownloadsWeekly Downloads






    Unpacked Size

    2.43 MB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar