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

@unicorns/quick-dash-framework

v2.6.3

Published

Quick Dashboard Framework

Downloads

9

Readme

@unicorns/quick-dash-framework

Do not base your projects on this one.

This is the base framework package.

Use or fork https://github.com/UnicornGlobal/quick-dash for your projects.

Designed to work with UnicornGlobal/strong-lumen

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Environment

Inside the config folder is a file secrets.env.js.example. You must copy this file to secrets.env.js and set your secrets up in there.

Do not commit secrets, put them in the .env file.

CI

There are scripts for travis included

Tests are run against the master version of UnicornGlobal/strong-lumen

Custom Routes vs Static Routes

Load up your custom in-app (authenticated) routes in your ~/router folder.

To include "static" routes (ones that do not require authentication and which do not load up in the app sidebar) add them to a special directory called ~/router/static

Any files placed in ~/router/static will not be loaded into the authenticated area of the app.

Examples include terms and conditions pages and contact forms.

NB Do not add any custom routes that have the path /.

This is a special route that redirects to /home.

NB You must have a home.js file in your router directory that sits on the path /home - this is the default logged in route that the base route / will always redirect to.

This may change in the future but is the convention for now.

NB You must att static:true to the meta field of your static routes. This may change in the future but is convention for now.

Allow Any Role

To allow any role on a route just set role to false

Config Loading

The values in /src/config/*.js will be overridden by any values present in the matching file in the host app.

Any additional values in the host app will be appended.

Component References

All components in the framework can be accessed with the @ import tag.

All components in the host app can be accessed with the ~ import tag.

Example:

To load a framework component:

import component from '@/components/FrameworkComponent'

To load a component from the host app:

import component from '~/components/LocalComponent'

Loader

If you place a Loader.vue file in /src/components it will override the base framework loader with your custom component.