1. Home
  2. Help
  3. Vuex + Cookies in SSR + SPA ...default.get is not a function

Vuex + Cookies in SSR + SPA ...default.get is not a function

  • M

    I been having a problem with a instance of a cookies boot file for a SSR application, I follow the steps on documetation of quasar but i having missing something and do not working in boot file SOMEBODY HELP:
    Action File From Vuex
    vuexaction.png

    Cookies Boot File For Acess Cookies On SSR Mode
    bootfile.png

    Call of Vuex whos making Access of cookie
    callingvue.png

    0 dobbel 1 Reply
  • dobbel

    @matheus-pimentel

    the problem is you are using cookies/localstorage ( client side only entities) in Quasar SRR mode.

    Here’s a part from https://quasar.dev/quasar-cli/boot-files#Usage-of-boot-files

    “When building a SSR app, you may want some boot files to run only on the server or only on the client, in which case you can do so like below:”

    boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  },
  {
    client: false, // run on server-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
]
    0 M 1 Reply
  • M

    @dobbel said in Vuex + Cookies in SSR + SPA ...default.get is not a function:

    {
    server: false, // run on client-side only!
    path: ‘<name>’ // references /src/boot/<name>.js
    },

    So… I have to making my boot file to server side only (Sorry my english, I’m Brazillian)

    0 dobbel 1 Reply
  • dobbel

    @matheus-pimentel

    So… I have to making my boot file to server side only (Sorry my english, I’m Brazillian)

    when you use cookies or localstorage in a boot file you should only use it client side.

    But that is correct code block where you should add your bootfile.

    0 M 1 Reply
  • M

    @dobbel I got this erro when I trying using the boot on Vuex Action File

    TypeError: boot_cookies__WEBPACK_IMPORTED_MODULE_1__.cookies.get is not a function
    at Store.revisarUsuarioLogado (server-bundle.js:1579:70)
    at Array.wrappedActionHandler (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vuex/dist/vuex.common.js:849:23)
    at Store.dispatch (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vuex/dist/vuex.common.js:514:15)
    at Store.boundDispatch [as dispatch] (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vuex/dist/vuex.common.js:404:21)
    at VueComponent.beforeCreate (js/0.js:112:25)
    at invokeWithErrorHandling (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:1850:57)
    at callHook (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:4207:7)
    at VueComponent.Vue._init (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:4985:5)
    at new VueComponent (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:5134:12)
    at createComponentInstanceForVnode (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8184:10)
    at renderComponentInner (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8408:40)
    at renderComponent (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8383:5)
    at RenderContext.renderNode (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8294:5)
    at RenderContext.next (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:2598:23)
    at cachedWrite (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:2451:9)
    at renderElement (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8544:5)

    Action.js Vuex file

    import {cookies} from 'boot/cookies'

export async function revisarUsuarioLogado ({commit}, ssrContext) {
  try {
  console.log(cookies.get('temvagas_usr'))
  //await commit('salvarUsuarioLogado',  value )
  } catch (error) {
    console.log(error)
  }
  
} 

export function salvarUsuarioLogado ({commit}, payload) {
  commit('salvarUsuarioLogado',  payload )
}

    cookies.js Boot File

    // import something here
import { Cookies } from 'quasar'
// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/boot-files
export default async  (ssrContext) {
  // something to do
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies // otherwise we're on client


  // "cookies" is equivalent to the global import as in non-SSR builds
}
    0 dobbel 1 Reply
  • dobbel

    @matheus-pimentel

    from where in your code are you dispatching the revisarUsuarioLogado action?

    0 M 1 Reply
  • M

    @dobbel First thank you very much for your attention.
    I have called in the first layout for login and in the layout after authentication the error happens on both:

    <script>
export default {
    name: 'MainLayout',
    components: {
        'login-navbar': require('components/Login/loginNavbar.vue').default
    },
    async beforeCreate() {
        await this.$store.dispatch("user/revisarUsuarioLogado")

    },
    data() {
        return {
            modalOn: false,
        }
    },
}
</script>

    
<script>
export default {
    components: {
        'sidebar': require('components/Autenticado/sideBar.vue').default,
        'autenticado-navbar': require('components/Autenticado/autenticadoNavbar').default
    },
    data() {
        return {}
    },
    async beforeCreate() {
        try {
            await this.$store.dispatch("user/revisarUsuarioLogado")
        } catch (error) {
            console.log(error)
        }
        
    }
}
</script>
    0 dobbel 2 Replies
  • dobbel

    @matheus-pimentel

    I am not sure you can do this( I have not seen it anywhere , that’s why):

    import {cookies} from 'boot/cookies'

    But what about this:

    

export async function revisarUsuarioLogado ({commit}, ssrContext) {
  try {
    const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies

    console.log(cookies.get('temvagas_usr'))
   //await commit('salvarUsuarioLogado',  value )
  } catch (error) {
    console.log(error)
  }  
} 

export function salvarUsuarioLogado ({commit}, payload) {
  commit('salvarUsuarioLogado',  payload )
}
    1 M 1 Reply
  • dobbel

    @matheus-pimentel

    btw I found this article:

    https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl

    1
  • M

    @dobbel

    I’m been trying change the import mode to a function or a const works but not i’m expected, stay saying that cookies.get() is not a function

    @matheus-pimentel I am not sure you can do this( I have not seen it anywhere , that’s why):

    import {cookies} from 'boot/cookies'

    btw I found this article:
    https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl

    I seen this on my search on internet, the documentation appears soo much easy to do this, I gonna try anyway is better doing this that be stack in work

    0 dobbel 1 Reply
  • dobbel

    @matheus-pimentel

    That boot file for your cookies. Did you exclude it to run on the client only in q.conf file? If so try to remove the exclusion.

    boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
 
]
    0
Log in to reply