Quasar + Feathers-Vuex: how to integrate?

Question

I want to integrate Quasar with FeathersJS using Feathers-Vuex

Feathers-Vuex uses a pattern to:

• promise to authenticate from localStorage/cookies
• .then( /*start the new Vue() app */ )

I created my app with Quasar CLI 1.0.beta16-ish and looked through /src and couldn't find the main entry point for Quasar. I feel like I'm missing something.

What includes src/store/index.js?

quasar.conf.js includes this comment - where is the main.js

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot: ["axios"],

Feathers-Vuex includes a Nuxt integration guide that may solve the same problem. These packages are all new to me, and I'm excited to learn them!

Thank you!

Answer 1

The part of main.js is included in quasar app.js that you can find in .quasar folder. The src/store/index.js contains the Vuex Store definition. A "store" is basically a container that holds your application state.

For more detail visit - https://quasar-framework.org/guide/app-vuex-store.html https://quasar-framework.org/guide/app-plugins.html

Answer 2

I ended up with two things:

1. Adding Feathers-Vuex to my backend.
2. Adding this "boot file" in my Quasar project

The comments are a bread-crumb trail if I ever have to figure it out again :-)

/*
  Context: 

  For 3rd-party API's, we us /src/boot/axios.js

  For our own API's, we use FeathersClient (socket.io & REST)
  https://docs.feathersjs.com/guides/basics/clients.html
  https://docs.feathersjs.com/api/authentication/client.html#appconfigureauthoptions

  Our FeathersClient is in `/src/lib/feathersClient.js`
  and imported into `/src/store/index.js`
  which is imported by Quasar's build system.  /src/quasar.conf.js setting(?)

  Feathers-vuex integrates Vuex with FeathersClient:
  https://feathers-vuex.feathers-plus.com/auth-module.html

  Feathers-Vuex proxies it's authentication/logout actions to FeathersClient
  https://github.com/feathers-plus/feathers-vuex/blob/master/src/auth-module/actions.js

  The parameters for these actions are here:
  https://docs.feathersjs.com/api/authentication/client.html#appauthenticateoptions

  In addition to this module, you can use FeathersVuex state in UI from here:
  https://feathers-vuex.feathers-plus.com/auth-module.html


  This module:

  Create a Feathers Auth integration for Vue as a Quasar Boot Module. 

  // Use case: test if user is authenticated

    if (Vue.$auth.currentUser()) { ... }

  // Use case: get current user's email

    name = Vue.$auth.currentUser("email") || "anonymous"

  // Use case: Login

    Vue.$auth.login({
      strategy: 'local',
      email: 'my@email.com',
      password: 'my-password'
    });

  // Use case: Logout

    // logs out and sends message
    let p = Vue.$auth.logout();
    // After logout, go home
    p.then(() => {
      // User data still in browser
      router.push({ name: "home"});
      // To clear user data, do a hard refresh/redirect - https://feathers-vuex.feathers-plus.com/common-patterns.html#clearing-data-upon-user-logout
      location && location.reload(true)
    }); 

 */

export default ({ app, router, store, Vue }) => {
  // Create the API demonstrated above
  const auth = {
    currentUser(prop) {
      let u = store.state.auth.user || false;
      if (u && prop) return u[prop];
      return u;
    },
    login(authData, quiet) {
      return store
        .dispatch("auth/authenticate", authData)
        .then(() => {
          Vue.prototype.$q.notify({
            message: "Welcome back!",
            type: "info"
          });
        })
        .catch(err => {
          if (!quiet) {
            console.log(err);
            Vue.prototype.$q.notify({
              message: "There was a problem logging you in.",
              type: "error"
            });
          }
        });
    },
    logout(quiet) {
      return store.dispatch("auth/logout").then(() => {
        if (!quiet)
          Vue.prototype.$q.notify({
            message: "You've been logged out.",
            type: "info"
          });
      });
    },
    register(authData) {}
  };

  // Auth from JWT stored in browser before loading the app.  true => suppress token not found error
  auth.login("jwt", true);

  // Add API to Vue
  Vue.prototype.$auth = auth;

  // If you would like to play with it in the console, uncomment this line:
  // console.log(auth);

  // Then, in the console:
  /*
    temp1.login({
      strategy: "local",
      email: "feathers@example.com", 
      password: "secret" 
    })
  */

  // If you haven't created this user, see here:
  // https://docs.feathersjs.com/guides/chat/authentication.html
  // For this REST api endpoint
  /*
    curl 'http://localhost:3001/users/' -H 'Content-Type: application/json' --data-binary '{ "email": "feathers@example.com", "password": "secret" }'
  */
};