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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@mr_chick/vue_guard

v1.2.3

Published

A helper plugin to deal with simple permissions

Readme

Info

This is a basic "guard" that you can use with simple permissions

This is still work in progress, but the basic works.

There will be a vue directive guard too in the near future.

Install

Install the package

npm i @mr_chick/vue_guard

with the package installed, you have to import it in your vue project

import guard from '@mr_chick/vue_guard'

then, you have to initialize the plugin

the plugin uses vuex to store the permissions, so you must provide the store object to the plugin

Vue.use(guard, {'store': store});

Usage

You have access to the guard via this.$guard (or a directive, soon)

To allow a permission

this.$guard.allow('i-can-do-this');

You can add an Instance and an ID to the allow / disallow, and it will be a more specific way of setting permission

this.$guard.allow('i-can-do-this','User','12')

That means, only the can('i-can-do-this', 'User', '12') will return true, anything else, will allow false.

To disallow a permission

this.$guard.disallow('i-can-do-this')

Same as allow, you can pass the optional Instance and ID if you need more granual permissions

You use disallow when you use a specific permission, for a specific Instance / ID, but you still want a global permission

For ex

this.$guard.allow('i-can-do-this')
this.$guard.disallow('i-can-do-this', 'User', 12)

will return false only for this.$guard.can('i-can-do-this', 'User', 12) this.$guard.can('i-can-do-this', 'User', {any_other_id}) or this.$guard.can('i-can-do-this', { Any other instance }) or this.$guard.can('i-can-do-this') will return true

getters

To check if you can do something, you can use

this.$guard.can('i-can-do-this') returns true if permission exists, false if not

You can pass the optional parameters Instance and ID for more granual check

this.$guard.can('permission')

this.$guard.can('permission', 'Instance')

this.$guard.can('permission', 'Instance', 'ID')

The inverse is cannot or cant with the same parameters

this.$guard.cannot('permission', 'Instance', 'ID')

this.$guard.cant('permission', 'Instance', 'ID') (alias for cannot)

you can get the list object via this.$guard.listPermissions()

the permissions are so the getters will update if you use allow / disallow