Notable Pottery Manufacturer
    Wondering what’s next for npm?Check out our public roadmap! »

    @adelholtz/vuetility
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Vuetility (README)

    1. Todo
    2. Prerequsisits
    3. Latest version
    4. Installation
    5. Introduction

    TODO

    • allow/forbid undefined and null values for Model Properties
    • core implementation for non namespaced stores

    Prerequsisits

    • Vue [vuejs.org]
    • Vuex [vuex.vuejs.org]
    • ...and a basic understanding of how both of these work (together)

    Latest version

    npm version

    2.*

    • rework of how computed variables are created

    Installation

    npm install @adelholtz/vuetility
    
    yarn add @adelholtz/vuetility
    
    

    Introduction

        <input
            :value="Model.idn"
            @input="updateState" // provided by vuetility
            vuet-path="Model.idn"
        />
    //computed structure
    computed: {
        Model() {
            return { ...this.$store.getters['Estimation/estimationModel'] }
        },
    }

    Vuex is great but in my opinion its lacking something very basic. In every Vue project i came across so far you have to write the same computed properties in different components over and over again. Sure, you can streamline this by using various different approaches but the problem stays the same and you will have to overcome this in every new project thinking about the best way to organize things. Thats why i came up with this little 'plugin', 'wrapper' 'addition' or whatever you'd like to call it.

    This does not reinvent Vuex in any way, it does not temper with the core of Vuex or Vue!

    I see Vuetility, Vuex and Vue like a Matryoshka, consisting of several layers which build upon each other enhancing the layer beneath giving them access to more features and convenience functions.

    What is Vuetility then in general?

    Vuetility contains basic logic for generic (Vuex)store and (Vue)component usage, by auto-generating (Vue)computed properties and (Vuex)state variables from provided models.

    It also gives you access to a set of predefined mutations which you can use with every state variable in your stores/modules.

    The model can/must also contain:

    • a renderer per property.
    • default values
    • exact type definitions (String, Boolean etc.)

    Project Goals:

    • no need to write any computed properties for your models properties in your custom component
    • no need to write code in your store that handles the update/setting process of model data
    • support of multiple models per store/component

    Documentation: https://adelholtz.github.io/vuetility/

    Please let me know if the usage instructions and example are unclear in any way and should be improved!

    Keywords

    none

    Install

    npm i @adelholtz/vuetility

    DownloadsWeekly Downloads

    79

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    2.94 MB

    Total Files

    43

    Last publish

    Collaborators

    • avatar