https://github.com/wdmtech/feathers-vuex-todomvc

Feathers-vuex TodoMVC demo
https://github.com/wdmtech/feathers-vuex-todomvc

feathers feathers-vuex vue vuex

Last synced: 4 months ago
JSON representation

Feathers-vuex TodoMVC demo

• Host: GitHub
• URL: https://github.com/wdmtech/feathers-vuex-todomvc
• Owner: wdmtech
• Created: 2018-09-15T12:33:19.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T02:28:29.000Z (over 1 year ago)
• Last Synced: 2024-01-08T00:40:44.778Z (6 months ago)
• Topics: feathers, feathers-vuex, vue, vuex
• Language: JavaScript
• Homepage:
• Size: 1.24 MB
• Stars: 29
• Watchers: 6
• Forks: 5
• Open Issues: 31
• Metadata Files:
  • Readme: README.MD

Lists

• awesome-feathersjs - Feathers-Vuex (Vue.js) TodoMVC example project

README

        
![logo.png](logo.png)

# Feathers-vuex TodoMVC demo

This project takes the existing [Vue](https://vuejs.org) [TodoMVC demo](https://vuejs.org/v2/examples/todomvc.html) and adds [Feathers](https://featherjs.com), and [Feathers-vuex](https://feathers-plus.github.io/v1/feathers-vuex) awesomeness!

In short, this stack makes it really simple to get reactive updates in Vue from a Feathers.js server, through Vuex.

 

It’s a beautiful combination of full-stack tech.

# How to get started

First, clone this repo

`git clone [email protected]:wdmtech/feathers-vuex-todomvc.git`

## Server (Feathers)

`cd server`

`npm install`

`npm run start`

## Client (Vue)

`cd client`

`npm install`

`npm run serve` or `vue ui` if you have [vue-cli 3](https://cli.vuejs.org/) or later.

Navigate to the url displayed (default `localhost:8080`) to view in your browser:

![preview.png](preview.png)

# Still to do - contributions welcome!

- [ ] Filter todos using [reactive live queries](https://feathers-plus.github.io/v1/feathers-vuex/common-patterns.html#Reactive-Lists-with-Live-Queries)

# Why?

I built this because there seemed to be a need for examples containing actual implementation of Feathers with Vue and Feathers-vuex.

# Further information

## CRUD operations in the UI

The [Models and Instances API](https://feathers-plus.github.io/v1/feathers-vuex/model-classes.html) is used to create/remove/edit todos, and there is also an example [implementation](https://github.com/wdmtech/feathers-vuex-todomvc/blob/master/client/src/mixins/TodosMixin.js) that illustrates receiving events from the server on the client.  

## `todos` service

### …on the client

The service is defined in feathers-vuex: [./client/src/store/services/todos.js](https://github.com/wdmtech/feathers-vuex-todomvc/blob/master/client/src/store/services/todos.js)

This is then loaded by the store: [./client/src/store/index.js](https://github.com/wdmtech/feathers-vuex-todomvc/blob/master/client/src/store/index.js)

### …on the server

#### Initial todo data

The `todos` service is seeded with some initial data, in [./server/src/services/todos/todos.service.js](https://github.com/wdmtech/feathers-vuex-todomvc/blob/master/server/src/services/todos/todos.service.js)