Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AustinGil/vuetensils
🍴 A tasty toolset for Vue.js 🛠 - Lightweight, functional components to boost your next project.
https://github.com/AustinGil/vuetensils
a11y accessibility frontend javascript js vue vue-components vuejs
Last synced: about 1 month ago
JSON representation
🍴 A tasty toolset for Vue.js 🛠 - Lightweight, functional components to boost your next project.
- Host: GitHub
- URL: https://github.com/AustinGil/vuetensils
- Owner: AustinGil
- License: mit
- Archived: true
- Created: 2018-10-08T23:30:53.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2024-07-31T15:17:05.000Z (4 months ago)
- Last Synced: 2024-10-01T02:49:42.412Z (2 months ago)
- Topics: a11y, accessibility, frontend, javascript, js, vue, vue-components, vuejs
- Language: Vue
- Homepage: https://vuetensils.austingil.com/
- Size: 7.51 MB
- Stars: 661
- Watchers: 10
- Forks: 38
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-faker - vuetensils - A tasty toolset for Vue.js. (Projects using `@faker-js/faker`)
README
# Introduction
A "naked" component library for Vue.js focused on being:
- Accessible
- Semantic
- Light weight
- Extensible
Links:
- [Docs](https://vuetensils.stegosource.com/)
- [NPM](https://www.npmjs.com/package/vuetensils)
- [GitHub](https://github.com/AustinGil/vuetensils)
- [Updates](https://austingil.com/newsletter)
## Naked Components
Vuetensil'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](https://vuetensils.austingil.com/components/Dialog.html) that traps focus and prevents scrolling), and apply your custom design. No overhead from unused styles and no wrestling with overly-specific styles.
## Getting Started
#### 1. Install the library
`npm install vuetensils`
#### 2. Register just the things you need
Globally:
```js
// main.js
import { VAlert } from 'vuetensils/src/components';
import { autofocus } from 'vuetensils/src/directives';
// With your previously created app
app.component('VAlert', VAlert);
app.directive('autofocus', autofocus);
```
Locally:
```vue
// SomeComponent.vue
import { VAlert } from 'vuetensils/src/components';
import { autofocus } from 'vuetensils/src/directives';
export default {
components: {
VAlert,
},
directives: {
autofocus,
},
// ...
};
```
#### 3. Use the components in your template
```vue
Hey, I'm an alert!
```
#### 4. Bring your own styles
```css
/* Some CSS file */
.vts-alert {
border: 1px solid currentColor;
border-radius: 4px;
padding: 0 10px;
color: #900;
background: #FDD;
}
```
## Inspiration
I've built a lot of projects in the past and found myself copy/pasting several of the same components over and over, and stripping out styles that I didn't need. Eventually I realized that I could just create components with the base functionality and accessible markup, but no styles at all. That way, I wouldn't have to wrestle with existing styles, or worry about bloating my app with overwritten styles.