website·Indexed 29 days ago
https://talalalmrka.github.io/fadgram-vueA comprehensive UI component library built for Vue 3 and TypeScript, utilizing Tailwind CSS 4. It includes a wide range of components such as Buttons, Alerts, Accordions, Tabs, and various form elements like Rich Select, Icon Picker, and Textareas.
npm i fadgram-vue@latestfadgram-vue package to reduce the final bundle size and maintain better control over the application structure.import { createApp } from 'vue'
import App from './App.vue'
import { FgAccordion, FgAlert } from 'fadgram-vue' // Import specific components
const app = createApp(App)
// Register the component locally or globally
app.component('FgAccordion', FgAccordion)
app.component('FgAlert', FgAlert)
app.mount('#app')FgAlert component from the fadgram-vue package to use it in your Vue application.import { FgAlert } from 'fadgram-vue'fadgram-vue package.import { FgAccordion, FgAccordionItem, FgAccordionHead, FgAccordionBody } from 'fadgram-vue'FgLoader component provides a visual loading indicator. It can be imported from the fadgram-vue package and used in Vue templates as <fg-loader />.import { FgLoader } from 'fadgram-vue'<template>
<fg-loader />
</template>FgIcon component is used to display icons within a Vue application. It requires an icon prop which accepts a string representing the icon class to be displayed. A full list of available icon names can be found in the Fadgram icons list documentation.<template>
<fg-icon icon="bi-emoji-smile-fill" />
</template>
<script setup>
import { FgIcon } from 'fadgram-vue'
</script>FgSelect component from the fadgram-vue library to use it in your Vue project.import { FgSelect } from 'fadgram-vue'FgButton from the fadgram-vue package.import { FgButton } from 'fadgram-vue'To use Fadgram Vue, ensure your development environment meets the following requirements:
FgTextarea component from the fadgram-vue package to use it in your Vue application.import { FgTextarea } from 'fadgram-vue'