npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

quasar-app-extension-blazar

v1.0.16

Published

A Quasar app extension for the Blazar API

Downloads

3

Readme

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('[email protected]')

blazar.signUp({
  userEmail: '[email protected]',
  ...otherUserFields
})

blazar.signIn('[email protected]', 'thepassword')

blazar.signOut()

blazar.resetPassword('[email protected]')

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