🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

webue

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webue

A tasty toolset for Vue.js

0.0.1
latest
Source
npm
Version published
Weekly downloads
2
Maintainers
1
Weekly downloads
 
Created
Source

Introduction

A "naked" component library for Vue.js focused on being:

  • Accessible
  • Semantic
  • Light weight
  • Extensible

Links:

  • Docs
  • NPM
  • GitHub
  • Updates

Naked Components

Webue's components are designed to be starting points for some of the most common UI features. They bring all the functionality you would expect from a UI library, but only the bare minimum styles to avoid adding any extra bloat. You can work on the branding, and you don't have to worry about the accessibility.

Import just the features you need (like a WCAG-friendly dialog that traps focus and prevents scrolling), and apply your custom design. No overhead from unused styles!

Getting Started

1. Install the library

npm install webue

2. Register just the components you need

Globally:

// main.js
import Vue from "vue"
import { VAlert } from "webue"

Vue.component("VAlert", VAlert)

Locally:

<script>
// SomeComponent.vue
import { VAlert } from "webue"

export default {
  components: {
    VAlert,
  },
  // ...
}
</script>

3. Use the components in your template

<template>
  <div class="some-component">
    <VAlert>Hey, I'm an alert!</VAlert>
  </div>
</template>

4. Bring your own styles

/* Some CSS file */
.vts-alert {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 10px;
  color: #900;
  background: #fdd;
}

Inspiration

If I want my projects to follow best practices for semantic markup and accessibility, what are my options:

I could write my own library 😱

  • ✅ My styles would be exactly how I want them.
  • ✅ My bundle size will be very small because I'll only use what I need.
  • ❌ It's going to take a lot of time.
  • ❌ I'll have to create every component from scratch.
  • ❌ I probably won't follow all the best practices right.

I could rely on a third party library 😵

  • ✅ It will save me a LOT of time.
  • ✅ I will have many component options to choose from.
  • ❌ I'll still have to confirm they follow best practices.
  • ❌ I will either have to use their styles, or end up overwriting them.
  • ❌ There may be a lot of unused code that could bloat the bundle size.

I could use Webue 😍

  • ✅ The only styles added are the ones I write.
  • ✅ I only include the components I'm actually going to use.
  • ✅ My components will be accessible and semantic.
  • ✅ The bundle size will stay as small as possible.

Roadmap

  • Better a11y range input
  • lazyload directive
  • Tooltip
  • Schema/semantic ratings
  • a11y datetime picker
  • schema/semantic Breadcrumbs
  • finish Datatable
  • Better SSR support
  • functional components
  • Add type export for intellisense
  • Add VLink component
  • Add active class option to VTabs
  • VToggle support a toggle slot with v-bind and v-on
  • VToggle support for accordion
  • VInput default scoped slot with bindings and listeners for label, input, and description.
  • VTry component for error boundaries

Keywords

vue

FAQs

Package last updated on 23 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts