Any example?

Hi friends

Hi, friends… I’m try to implement Vuex with Typescript and Class Components

I have a module named main

index.ts

import { Module } from 'vuex'
import { StateInterface } from '../index'
import state, { MainStateInterface } from './state'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'

const main: Module<MainStateInterface, StateInterface> = {
  namespaced: true,
  actions,
  getters,
  mutations,
  state
}

export default main

state.ts

export interface MainStateInterface {
  id: number
  name: string
}

function state (): MainStateInterface {
  return {
    id: 1
    name: 'My Name'
  }
}

export default state

Now, my question. What is the best way to use vuex in componets with Class componets.

<template>
  <div>My component</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class ComponentName extends Vue {
}
</script>

Thank in advance

@dobbel said in Change layout width:

What do you mean excactly? You want the toolbar also have a max-width?

Yes.

@dobbel Thanks for your help

but, how I can apply this style to Toolbar

Thanks again

Hi

Is posible to change the layout width, for exmple:

width: 1200px
align: center

Thnaks

Hello

I have a website in ssr mode but when it generates an error 500 we don’t know how to enter the error.

const express = require('express')
const compression = require('compression')

const ssr = require('quasar-ssr')
const extension = require('./extension')
const app = express()
const port = process.env.PORT || 3000
const host = 'localhost'
const backlog = 511

const serve = (path, cache) => express.static(ssr.resolveWWW(path), {
  maxAge: cache ? 1000 * 60 * 60 * 24 * 30 : 0
})

// gzip
app.use(compression({ threshold: 0 }))

// serve this with no cache, if built with PWA:
if (ssr.settings.pwa) {
  app.use(ssr.resolveUrl('/service-worker.js'), serve('service-worker.js'))
}

// serve "www" folder
app.use(ssr.resolveUrl('/'), serve('.', true))

// we extend the custom common dev & prod parts here
extension.extendApp({ app, ssr })

// this should be last get(), rendering with SSR
app.get(ssr.resolveUrl('*'), (req, res) => {
  res.setHeader('Content-Type', 'text/html')

ssr.renderToString({ req, res }, (err, html) => {
    if (err) {
      if (err.url) {
        res.redirect(err.url)
      }
      else if (err.code === 404) {
        // Should reach here only if no "catch-all" route
        // is defined in /src/routes
        res.status(404).send('404 | Page Not Found')
      }
      else {
        // Render Error Page or
        // create a route (/src/routes) for an error page and redirect to it
        res.status(500).send('500 | Internal Server Error')
        if (ssr.settings.debug) {
          console.error(500 on ${req.url})
          console.error(err)
          console.error(err.stack)
        }
      }
    }
    else {
      res.send(html)
    }
  })
})

app.listen(port, host, backlog, () => {
  console.log(Server listening at port ${port})
})

How could I improve this configuration to record the logs on the server.

Thanks

Hi Friends

I am using vuex-persistenstate to persist data across cokkies with a boot.

import { Cookies } from 'quasar'
import createPersistedState from 'vuex-persistedstate'

export default function ({ store, ssrContext }) {
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies

  createPersistedState({
    key: '_mtdc',
    paths: ['auth.token', 'auth.profileUser'],
    storage: {
      getItem (key) {
        return JSON.stringify(cookies.get(key))
      },
      setItem (key, value) {
        console.log(key, value)
        cookies.set(key, value, {
          expires: 30,
          path: '/'
        })
      },
      removeItem (key) {
        cookies.remove(key)
      }
    }
  })(store)
}

But cookies are repeating in the browser

Set-Cookie: _mtdc=%7B%22auth%22%3A%7B%22token%…

Any suggestions on how I could avoid this behavior
Thanks

@beets Excelent…
Muchas gracias…

Hi.
I need to redirect the user to page 404.vue after a query in ssr mode.

preFetch ({ store, currentRoute, redirect }) {
    const p1 = store.dispatch('main/fetchCategoria', currentRoute.params.slugCategoria)
    p1.then((response) => {
      // Empleos por categoria
      const params = `categoria__slug=${currentRoute.params.slugCategoria}`
      return store.dispatch('main/fetchEmpleosCategoria', params)
    }).catch((e) => {
      if (e.response.status === 404) {
        redirect({ path: '404/' }) // this does not redirect
      }
      if (e.response.status === 500) {
        redirect({ name: 'error500' })
      }
    })
  },

any suggestion?
Thanks

Yep

boot: [
‘axios’,
‘router’,
‘i18n’,
‘acls’ <------
],