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.

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

Any idea when it will be reality?

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.

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

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!

@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.

@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.

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.

Hi @Erick-Amarante ,

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

@media (max-width: XXXpx)
  .parallax
    width: XXXpx

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?

@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.

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

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.

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?

@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.

@beets ok so if i understand you correct preFetch is to be used on both client and server page load?

Adding Host: ‘api-lsvab.lndo.site’

gives me:

Refused to set unsafe header “Host”

@beets i need to include API key in header so this is my code in boot/axios.js:
´´´
const axiosInstance = axios.create({
baseURL: process.env.PROD
? ‘https://api.lsvab.se’
: ‘http://api-lsvab.lndo.site’,
timeout: 180000,
headers: {
‘X-Client-Api-Key’: ‘XXXXXXXXXXXXXXXXXXXXXXXXXX’,
‘Content-Type’: ‘application/json’
}
})
´´´