Feathers-vuex: Can't find a working example application

[findingorder]

For a few days now I've been searching in vain on the web for a working example application that I can use as a starting place for learning feathers-vuex. The obvious choice would be https://github.com/feathers-plus/feathers-chat-vuex, but it is quite out of date and throws all sorts of errors when you try to build and run it.

Does anyone know of a good, current, working example application that I can download and run on my local computer?

BTW, the demo application referenced in README, https://codesandbox.io/s/xk52mqm7o, is nice, but I can't figure out how to run it outside codesandbox.io. If someone could explain how to do this, that might be the answer to my problem.

Thanks in advance!

[marshallswain]

I agree. An up-to-date demo application would be nice to have. Until one turns up, you'll probably have better luck copying and pasting from the documentation. I recommend starting out with the PR for the pre-release: https://github.com/feathers-plus/feathers-vuex/pull/216. There's a decent section on getting started that you should be able to copy and paste into a new project.

Someday I will create time to create a demo application. In the meantime, we're happy to answer questions on Slack in the #vue channel.

[lturel]

Hi Marshall, explanations in #216 very detailed, thank you for that. I tried a simple starting project in Feathers V4 + Authentication and Feathers-Vuex 2.0 (pre-75), and could not get to create a new user in 'users' table with default fields (email and password).
I imagine, you are very busy with issues of new version, but a simple Todo app with Feathers V4 + Authenticaton using Feathers-Vuex 2.0 would be very helpful.
Thanks a lot.

[eikaramba]

it is the same currently for me. i was able to setup a feathers backend together with a Feathers V4 + feathers-vuex 2.0 frontend based on the information available in #216 - but now i'm struggling to make the simplest CRUD operation work (i have to admit that i am a reactive noob and used a simple REST client before without any store or anything, but i want to learn!)

If you could make a really simple example i think that would help a lot of us a lot of time :)

[eikaramba]

i made it work! Basically just follow ALL steps in #216. Might be silly to post it here, but maybe i can help another noob with that :)
3 hints that were helping:
1) Create the vue.config.js file in the root directory with the following content. i thought that is only needed if you use TS. but nope, using JS you need that too.

module.exports = {
  transpileDependencies: ["feathers-vuex"]
};

2) Remeber to add your api prefix to this.$FeathersVuex
3) Try to disable authentication for the sample feathers users find hook ;)

Now creating a user and retrieving them works like this

<template>
  <div class="about">
    <h1>users</h1>
    <form @submit.prevent="createUser">
        <input v-model="user.email">
        <input v-model="user.password">
        <label>Create New User: {{user.email}}</label>
        <button type="submit" :disabled="!user.email">Create</button>
    </form>
    <div v-if="loading">Creating...</div>

      <div v-for="user in users().data" :key="user._id">
          {{ user.email }}
      </div>
  </div>
</template>


<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  name: 'about',
  data: () => ({
    user: {
      email:'',
      password:''
    }
  }),
  computed: { // only getters have live queries
    ...mapGetters('users', {users: 'find'}),
    ...mapState('users', {loading: 'isCreatePending'})
  },
  methods: {
    createUser(){
      const { User } = this.$FeathersVuex.api;
      const user = new User(this.user);
      user.save().then(user => {
        console.log(user);
        // this.$router.push('/');
      })
    },
    ...mapActions('users', ['create', 'remove', 'find'])
  },
  created: async function () {
    await this.find().then(function(data){
      console.log("show me the users",data);
    })
  }
}
</script>

[lturel]

Hey eikaramba, thanks for the information you provided.
For not missing the links or some critical detail, could you give the link for complete source on GitHub, if exists. Or zip file which we can download.

Thanks in advance,

[eikaramba]

That is unfortunately not so easy, but i can guarantee you that i just used feathers-cli to setup a folder /backend with the standard configuration. i didn't do anything there apart from removing the authentication hook for the find service

on the frontend i created a folder /frontend and used the vue-cli to setup a js project with vuex and router. Then follow the guide on https://github.com/feathers-plus/feathers-vuex/pull/216 and you should be ready to go.

[lturel]

@eikaramba, super.
Thanks for guiding,
All the best.

[J3m5]

I'm working on an example app, I'll submit a PR soon.

[findingorder]

Thanks for your responses, everyone. I see I'm not the only noob struggling with this.

It's beyond the scope of this thread, but what I really want is a ready-to-roll scaffold that has Quasar for the client, and vuex + feathers on the back end, with authentication built and working on both client and server. This would free me up to start writing Vue components and creating data schemas without spending so much time on "plumbing". Might have to assemble this myself.

[findingorder]

Leaving the thread open in case others want to comment, but the feathers-plus/feathers-vuex maintainers are free to close whenever they deem appropriate.

[pcrombach]

As far as I understand is Vuex a frontend thingy, not backend. I’m rebuilding an old Angular / Ionic v1 / and feathers-vuex v1 frontend into a Vue with Ionic v4 with feathers V2 frontend. I was thinking about to start a blog about the steps I made. If there are more people waiting for this, let me hear about you.

[findingorder]

Yes, of course. I should have said Feathers on the backend, and Vuex on the front end syncing with Feathers on the back end.

[wdmtech]

I made this some time ago, and it should still work

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

[dkebler]

https://git.kebler.net/Light2/frontend/src/branch/v1 (v1 branch)
I have 2.0 pre FV working in this app/repo above. Anyone welcome to look/clone.
It's part of a larger quasar app! @findingorder so might be a bit confusing unless you are already familiar with quasar. What this app really is a specific application of a generic quasar/feathers front/backend I am working on. In short you make a service schema in yaml in the backend and boom in the front end you will see a fillable form for all keys in the schema. Still a work in progress and I need it get my specific version deployed for a client but before xmas hope to have generic frontend/backend "stack" up at github that one can then customize. What would that be?? QVFN (Quasar Vue(x) Feathers NeDB)

So back to ops question

I used a boot file (a quasar thing for loading vue plugins) /src/boot/database.js to load FV later after the store was created in src/store.index.js so I could grab the service names from the backend and then dynamically create the FV plugins instead of hard coding the services using this trick https://stackoverflow.com/questions/50959594/dynamically-register-a-vuex-plugin

It does that via function in /src/store/vuex-feathers below which uses a createModelClass function to create a model class on the fly. See #271

import fVuex from 'feathers-vuex'

const addFeathers = async (store, db, opts = {}) => {
  store.state.services = db.collections

  const { makeServicePlugin, BaseModel } = fVuex(db.api, { serverAlias: opts.alias || 'api' })

  function createModelClass (name, Base) {
    const nameIt = (name, cls) => ({ [name]: class extends cls {} })[name]
    class Model extends Base {
      constructor (data, options) {
        super(data, options)
        this.modelName = name
      }
    static modelName = name
    }
    return nameIt(name, Model)
  }

 // registering plugins dyanmically here per a trick
// https://stackoverflow.com/questions/50959594/dynamically-register-a-vuex-plugin
  db.collections.forEach(name =>
    makeServicePlugin({ Model: createModelClass(name, BaseModel), service: db.api.service(name) })(store)
  )
}
export default addFeathers

[lturel]

An example project utilizing Feathers 4 + Authentication + Vue + Feathers-Vuex 2.0 + Vuetify.
It includes Login, SignUp, Logout and access to secret pages after successful login.

https://github.com/lturel/Feathers4-Vue-FVuex2.git

[knowsarzehmeh]

Any example project for utilizing Feathers 4 + Authentication + Feathers vuex with Nuxtjs?

[lturel]

@knowsarzehmeh, currently, Nuxt cli uses Feathers 3.3.1 during creation of boilerplate, if you choose server framework as Feathers. Better to wait until they update for Feathers 4.

[janzheng]

@lturel if you don't mind, I created a quick demo that reconfigures a lot of your code to work with the feathers-chat server example. That feathers-vuex documentation is quite the pain for someone new to feathers. Anyway, here's the repo if it helps anyone: https://github.com/janzheng/feathers-vuex-chat

[marshallswain]

@janzheng that's a really good point. The docs pretty much assume knowledge of Feathers. There's not a beginners section. It's ironically funny because just before reading your message, I was looking in amazement at how much documentation I've written for feathers-vuex. Yet, still, there's so much more that could be done.

I'm really happy to see that a lot of community members have started contributing. That has been really supportive. Thank you.

I'm wrapping up tests and documentation for Feathers-Vuex 3.0. Once complete, I'm going to create a new demo application using the Vue Composition API.

[janzheng]

@marshallswain Thanks for all your hard work!!! The docs are super in-depth! I just got through the feathers-chat example, but had trouble continuing recreating the example in vue/vuex, from a "how do I hook up a client to the server I'd just built in feathers." I think I still kind of lack the basic context of how "feathers works" — I realized that a lot of the material on the tutorial is super advanced stuff and not required to just find or create data — but after playing with it I keep thinking "wow this is so easy...!" so that's really good ;)

that's awesome, and really looking forward to seeing the new demo with Composition!

[lturel]

@janzheng thanks for adding feathers-chat example.
It will be very useful for novice programmers on feathers like me :)

[marshallswain]

We have a new page for keeping track of example applications: https://vuex.feathersjs.com/example-applications.html. It includes the recent refactor of the example Feathers Chat app built on the newest [email protected].

Please feel free to add any other examples you find to the list in the docs.

[akvaliya]

Any example with nuxt?

[marshallswain]

@akvaliya Yup! in the docs: https://vuex.feathersjs.com/common-patterns.html#full-nuxt-example

[pliersch]

Hello, i cant find the source code of the full nuxt example. I'm blind?

[marshallswain]

It’s directly in the docs. Not in a repo

Sent from my iPhone

On May 12, 2020, at 1:30 AM, Patrick Liersch [e-mail] wrote:


Hello, i cant find the source code of the full nuxt example. I'm blind?

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or unsubscribe.