@your-scope/my-vue-lib

A Vue 3 component library built with TypeScript, PrimeVue, PrimeFlex, and Tailwind CSS.

Installation

npm install @your-scope/my-vue-lib

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

npm install vue@^3.3.0 primevue@^3.26.1 primeflex@^3.3.0 primeicons@^6.0.1 tailwindcss@^3.4.1

Setup

1. Install PrimeVue and Dependencies

npm install [email protected] [email protected] [email protected]

2. Configure PrimeVue in Your App

In your main.ts or main entry file:

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import App from './App.vue'

// Import PrimeVue theme
import 'primevue/resources/themes/saga-blue/theme.css' // or your preferred theme
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'

const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

3. Configure Tailwind CSS

Create or update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/@your-scope/my-vue-lib/**/*.{vue,js,ts}" // Include library components
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Use Components

<script setup lang="ts">
import { MyButton } from '@your-scope/my-vue-lib'
</script>

<template>
  <MyButton label="Click me" />
</template>

Development

This template uses Vue 3 <script setup> SFCs. Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.