Thank you very much!

Hi guys,

i hope someone of you can help me.
Currently I struggle with the scripts inside the /src-ssr folder and the whole server side rendering.

I’m not an expert in JS but I know the basics.

My problem is that I cannot get my code inside the extension.js to work properly. Multiple problems appear:

1. I already tried to pass the express object via a parameter inside the extendApp() function. Like this:

// /src-ssr/index.js
extension.extendApp({app, express});

// /src-ssr/extension.js
module.exports.extendApp = function ({app, express}) {

My Intention behind this is to use the Router from the express object to learn more about express and the possibility to return json data needed inside my vue app (this RESTful api thing)
2. Even a simple console.log() doesn’t get executed on a rebuild. I need to rerun the quasar dev -m ssr command to get some output.

I think these issues are more or less something I misunderstood.

One last question:

• Is it possible to change the setup of quasar to actually use the /src-ssr/index.js in dev mode?

Let me know if you need further code examples.
Thanks in advance

EDIT:
Ok I figured out my 1. problem. Nevertheless are there new problems like a type error

TypeError: app.Router is not a function

I get this only when I stop the dev server. And this is the corresponding code:
let router = app.Router();
Even the express docs say that the function is there, also in the installed node_modules folder is the function.

 var proto = module.exports = function(options) {
  var opts = options || {};

  function router(req, res, next) {
    router.handle(req, res, next);
  }

  // mixin Router class functions
  setPrototypeOf(router, proto)

  router.params = {};
  router._params = [];
  router.caseSensitive = opts.caseSensitive;
  router.mergeParams = opts.mergeParams;
  router.strict = opts.strict;
  router.stack = [];

  return router;
};

Hi guys,

i hope someone of you can help me.
Currently I struggle with the scripts inside the /src-ssr folder and the whole server side rendering.

I’m not an expert in JS but I know the basics.

My problem is that I cannot get my code inside the extension.js to work properly. Multiple problems appear:

1. I already tried to pass the express object via a parameter inside the extendApp() function. Like this:

// /src-ssr/index.js
extension.extendApp({app, express});

// /src-ssr/extension.js
module.exports.extendApp = function ({app, express}) {

My Intention behind this is to use the Router from the express object to learn more about express and the possibility to return json data needed inside my vue app (this RESTful api thing)
2. Even a simple console.log() doesn’t get executed on a rebuild. I need to rerun the quasar dev -m ssr command to get some output.

I think these issues are more or less something I misunderstood.

One last question:

• Is it possible to change the setup of quasar to actually use the /src-ssr/index.js in dev mode?

Let me know if you need further code examples.
Thanks in advance

EDIT:
Ok I figured out my 1. problem. Nevertheless are there new problems like a type error

TypeError: app.Router is not a function

I get this only when I stop the dev server. And this is the corresponding code:
let router = app.Router();
Even the express docs say that the function is there, also in the installed node_modules folder is the function.

 var proto = module.exports = function(options) {
  var opts = options || {};

  function router(req, res, next) {
    router.handle(req, res, next);
  }

  // mixin Router class functions
  setPrototypeOf(router, proto)

  router.params = {};
  router._params = [];
  router.caseSensitive = opts.caseSensitive;
  router.mergeParams = opts.mergeParams;
  router.strict = opts.strict;
  router.stack = [];

  return router;
};

Thank you for your help. Until now I didn’t used vuex. I thought it is too much boilerplate. It is much easier than building a self build vuex like store.
I only needed to add around 50 lines of code to use vuex. Now everything works just fine and I can continue finishing my project.

I appreciate your help. Thank you

Thank you for your help but i don’t understand your solution completely. Originally I had the store as a class:
Store:

class Store {
    constructor() {
        this.state = {
            isHouseholdSelected: false
            //...
        }
    }
    //...
}
export const store = new Store();

I created it like this as a singleton.

And why do I need a computed property? Do you mean that I should define the called function from the store as a computed property?

Thank you very much!

Hello everybody,

i have following problem. I think it’s really simple to solve. But I can’t see my mistake.

I have the following files:

Store.js

export let store = {

    state: {
        isHouseholdSelected: false
    },
    setSelectedHousehold: function () {
        this.state.isHouseholdSelected = true;
    }

First.vue

export default {
      data() {
            return {
                  isHouseholdSelected: store.state.isHouseholdSelected
            }
      }
}

Second.vue

export default {
        methods: {
            selectHousehold: function () {
                store.setSelectedHousehold();
            }
        }
    }

Inside of Second.vue I trigger the method selectHousehold() and the value of isHouseholdSelected get changed. My understanding of vue is that it detects the change of the property inside of First.vue and rerenders the vue.

Is the problem that Second.vue is within First.vue through a router-view component?

Thanks in advance

Hello everyone,

i have a drawer on the left side of my layout. Is it possible to control it’s behaviour through the code of another template which gets loaded inside a router-view component?

I would appreciate any help.

Thanks!

@benoitranque Thank you very much. You helped me a lot!

Hello everybody,

i’m new to quasar and now I need to implement a simple state. Vuex is an option but it is too much for my needs.

I don’t no where to import my store.js. Currently this is my store.js:

//This is store.js
export default {

    store: {
        state: {
            message: 'Hello!'
        },
        duplicateMessage: function() {
            this.state.message += this.state.message;
        },
        halfMessage: function() {
            this.state.message = this.state.message.substr(0, this.state.message.length/2);
        }
    }
}

So I have two questions and I hope anyone can help me with this simple question.

1. Where should I import my store.js?
2. How can I use it inside my components? (How can I emit the events for changing the state)