PicoVue

A small collection of Vue 3 UI components styled for the Pico CSS framework, with useful utilities such as dynamic table with column filtering, modals, toasters, and more!

How to Use

You can use PicoVue in a compiled project via npm, such as with Vite, or in any HTML with the Vue IIFE global build via CDN

NPM + Vite Build

npm install @ginger-tek/picovue

Import individual components as needed

import { PvTable } from '@ginger-tek/picovue/PvTable.vue'

<PvTable :items="..."></PvTable>

CDN + IIFE Build

<script src="https://unpkg.com/vue/dist/vue.global.js"></script>
<script src="https://unpkg.com/@ginger-tek/picovue/picovue.global.js"></script>
<script src="/main.js">
Vue.createApp({
  template: `<pv-table :items="items"></pv-table>`,
  setup() {
    const items = Vue.ref([])
    return { items }
  }
})
  .use(PicoVue)
  .mount('#app')
</script>

Documentation

• PvAlert
• PvDarkMode
• PvDropdown
• PvModal
• PvMultiSelect
• PvTable
• PvTabs
• PvTags
• PvToaster