Quasar Framework

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

@daniel

Latest posts made by daniel