Quasar App Extension Blazar

This App Extension simplifies the access to Blazar's API, specially the auth zetas. It also injects a $socket and $api into the Vue instance.

Install

quasar ext add blazar

Quasar CLI will retrieve it from our Verdaccio registry and install the extension.

Configuration

This App Extensions reads the following process.env values:

• BLAZAR_HOST
• BLAZAR_SECURE
• BLAZAR_PORT

So, it's recommended to set those values with dotenv:

quasar ext add @quasar/dotenv

the .env file:

BLAZAR_HOST=blazar-dev.purple.uno
BLAZAR_SECURE=true
BLAZAR_PORT=443

Prompts

NameSpace

This App Extension automatically sends this nameSpace to the Blazar backend. You can change it later on quasar.extensions.json.

To send to a public zeta, use:

const res = await this.$apiPublic('file/zeta')

To send to a public nameSpaced zeta, use:

const res = await this.$api('file/zeta')

The body of the request should always be an object (other types are coerced to objects before sending anyway).

Uninstall

quasar ext remove blazar

Usage

Checkout the demo/src/pages/Index.vue for an usage example. Basically:

 
import blazar from 'quasar-app-extension-blazar/src/blazar'
 
// then, just call the functions somewhere in your code:
blazar.checkEmail('[e-mail]')
 
blazar.signUp({
  userEmail: '[e-mail]',
  ...otherUserFields
})
 
blazar.signIn('[e-mail]', 'thepassword')
 
blazar.signOut()
 
blazar.resetPassword('[e-mail]')
 

All functions returns promises.

You can also import the api method in /store/index.js like this:

import blazar from 'quasar-app-extension-blazar/src/blazar'
 
// no body needed
const res = await blazar.api('/file/zeta')
 
// with body:
const res = await blazar.api('/file/zeta', { someKey: 'someValue' })

You can access the Blazar backend like this:

 
// your Vue component script:
export default {
  methods: {
    callApi () {
      const body = {} // some request body data
      this.$api('theEndpoint/theFunction', body) // access the Blazar API
    },
    accessSocket () {
      const data = {}
      this.$socket.transmit('someEvent', data) // access the SocketCluster instance
    }
  }
}
 

UI

This App Extension offers a basic SignInSignUp component. For a usage example, checkout the demo/src/pages/Index.vue. You can use the quasar describe command after starting the dev server:

$ quasar dev
# on another terminal: 
$ quasar describe SignInSignUp

SignInSignUp

This App Extension automatically registers the component, so you can just use it:

 <sign-in-sign-up @sign-in="onSignIn()" @sign-up="onSignUp()" to="/library" />

Caveats

This App Extension automatically sends the configured nameSpace and current i18n locale (as a __locale field on the request body) to the Blazar zeta.

// to enable the locale detection, you have to assign the vue-i18n instance to Vue.prototype.__i18n
i18n = new VueI18n({
  locale,
  fallbackLocale: 'en-us',
  messages
})
// make sure blazar AE can access the i18n
Vue.prototype.__i18n = i18n

Internal i18n

This App Extension comes with i18n on all of its components. It uses the Quasar Language Pack concept. The relevant i18n files are located in src/components/lang, and here is an example of it fully implemented. IMPORTANT: the language of this QAE components changes when the Quasar language itself changes, so if you're using vue-i18n, remember to change the Quasar language too (link above on the concept).