Skip to content

JS model controller for your Nuxt.js project

License

Notifications You must be signed in to change notification settings

ramonsenadev/nuxt-models

 
 

Repository files navigation

nuxt-models

JS model controller for your Nuxt.js project.

Plugin use cases:

  • Keep common data standart.
  • Complement incomplete data getting by API.
  • Control data validity.

 

Installation

  1. Install plugin via npm or yarn

yarn add --dev nuxt-models

  1. Include plugin in nuxt.config.js
export default {
  plugins: [
    'nuxt-models'
  ]
}

 

Basic usage

  1. Describe a model. Create /models/person.js
export default {
  name: String,
  surname: String,
  age: {
    type: Number,
    validation: value => value > 0
  },
  gender: {
    type: String,
    validation: value => ['male', 'female', 'other'].includes(value)
  }
}
  1. Create an entity in Vue-component
const Person = this.$models.get('person', {
  name: 'Jack',
  age: 25
})

// returns an entity
// {
//   name: 'Jack',
//   surname: '',
//   age: 25,
//   gender: ''
// }

 

Model describing

Model is an object with described options. There is a simple model example:

// Simple person model with name only
export default {
  name: {
    type: String,
    default: 'Jack',
    required: true,
    hidden: false,
    validation: value => value.length > 1
  }
}

Option.type
Defines an option type
String, Number, Array, Object, Boolean

Option.default
Default option value, when entity creates.

Option.required
True/false state. If it's true, Entity.validation will return false if there is no value.

Option.hidden
True/false state. If it's true, Entity.values method won't include this option to return.

Option.validation
A function. Describes condition for correct option value.
If all validation rules of options return true, Entity.validation returns true.

 

Nested models

You may create entities with nested entities.

import Department from '@/models/department'

// Person model
export default {
  name: String,
  age: Number,
  department: {
    model: Department,
    value: 'title',
    hidden: false
  }
}

Option.model
Option with nested model.

Option.value
Option name of nested model. Entity.department will return its value.
Cannot be combined with "hidden" option.

Option.hidden
True/false state. If it's true, Entity.department will be added as hidden property.
Cannot be combined with "value" option.

 

Plugin methods

this.$models.create
Creates an entity by described model

const Person = this.$models.get('person', {
  name: 'Jack',
  age: 25
})

// returns an entity
// {
//   name: 'Jack',
//   surname: '',
//   age: 25,
//   gender: ''
// }

 

this.$models.get
Returns a model object

const PersonModel = this.$models.get('person')

// returns a model
// {
//   name: {
//     type: String,
//     required: true
//   },
//   surname: {
//     type: String
//   },
//   age: {
//     type: Number,
//     validation: value => value >= 0,
//     default: 0
//   },
//   gender: {
//     type: String,
//     validation: value => ['male', 'female', 'other'].includes(value)
//   }
// }

 

this.$models.clone
Creates a copy of existing entity with all values

const Person = this.$models.create('person', { name: 'Jack'} )
const AnotherPerson = this.$models.clone(Person)

console.log(Person.name) // Jack
console.log(AnotherPerson.name) // Jack

AnotherPerson.name = 'Mary'

console.log(Person.name) // Jack
console.log(AnotherPerson.name) // Mary

 

Entity methods

Entity.modelName
Returns a model name, entity was created by

const Person = this.$models.create('person')

console.log(Person.modelName) // person

 

Entity.model
Returns a model, entity was created by

const Person = this.$models.create('person')

console.log(Person.model)

// returns a model
// {
//   name: {
//     type: String,
//     required: true
//   },
//   surname: {
//     type: String
//   },
//   age: {
//     type: Number,
//     validation: value => value >= 0,
//     default: 0
//   },
//   gender: {
//     type: String,
//     validation: value => ['male', 'female', 'other'].includes(value)
//   }
// }

 

Entity.validation
Returns true/false state.
If it's true, all entity values are correct.
If it's false, some of entity values hasn't passed validation.
Values without validation returns true in any case.

const Person = this.$models.create('person')

console.log(Person.validation)
// return false
// because "gender" value hasn't passed validation

Person.gender = 'male'

console.log(Person.validation)
// return true
// all values have passed validation

 

Entity.values
Returns an object with all options and values.
Options with hidden property won't be included in object.

About

JS model controller for your Nuxt.js project

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.7%
  • HTML 8.3%