Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johannschopplich/ui
A collection of Vue.js components for my projects
https://github.com/johannschopplich/ui
nuxt-module nuxt-ui vue-ui
Last synced: 16 days ago
JSON representation
A collection of Vue.js components for my projects
- Host: GitHub
- URL: https://github.com/johannschopplich/ui
- Owner: johannschopplich
- License: mit
- Created: 2023-09-24T14:03:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-11T19:13:44.000Z (22 days ago)
- Last Synced: 2024-12-16T18:52:27.469Z (17 days ago)
- Topics: nuxt-module, nuxt-ui, vue-ui
- Language: Vue
- Homepage: https://byjohann-ui.netlify.app
- Size: 684 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @byjohann/ui
A collection of Vue.js components for my projects.
## Setup
```bash
# pnpm
pnpm add @byjohann/ui
# npm
npm i @byjohann/ui
# yarn
yarn add @byjohann/ui
```
### Nuxt Usage
Nuxt is supported out of the box. The Vue components provided by this library need to be transpiled for the server-side rendering to work. All you need to do is to add the `@byjohann/ui/nuxt` module to your `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
modules: ["@byjohann/ui/nuxt"],
});
```
## Components
This library provides a collection of Vue.js components. Here is a list of all available components:
- [AutoGrowTextarea](./src/components/AutoGrowTextarea.vue)
- [DetailsContent](./src/components/DetailsContent.vue)
- [DetailsGroup](./src/components/DetailsGroup.vue)
- [DetailsItem](./src/components/DetailsItem.vue)
- [DotPattern](./src/components/DotPattern.vue)
- [GridBlock](./src/components/GridBlock.vue)
- [GridPattern](./src/components/GridPattern.vue)
- [Marquee](./src/components/Marquee.vue)
- [MasonryGrid](./src/components/MasonryGrid.vue)
- [MediumZoom](./src/components/MediumZoom.vue)
- [ModalsPortal](./src/components/ModalsPortal.vue)
- [MotionText](./src/components/MotionText.vue)
- [Primitive](./src/components/Primitive)
- [ScreenreaderOnly](./src/components/ScreenreaderOnly.vue)
- [ScrollObserver](./src/components/ScrollObserver.vue)
- [ScrollReactor](./src/components/ScrollReactor.vue)
- [ScrollReactorGroup](./src/components/ScrollReactorGroup.vue)
- [ScrollReveal](./src/components/ScrollReveal.vue)
- [ScrollTrigger](./src/components/ScrollTrigger.vue)
- [ScrollTriggerGroup](./src/components/ScrollTriggerGroup.vue)
- [SkeletonZone](./src/components/SkeletonZone.vue)
- [SliderGroup](./src/components/SliderGroup.vue)
- [SliderItem](./src/components/SliderItem.vue)
- [SliderPagination](./src/components/SliderPagination.vue)
- [SpotlightCard](./src/components/SpotlightCard.vue)
- [TextReveal](./src/components/TextReveal.vue)
- [TextRevealToken](./src/components/TextRevealToken.vue)
- [TextShimmer](./src/components/TextShimmer.vue)
## Composables
When working with specific features, you can use the provided composables. Here is a list of all available composables:
- [Modals](./src/composables/modals.ts)
## Mapbox Tools
This library supports Mapbox. Here is a list of all available Mapbox components and composables:
- [useMap](./src/mapbox/composables.ts)
- [MapboxCluster](./src/mapbox/components/MapboxCluster.vue)
- [MapboxImage](./src/mapbox/components/MapboxImage.vue)
- [MapboxImages](./src/mapbox/components/MapboxImages.vue)
- [MapboxLayer](./src/mapbox/components/MapboxLayer.vue)
- [MapboxMap](./src/mapbox/components/MapboxMap.vue)
- [MapboxMarker](./src/mapbox/components/MapboxMarker.vue)
- [MapboxSource](./src/mapbox/components/MapboxSource.vue)
## Utilities
UI development is a lot about colors and typography. Here is a list of all available utilities:
- [Theme Colors](./src/utils/theme-colors.ts)
## License
[MIT](./LICENSE) License © 2023-PRESENT [Johann Schopplich](https://github.com/johannschopplich)