grad-vue

Shared Vue.js components and composable functions for the Graduate College.

Features:

• Vue 3: Built with Vue.js version 3 and the Composition API.
• Accessibility-First: All grad-vue components are built first to be accessible to all users.
• Minimal Dependencies: Only depends on Vue.js, VueUse and focus-trap.

All grad-vue components are accessibility-first. We can't make guarantees about complying with specific accessibility standards, but all components are built with consideration for all users.

Installation

npm install @illinois-grad/grad-vue

Usage

Import All Components In Vue.js

import { createApp } from 'vue'
import GradVue from '@illinois-grad/grad-vue'
import App from './App.vue'

const app = createApp(App)
app.use(GradVue)

Import All Components in Nuxt.js

Add grad-vue.ts into your plugins folder:

import GradVue from '@illinois-grad/grad-vue';
import '@illinois-grad/grad-vue/grad-vue.css';

export default defineNuxtPlugin(async (nuxt) => {
    nuxt.vueApp.use(GradVue);
})

Import Individual Components In Vue.js

import { GButton } from '@illinois-grad/grad-vue'

export default {
  components: {
    GButton
  }
}

Or in a script setup:

<script setup>
import { GButton } from '@illinois-grad/grad-vue'
</script>

<template>
  <GButton @click="handleClick">Click me</GButton>
</template>

Release Process

This package is automatically published to NPM when a semantic version tag (prefixed with v) is pushed to the repository. For example:

# Create and push a new release
git tag v1.0.0
git push origin v1.0.0

This will:

1. Build the package
2. Create a GitHub release with auto-generated release notes
3. Publish the package to NPM

Note: Ensure the version in package.json matches the tag version before pushing.