diff --git a/.storybook/manager.ts b/.storybook/manager.ts new file mode 100644 index 0000000..289a6cd --- /dev/null +++ b/.storybook/manager.ts @@ -0,0 +1,6 @@ +import { addons } from '@storybook/manager-api' +import vuelaceTheme from './vuelace' + +addons.setConfig({ + theme: vuelaceTheme +}) diff --git a/.storybook/vuelace.ts b/.storybook/vuelace.ts new file mode 100644 index 0000000..d84a6d5 --- /dev/null +++ b/.storybook/vuelace.ts @@ -0,0 +1,8 @@ +import { create } from '@storybook/theming/create' + +export default create({ + base: 'dark', + brandTitle: 'Vuelace', + brandUrl: 'https://skillbill.github.io/vuelace-3/', + brandTarget: '_self' +}) diff --git a/README.md b/README.md index c0064a1..e5d4038 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ -# Vuelace 3 🎨✨ +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![npm version](https://badge.fury.io/js/@skillbill%2Fvuelace-3.svg)](https://badge.fury.io/js/@skillbill%2Fvuelace-3) -Vuelace is a powerful UI component library built on top of Shoelace, designed to streamline the process of creating beautiful and responsive user interfaces for Vue.js applications leveraging the reliability of web components +# Vuelace-3 🎨✨ + +Vuelace-3 is a powerful UI component library built on top of Shoelace, designed to streamline the process of creating beautiful and responsive user interfaces for Vue.js applications leveraging the reliability of web components ## Recommended IDE Setup @@ -51,7 +54,7 @@ npm run lint ### Using npm -To install the library inside your project run: +Vuelace-3 is available at [npm](https://www.npmjs.com/package/@skillbill/vuelace-3). To install the library inside your project run: ```sh npm i @skillbill/vuelace-3 @@ -85,9 +88,13 @@ import '@skillbill/vuelace-3/styles/vuelace.css' import '@skillbill/vuelace-3/styles/theme_primevue.css' import { installVuelace } from '@skillbill/vuelace-3' +import App from './App.vue' + const app = createApp(App) installVuelace(app) + +app.mount('#app') ``` ### Add icons diff --git a/src/stories/docs/Introduction.mdx b/src/stories/docs/Introduction.mdx index a34e68e..c4cea2b 100644 --- a/src/stories/docs/Introduction.mdx +++ b/src/stories/docs/Introduction.mdx @@ -28,6 +28,9 @@ backgroundColor: 'white' }} > + + GitHub + GitHub @@ -41,21 +44,24 @@ [Vuelace-3](https://www.github.com/Skillbill/vuelace-3) is a UI component library for Vue, built on top of [Shoelace](https://shoelace.style/) and [PrimeVue](https://primevue.org/). -The scope was to have a friendly components wrapper for the Shoelace web components ready to use in Vue. +The scope is to have a friendly components wrapper for the Shoelace web components ready to use in Vue. We also included some utilities to use icons comfortably and fulfill missing components with PrimeVue's ones. ## Details -We don't describe components in detail here because there is the storybook components list on the left panel. +If you want to take a look at the components, you can find them on the left panel. If you need to build a site using Vue and you are looking for a ready-to-use components for crud, forms, and so on, you are in the right place. ## Quick start +Vuelace-3 is available at [npm](https://www.npmjs.com/package/@skillbill/vuelace-3). It is an easy-to-use vue3 library, you can find every updated detail in the [README](https://github.com/Skillbill/vuelace-3/blob/main/README.md) +You can also find a video tutorial [here](https://youtu.be/uYN2l9t50bc) + ## Support Do you have questions, suggestions or do you need help? diff --git a/src/stories/docs/public/assets/vuelace-logo.svg b/src/stories/docs/public/assets/vuelace-logo.svg new file mode 100644 index 0000000..46cf3ac --- /dev/null +++ b/src/stories/docs/public/assets/vuelace-logo.svg @@ -0,0 +1,3032 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file