Napoleon's Penguin Mascot
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

vuetensils

1.0.2-beta • Public • Published

Vuetensils

🍴 A tasty toolset for Vue.js 🛠

Vuetensils is a collection of Vue components desined to be light weight, accessible, and extensible. It is not a full blown UI library. Instead, it is designed to jump start a project with some of the most common UI solutions, but does not bring with it any opinionated styles. Bring your own styles, and let Vuetensils handle things like a modal popup that is accessible, traps user tab focus, and closes when the escape key is pressed. View on GitHub or NPM.

Comparison of bundle sizes from other popular libraries:

  • None: 94.3kb
  • Vuetify: 791kb
  • BootstrapVue: 460kb
  • Vuetensils: TODO

Getting Started

Install:

npm install vuetensils

Import into your Vue project:

// main.js
import Vue from 'vue'
import vuetensils from 'vuetensils'
import 'vuetensils/dist/vuetensils.min.css'

Vue.use(vuetensils)

Alternatively, import just the components you need:

// main.js
import Vue from 'vue'
import { VtsModal } from 'vuetensils'

Vue.use(VtsModal)

Use the components:

// Example.vue
<template>
  <div>
    <vts-modal v-model="show">
      My modal content
    </vts-modal>
  </div>
</template>
<script>
export default {
  data: () => ({
    show: true
  })
}
</script>

Components

  • <vts-drawer> - A sidebar that can be toggled on or off.
  • <vts-dropdown> - Show/hide inline content.
  • <vts-fetch> - Makes JSON API requests and provides responses, loading states, and errors.
  • <vts-intersection> - Adds IntersectionObserver to content and provides event callbacks.
  • <vts-loading> - SVG loading icons.
  • <vts-modal> - A modal dialogue.

install

npm i vuetensils

Downloadsweekly downloads

54

version

1.0.2-beta

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability