No More Posting New Topics!

daniel

@beets I have to admit that I am not a full-time frontend developer. So, currently I am speechless, never heard about this before. This is definitely a very good advise - removing libs from the bundle. Thanks again.

daniel

@beets Definitely. And what about the page speed and size? Our SPA has a huge JS file)s), about 700K which is necessary for the index page (vendor*.js). I tried to reduce its size but without luck. Is the size of the JS files still the same with SSR?

daniel

@beets That would be nice. Personally I created only SPAs so far. But SPA has a few drawbacks and I’m dealing with SSR for some time.

daniel

@beets WOW - that’s incredible. I think I need some time to understand it. Thank you very much!!!

daniel

@beets This sound very interesting. Is it possible to show how you achieved that (i.e. showing the quasar.conf.js)? Maybe we can use this approach for the next project.

daniel

@beets Thanks. The webpack “command” is perfekt. Because the JS and CSS assets are the “biggest” assets, it is important, that these are served by S3.

daniel

@dobbel The content of the public folder (dist/spa) is copied to Amazon S3 during the pipeline build by gitLab.

daniel

Hi,

we are building a Quasar SPA which has to use a CDN. This means, that every asset (generated JS files, images and so on) is deployed to an AWS S3 bucket.

So, I configured the CDN in quasar.conf.js by setting the publicPath:

   ...
   build: {
      ...
      vueRouterMode: 'hash',
      publicPath: 'AWS_S3_URL',
     ...
   }
  ...

This adds a base TAG:

<html>
   <head>
     <base href="AWS_S3_URL" >
     ....

So far so good. The problem is, that in case of reloading a page or using the back - button of the browser, the page will be blank and a JS error in the JS console appears:

SecurityError: Blocked attempt to use history.replaceState() to change session history URL from MY_URL to AWS_S3_URL. [...]

And

TypeError: undefined is not an object (evaluating 'l.matched')

It seems, that the CDN URL is causing a couple of problems here with the vue-router.

So, my question is: is there another way to set up a CDN? Is this the intended way to use a CDN by setting a base TAG?

Thanks for your help.

Best regards,
Daniel

daniel

Hi,

the q-stepper is the perfect fit for our use case. The only thing I’m missing is the ability to go back one step using the back button of the browser. Currently, when using the back button, the previous page (not the step) is shown, which means, when I navigate from the welcome page to the page with the stepper, pressing the back button of the browser navigates me (back) to the welcome page.

<template>
    <q-stepper v-model="step">
      <q-step :name="1" :done="step > 1">Start</q-step>
      <q-step :name="2" :done="step > 2">Middle</q-step>
      <q-step :name="3">End</q-step>
    </q-stepper>
</template>

For example: I’m currently in step 2. Pressing the back button should navigate me back to step 1.

Is there a way to use / configure the back button to go back a step? I read in a different post, that there might be a way to combine Vue router and the stepper. But I’ve no idea how to do this.

I appreciate your help.
Thanks in advance.

Best regards,
Daniel

daniel

@metalsadman Thanks for your help. I changed it according to the post you mentioned.

daniel

@metalsadman I saw that post, but I was wondering, why I’ve to change that file (which was created by the quasar cli). I thought that the creators of quasar had a special intention of writing it that way.

daniel

Hi,

I’ve some problems accessing the store within a service class. I created this service:

import Store from 'src/store'

export class DemoService {
    public static doSomething (): void {
      Store.???
   }
}

I am not able to access any store methods. The default export in src/store/index.ts is not a Vuex.Store object. Honestly, I am not sure what it is
It was generated by the quasar CLI and looks like this:

export default store(function ( {Vue} ) {
   Vue.use(Vuex)

  const Store = new Vuex.Store<StateInterface>( {
    modules: {
        ....
    },
    ...
  })
  return Store
}

My question is, how can I use the store within my service method? Do I have to pass the store as a method parameter?

Thanks in advance.
Best regards,
Daniel

daniel

I’ve the same problem. I am not using vue3! I created a Quasar project with typescript support. But when I am trying to access the store, I’ll get the same error.
My current workaround is casting the state to the interface created in the index.ts file in the store folder. In your case the cast would look like this:

(<StateInterface> this.$store.state).user

daniel

@tof06 Thank you so much. Now, it’s working!

daniel

@tof06 I tried your suggestion, but without luck. Please see my post above. Thanks again.

daniel

@tof06 Thank you so much for your help.

So, I changed it as you suggested. But: now I have a new problem. hasError is always false. I changed my template to:

<q-input
   filled
   v-model="model"
   @input="(value) => setModelValue(value)"
   label="Maximum 3 characters"
   debounce="1500"
   ref="modelRef"
   :rules="[ val => val.length <= 3 || 'Please use maximum 3 characters']"
>

Model is now a data property:

data () {
    return {
      model: "0",
    }
  }

and the setModelValue method looks like this:

setModelValue (value) {
  let isValid = this.$refs.modelRef.validate()
  // or: this.$refs.modelRef.hasError
  if (!isValid) {
    return
  }
  ...
}

If I enter an invalid value, isValid is true and this.$refs.modelRef.hasError is false. But the error message on the input field is shown, which means, the input is invalid. If I enter an other invalid value, isValid is now false. In case of a correct value, isValid is still false. Only if I enter an other valid value, isValid is true. It seems, that the validation state is one validation behind.

So, I do not unterstand why calling validate() returns true (which means, no validation error), but the correct error message is shown? What have I done wrong?

Best regards,
Daniel

daniel

Hi everyone,

On my page I use a q-input to collect a value from the user. The changed value triggers the execution of a method:

    <q-input
      filled
      v-model="model"
      label="Maximum 3 characters"
      :rules="[ val => val.length <= 3 || 'Please use maximum 3 characters']"
    />

During typing, the value of ‘model’ is used to fetch data from server by calling doAction:

    model: {
      get () {
         ...
      },
      set (value) {
         this.doAction(value)
     }
  }

The problem is that the doAction method is called even if the value is invalid. The setter is called before the validation takes place.
And this confuses me. In case of a validation error, I expected that the model value wouldn’t change, because this is the intention of validation - to only set valid values.

So, do I miss something? How can I be sure that only valid values are set - or how can I ensure that doAction is only called if the validation doesn’t fail?

Thanks for your help.
Best regards
Daniel

daniel

@walfin Thanks for your help. I changed the boot file to:

export default async ({ store, app }) => {
  await axios
    .get(...)
    .then(response => {
      ...
    })
}

And now it’s working as expected.

daniel

@s-molinari Thank you so much. This helped!

daniel

@s-molinari I already tried this, but with no luck. How can I do this? My boot file looks like this:

  axios
    .get('https://URL/token')
    .then(response => {
      // here I have my roles
    })

So, how can I make the axios call synchronous?

No More Posting New Topics!

Posts made by daniel