No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. PeterQF
    • Profile
    • Following 1
    • Followers 1
    • Topics 30
    • Posts 112
    • Best 7
    • Groups 0

    PeterQF

    @PeterQF

    8
    Reputation
    273
    Profile views
    112
    Posts
    1
    Followers
    1
    Following
    Joined Last Online

    PeterQF Follow

    Best posts made by PeterQF

    • RE: Detect IE before Quasar is loaded [SOLVED]

      Ok so this is how i did.

      In Default layout i used preFetch to do the check and the redirect to an ie.vue page and the ie.vue page uses a striped layout just showing html.

      posted in Help
      PeterQF
      PeterQF
    • RE: Giving a meetup talk

      @benoitranque, “collaborating with nuxt” is just what i’m looking for.

      Any idea when it will be reality?

      posted in Hangout
      PeterQF
      PeterQF
    • Left Plesk for something great regarding hosting

      Fist of, i’m not in anyway associated with this service i just find it great and want to share my thoughts.

      Only solution for me that didn’t force me to manage node sites in terminal was Plesk. Plesk is a complete hosting system like cPanel so i only used a fraction of Plesk to host my node sites.

      Also the workflow were pretty complicated in Plesk:

      1. commit new code from VSCode
      2. pull branch in Plesk
      3. run npm install in Plesk
      4. run build command in Plesk
      5. restart the node app in Plesk
      

      And if something crashed the site i had to rush to find the problem in VSCode and do it all over again.

      Cleavr works similar to Laravel Forge with continues deployment to a versioning system that with one click can be rolled back if site crashes.

      Further more is the workflow so nice i only have to commit new code from VSCode and cleavr.io trigger GitHubs action workflow that does the actual build on the GitHub server saving me any performance lacking during the build then copies build into a new release folder, updating all symliks and activate the new deployment.

      Really easy and flexible. Also it uses PM2 to keep it up and running.

      Also Plesk had to be installed on one VPS and host all sites otherwise i have to pay for a new license and run it on another VPS.

      Cleavr.io allows me to manage many servers with sites on isolated VPS.

      And everything i had to pay for in Plesk like remote backup addon, failban security addon, upmonitor addon Cleaver offers out of the box.

      posted in Useful Tips (NEW)
      PeterQF
      PeterQF
    • RE: [SOLVED by metalsadman] Axios store needs browser reload

      Thank you @metalsadman for helping me, this works great i just had to ad the setAuthHeader upon login.

      This is my working auth store action:

      import { axiosInstance, setAuthHeader } from 'boot/axios'
      export const login = async (context, data) => {
        try {
          const res = await axiosInstance.post('api/auth/loggain', {
            email_address: data.email_address,
            password: data.password
          })
          if (res.data.count) {
            console.log('error')
          } else {
            if (res.data.status === 'success') {
              const token = res.data.payload.token
              const user = res.data.user
              context.commit('setUser', { user, token })
              setAuthHeader(token) <--------- THIS WAS ADDED
              return user
            } else {
              console.log(res.data.status)
            }
          }
        } catch (error) {
          return false
        }
      }
      export const logout = async function(context) {
        context.commit('clearUser')
        this.$router.push({ path: '/utloggad' })
      }
      
      

      Since i’m new to Quasar i’m sure you will find stuff that can be improved here 🙂

      posted in Help
      PeterQF
      PeterQF
    • Migrating from Nuxt/Vuetify

      Hi guys,

      Almost done migrating to Quasar from Nuxt/Vuetify and man do like it so far.

      Is there any Swedish developers in this forum?

      Cheers!

      posted in Hangout
      PeterQF
      PeterQF
    • RE: Matomo Tracking Code

      @dobbel so, not entirely decided on GA or Matomo,
      My customer has the final word but so far we both lean towards Matomo.

      Matomo is more “clean” and easier to navigate. Further more Matomo offers Session recordings and Heatmaps in the payed version for like 300 USD/year. GA dont offer this at all as we can see. Maybe there is some of this in GA 360 but when prices starts at ridiculous levels my customer is not interested in a payed GA service.

      I have some problems getting the page Titles work but this was more of a problem back in Joomla days when GA registered unreadable urls, This is no problem in Quasar as the SEO friendly url:s are more than enought to understand. Also a very neat function Matamo has is a categorising of page hits. Much more readable than GA.

      I use the vue-matomo like above and it workd great. I parallel run a GA tracking code in the index.temlate.html that seems to work but maybe this is the wrong way to use GA with Quasar because i get very different stats. GA gives me more hits but less page views and this makes me a bit confused.

      My customer trust Matomo more since the stat ads up when comparing all different stats and GA don’t. But then again, maybe my GA implementation is not correct.

      So bottom line right now: Matomo is the service we are leaning towards. Next week we will start an AdWord campaign and continue to compare stats. I guess this will be the dealbraker for the final decision.

      So a list of things we think Matomo does better (based on our non-professional knowledge):

      • Session Recordings
      • Heatmaps
      • Presentation of stat data
      • By the looks of it a bit more “trustworthy” stat
      • The ability to have many sites and easy switch between them
      • The ability to remove all stats for a website when we are ready to start using it in production
      • The great API in Matomo that allows us to get RAW data from Matomo and present it in our own Quasar page with chart script of our choosing.

      So thats it so far. Hope it can be of some interest.

      posted in Help
      PeterQF
      PeterQF
    • RE: SSR and Vuex meta data

      @beets WOW, major breakthrough.

      Turned out that my local env had a problem with Axios calls in preFetch due to Lando/Docker.

      Removing

      if (!ssrContext) {

      works great on production server and https://metatags.io/ shows all meta correct.

      Thank you so much for making me focus on preFetch.

      I will just figure out how to “allow” Axios calls to local Lando/Docker API or maybe just disable preFetch locally since the meta isn´t that important under development.

      posted in Help
      PeterQF
      PeterQF

    Latest posts made by PeterQF

    • RE: Expansion Items: Only Open One Item at a Time

      Anyone know if this is possible to do in table expansion?

      Found solution here: https://codepen.io/pdanpdan/pen/eYmwryW?editors=1010

      posted in Help
      PeterQF
      PeterQF
    • RE: Set togglew color if false

      @dobbel worked like a charm. Thank you so much!

      posted in Help
      PeterQF
      PeterQF
    • Set togglew color if false

      My sustomer want the toggle to be green when on (true) but red when off(false)

      I tried:

        <q-toggle
                            ref="single"
                            size="xl"
                            v-model="itemEdit.single"
                            val="1"
                            :label="$t('posts.single')"
                            :color="itemEdit.single ? 'red' : 'green'"
                          />
      

      This won’t work. Am i’m doing anything wrong or is it not posible?

      posted in Help
      PeterQF
      PeterQF
    • Left Plesk for something great regarding hosting

      Fist of, i’m not in anyway associated with this service i just find it great and want to share my thoughts.

      Only solution for me that didn’t force me to manage node sites in terminal was Plesk. Plesk is a complete hosting system like cPanel so i only used a fraction of Plesk to host my node sites.

      Also the workflow were pretty complicated in Plesk:

      1. commit new code from VSCode
      2. pull branch in Plesk
      3. run npm install in Plesk
      4. run build command in Plesk
      5. restart the node app in Plesk
      

      And if something crashed the site i had to rush to find the problem in VSCode and do it all over again.

      Cleavr works similar to Laravel Forge with continues deployment to a versioning system that with one click can be rolled back if site crashes.

      Further more is the workflow so nice i only have to commit new code from VSCode and cleavr.io trigger GitHubs action workflow that does the actual build on the GitHub server saving me any performance lacking during the build then copies build into a new release folder, updating all symliks and activate the new deployment.

      Really easy and flexible. Also it uses PM2 to keep it up and running.

      Also Plesk had to be installed on one VPS and host all sites otherwise i have to pay for a new license and run it on another VPS.

      Cleavr.io allows me to manage many servers with sites on isolated VPS.

      And everything i had to pay for in Plesk like remote backup addon, failban security addon, upmonitor addon Cleaver offers out of the box.

      posted in Useful Tips (NEW)
      PeterQF
      PeterQF
    • RE: Is possible img inside parallax be responsive?

      Hi @Erick-Amarante ,

      Have you tried to set a class and then in sass use:

      @media (max-width: XXXpx)
        .parallax
          width: XXXpx
      
      posted in Framework
      PeterQF
      PeterQF
    • Help choosing DO droplet size

      Hi guys,

      I wonder if you could help me decide the size of an DO Droplet.

      Some say there is no need for more than one cpu?

      Also i wonder how many Node.js apps can i run on the same Droplet?

      I use to have a DO droplet with these options:

      20 USD/mo: 4GB RAM, 2 CPUs, 80GB SSD Disk and 4TB tranfer

      Is this enough or do i gain any performance with:

      40 USD/mo: 8GB RAM, 4 CPUs, 160GB SSD Disk and 5TB tranfer

      The disk size i could solve by just adding another server in the future but the main question is: do i have any use performance wise with 8GB RAM, 4 CPUs?

      One option is to separate all customers and have their sites on separate DO servers:

      5 USD/mo:1GB RAM, 1 CPU, 25GB SSD Disk and 1TB tranfer

      This is maybe the best option to totally separate customers apps in their own droplet/server.

      Please adwise?

      posted in Help
      PeterQF
      PeterQF
    • RE: SSR and Vuex meta data

      @Sfinx i’m sorry if i mix things up.
      I’m really not that skilled with Docker, that is why i use Lando as it takes care of all this.
      Just had to figure out how Lando wants me to do Axios calls in different situations.

      posted in Help
      PeterQF
      PeterQF
    • RE: SSR and Vuex meta data

      Well,
      Pure Docker might accept 0.0.0.0:xxx but not using Lando.
      With Lando one has to connect to xxx.internal:xxxx

      Just like with DB connection: DB_HOST=default.postgres96.internal

      posted in Help
      PeterQF
      PeterQF
    • RE: SSR and Vuex meta data

      So guys,
      This is how i solved this.

      Turned out that Lando/Docker needed another base url when connecting to server with preFetch so the simple solution was to use this code for baseURL:

      baseURL: process.env.PROD
          ? 'https://api.lsvab.se'
          : process.env.SERVER && process.env.DEV ? 'http://api-server.apilsvab.internal:8000' : 'http://api-lsvab.lndo.site',
      

      Hope it can help anyone using Lando/Docker.

      posted in Help
      PeterQF
      PeterQF
    • RE: SSR and Vuex meta data

      By the way, console.log(error) when running preFetch in my dev env gives me this error:

      Error: connect ECONNREFUSED 172.20.0.4:80
          at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1054:14) {
        errno: 'ECONNREFUSED',
        code: 'ECONNREFUSED',
        syscall: 'connect',
        address: '172.20.0.4',
        port: 80,
        config: {
          url: 'api/site/getPostObj',
          method: 'get',
          headers: {
            Accept: 'application/json, text/plain, */*',
            'X-Client-Api-Key': 'XXXXXXXXXXXXXXXXXX,
            'Content-Type': 'application/json',
            'User-Agent': 'axios/0.21.0'
          },
          params: { post_slug: 'produktunderkategori-nyhet' },
          baseURL: 'http://api-lsvab.lndo.site',
          transformRequest: [ [Function: transformRequest] ],
          transformResponse: [ [Function: transformResponse] ],
          timeout: 180000,
          adapter: [Function: httpAdapter],
          xsrfCookieName: 'XSRF-TOKEN',
          xsrfHeaderName: 'X-XSRF-TOKEN',
          maxContentLength: -1,
          maxBodyLength: -1,
          validateStatus: [Function: validateStatus],
          data: undefined
        },
        request: Writable {
          _writableState: WritableState {
            objectMode: false,
            highWaterMark: 16384,
            finalCalled: false,
            needDrain: false,
            ending: false,
            ended: false,
            finished: false,
            destroyed: false,
            decodeStrings: true,
            defaultEncoding: 'utf8',
            length: 0,
            writing: false,
            corked: 0,
            sync: true,
            bufferProcessing: false,
            onwrite: [Function: bound onwrite],
            writecb: null,
            writelen: 0,
            bufferedRequest: null,
            lastBufferedRequest: null,
            pendingcb: 0,
            prefinished: false,
            errorEmitted: false,
            emitClose: true,
            autoDestroy: false,
            bufferedRequestCount: 0,
            corkedRequestsFree: [Object]
          },
          writable: true,
          _events: [Object: null prototype] {
            response: [Array],
            error: [Function: handleRequestError],
            timeout: [Function]
          },
          _eventsCount: 3,
          _maxListeners: undefined,
          _options: {
            maxRedirects: 21,
            maxBodyLength: 10485760,
            protocol: 'http:',
            path: '/api/site/getPostObj?post_slug=produktunderkategori-nyhet',
            method: 'GET',
            headers: [Object],
            agent: undefined,
            agents: [Object],
            auth: undefined,
            hostname: 'api-lsvab.lndo.site',
            port: null,
            nativeProtocols: [Object],
            pathname: '/api/site/getPostObj',
            search: '?post_slug=produktunderkategori-nyhet'
          },
          _ended: true,
          _ending: true,
          _redirectCount: 0,
          _redirects: [],
          _requestBodyLength: 0,
          _requestBodyBuffers: [],
          _onNativeResponse: [Function],
          _currentRequest: ClientRequest {
            _events: [Object: null prototype],
            _eventsCount: 7,
            _maxListeners: undefined,
            outputData: [],
            outputSize: 0,
            writable: true,
            _last: true,
            chunkedEncoding: false,
            shouldKeepAlive: false,
            useChunkedEncodingByDefault: false,
            sendDate: false,
            _removedConnection: false,
            _removedContLen: false,
            _removedTE: false,
            _contentLength: 0,
            _hasBody: true,
            _trailer: '',
            finished: true,
            _headerSent: true,
            socket: [Socket],
            connection: [Socket],
            _header: 'GET /api/site/getPostObj?post_slug=produktunderkategori-nyhet HTTP/1.1\r' +
              '\nAccept: application/json, text/plain, */*\r' +
              '\nX-Client-Api-Key: XXXXXXXXXXXXXXXXX\r' +
              '\nContent-Type: application/json\r' +
              '\nUser-Agent: axios/0.21.0\r' +
              '\nHost: api-lsvab.lndo.site\r' +
              '\nConnection: close\r' +
              '\n\r' +
              '\n',
            _onPendingData: [Function: noopPendingOutput],
            agent: [Agent],
            socketPath: undefined,
            method: 'GET',
            path: '/api/site/getPostObj?post_slug=produktunderkategori-nyhet',
            _ended: false,
            res: null,
            aborted: false,
            timeoutCb: null,
            upgradeOrConnect: false,
            parser: null,
            maxHeadersCount: null,
            _redirectable: [Circular],
            [Symbol(isCorked)]: false,
            [Symbol(outHeadersKey)]: [Object: null prototype]
          },
          _currentUrl: 'http://api-lsvab.lndo.site/api/site/getPostObj?post_slug=produktunderkategori-nyhet',
          _timeout: Timeout {
            _idleTimeout: -1,
            _idlePrev: null,
            _idleNext: null,
            _idleStart: 29830654,
            _onTimeout: null,
            _timerArgs: undefined,
            _repeat: null,
            _destroyed: false,
            [Symbol(refed)]: null,
            [Symbol(asyncId)]: 796876,
            [Symbol(triggerId)]: 796873
          }
        },
        response: undefined,
        isAxiosError: true,
        toJSON: [Function: toJSON]
      }
      

      any idea how to solve this?

      posted in Help
      PeterQF
      PeterQF