A better collections plugin for Vue.js
npm install vue-collections
import Vue from 'vue'
import VueCollections from 'vue-collections'
Vue.use(VueColections)
Clone the repository and run npm start
or view a live demo here.
A light implementation of collections in Vue.js that binds a collection of models to a Vue instance, and transforms collection data based on schemas. More information about transforming model data with schemas in vue-models.
import { Collection } from 'vue-collections'
export default {
collection() {
return new Collection({
basePath: 'tenants'
})
},
created() {
this.fetch()
},
methods: {
fetch() {
return this.$collection.fetch()
}
}
}
The basePath
option will determine the path of the URL following the base path of the API, which is set in ./configs
The createPath
option is optional and will be appened to the API path following basePath
, if included.
These options allow you to fetch your collection at localhost:3456/tenants
and to create new users at localhost:3456/tenants/invite
.
The main reason why this simple wrapper is useful is that the options you pass to it will maintain the location of the endpoints you need when you want to dispatch CRUD events via dispatch('fetch')
, dispatch('create', model)
, dispatch('update', model)
, or dispatch('delete', model)
.
The Collection wrapper will also server as a control layer between the websocket server and the Vuex data store, when using websockets to subcribe to a collection of models.
Optionally, you may pass in a vue-models
model class, which will transform the data in each of the models per the model's schema.
# install dependencies
npm install
# serve demo at localhost:8080
npm start
# run tests with jest
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.