Vuetility

# Vuetility (README)

# Work in progress

This project is still work in progress and (can be) heavily subjected to core and implementation changes. The Project is fairly stable as of Version 0.5.0 and shouldn't be changed to drastically anymore but changes to mutations, mutation names and core implementations may still happen.

Refer to the Latest Version section for more information on bigger or interesting changes, as i will always state them there.

Also refer to the Todo section to check on what is to come in the future or what changes are due to happen to this project in the near future

# TODO

  • deep level model support
  • stacked model support
  • provide better examples and a better complete example implementation
  • enhance documentation as a whole
  • write/add missing tests

# Prerequsisits

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

# Latest version

npm version

0.7.0

  • some basic code refactors
  • removed console.log calls and other debug related stuff
  • replaced some lodash methods with native js (ongoing process)
    • the goal is to completely remove lodash from the code
  • improved documentation

0.6.0

  • lodash is no longer required to be available in global scope
  • added NuxtCore module
  • added possiblity to use vuetility in nuxt
  • model types can now be defined as either strings or 'direct' types
    • for example
      • 'String' or String
      • 'Array' or Array

0.5.1

  • fix Readme.md
  • move dev-packages to dev-dependency

0.5.0

  • added a new model property: allowUndefined
    • allows values to explicitly be set to 'undefined' (this had been removed on 0.4.5)
  • added basic structure for stores without modules
    • Attention: complete functionality still needs to be added

0.4.2

  • rename externally available mutations to ensure uniqueness of methods
    • updateObject is now deprectad and should not be used anymore; instead use one of
      • vuet-updateStateByModel
      • vuet-updateModel
  • add new mutation vuet-updateStateByModel
    • this is basically a more intelligent implementation of vuet-updateObject but provides a bit less freedom
    • see: Updating state variables
  • add new mutation vuet-updateModel
  • reimplemented/fixed missing/broken tests

0.4.1

  • add typescript module declaration
  • add better Documentation
  • reintroduce type security

0.4.0

  • complete rewrite of the core concept!
  • vuetility is now a Vue Plugin
  • code is more lean and adaptable for future changes
  • this version is not compatible with earlier versions and if you want to upgrade you will have to do a rewrite of your component structure by following the Usage instructions below

# Introduction

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 examples are unclear in any way and should be improved!

Getting started →