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?

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!

Hi guys,

My customer think the GA page is hard to navigate and contains a lot of uninteresting stuff so he want’s to have only some basic stuff embed in his own Quasar admin page.

Anyone have any tip on how to embed selected stuff from GA?

i agree with @s-molinari . I use Lando to develop in Docker. I can really recommend it.

@clwd please tell me if you have come up with a better solution.

Sorry for late respons.

So the way i got it working was to use preFetch in product file (or in any other dynamic object presentation file):

  preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext }) {
    const payload = { product_slug: currentRoute.params.product }
    return store.dispatch('products/fetchProductObj', payload)
  },

on preFetch i dispatch to Vuex store setting both product object and its meta

Vuex action:

export const fetchProductObj = async function (context, payload) {
  return axiosInstance.get('api/site/getProductObj', {
    params: { product_slug: payload.product_slug }
  }).then(({ data }) => {
    context.commit('setProductObj', data)
    context.commit('setProductMeta', data)
  }).catch(err => {
    context.dispatch('routeToError')
    console.log(err)
  })
}

Vuex mutation:

export const setProductObj = (state, payload) => {
  state.productObj = payload.productObj
}

export const setProductMeta = (state, payload) => {
  state.productMeta.title = payload.productObj.title_sv
  state.productMeta.description = payload.productObj.content_sv ? stripHtml(payload.productObj.content_sv).substr(0, 120) : ''
  state.productMeta.ogUrl = process.env.APP_URL + 'produkt/' + payload.productObj.product_slug
  state.productMeta.ogTitle = payload.productObj.title_sv
  state.productMeta.ogDesc = payload.productObj.content_sv ? stripHtml(payload.productObj.content_sv).substr(0, 120) : ''
  if (payload.productObj.images[0]) {
    state.productMeta.ogImage = process.env.API_URL + process.env.IMAGE_UPLOAD + payload.productObj.images[0].image_file
  } else {
    state.productMeta.ogImage = process.env.IMAGE_MISSING
  }
  state.productMeta.twitterTitle = payload.productObj.title_sv
  state.productMeta.twitterDesc = payload.productObj.content_sv ? stripHtml(payload.productObj.content_sv).substr(0, 120) : ''
}

then back in product presentation file i get the vuex product data and meta data:

  computed: {
    ...mapState('products', ['productObj', 'productMeta']),
...

now data is ready to use even for meta and the meta i set using a function mixin:

  meta () {
    return this.setMeta(`${this.productMeta.title} - ${this.$t('general.appName')}`, this.productMeta.description, this.productMeta.ogUrl, this.productMeta.ogImage)
  }

mixin function:

    setMeta (title, description, url, image) {
      return {
        title: title,
        meta: {
          title: {
            name: 'title',
            content: title
          },
          description: {
            name: 'description',
            content: description
          },
          ogType: {
            property: 'og:type',
            content: 'website'
          },
          ogUrl: {
            property: 'og:url',
            content: url
          },
          ogTitle: {
            property: 'og:title',
            content: title
          },
          ogDesc: {
            property: 'og:description',
            content: description
          },
          ogImage: {
            property: 'og:image',
            content: image
          },
          twitterTitle: {
            name: 'twitter:title',
            content: title
          },
          twitterDesc: {
            name: 'twitter:description',
            content: description
          }
        }
      }
    },

Verifying the meta i use: https://metatags.io/

Paste: https://www.hyreshuset.se/produkter/lasta/hjullastare/volvo-l20

And you see the meta result.

i hope this can help you.

@clwd i will soon answer you soon. Please wait.

Hi,
I use Lando in VSCode for my dev docker and it works fine but when i reload my page in browser i get Error: connect ECONNREFUSED 127.0.0.1:80

I think this is a SSR problem.

Any idea how to solve this?

Bers regards
/Peter Sweden

Hi @Boris ,
I use Lando for my dev docker and it works fine but when i reload my page in browser i get Error: connect ECONNREFUSED 127.0.0.1:80

I think this is a SSR problem. any idea how to solve this?

Bers regards
/Peter Sweden

@tof06 , Lando with VSCode UI looks really interesting.

Not sure about the structure though, do you use a .lando.yml for each project/site. i would like to have a “top Lando” with like Node, PG, Redis and then in subfolders be able to use the same node, redis, PG. Is this possible?

Do you by any chanse have a .lando.yml to chare for Quasar just to get the hang of it?

Yes, i´m sorry @tof06 . I know this is more of a general dev question.

Thank you so much for pointing me at lando. i Will look into it.

Would you say lando is kind of a “Mamp Pro” for Node dev?

Can one use lando with VSCode as usual?

I see there is a extension that Provides a vscode ui for the development tool lando. Do you use it?

Hi guys,

Right now i have Node, Redis Server, Postgres installed on my Mac and it works fine.

When i was working with PHP projects i didn’t want to bloat my Mac with PHP so i used Docker and i was all good.

Now to my questions.

1. I see there are a Docker extension for VSCode and i wonder if i have something to gain by doing my Node development in Docker containers?

2. When running multiple processes(different sites) on localhost i get problems with to large cookie/local storage so i use Mamp Pro (that i use for simpler PHP projects) to make VirtualHosts so i can use www.site instead of localhost:xxxx. This way i don´t have the problem with to large cookie/local storage. Is this something i would solve using Docker?

Thank you.