shared-vue-components

Vuetify Component Library

This is a Vue 3 component library built with Vuetify, designed for easy integration into multiple projects without the need for an index.html file.

Installation

To install the component library, you can use npm or yarn. Run the following command in your project directory:

npm install vuetify-component-library

or

yarn add vuetify-component-library

Usage

To use the components in your Vue application, import the library in your main entry file (e.g., main.ts or main.js):

import { createApp } from 'vue';
import App from './App.vue';
import VuetifyComponentLibrary from 'vuetify-component-library';

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

Available Components

Button

To use the Button component, you can import it directly:

<template>
  <Button label="Click Me" @click="handleClick" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Button from 'vuetify-component-library/src/components/Button/Button.vue';

export default defineComponent({
  components: {
    Button,
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    },
  },
});
</script>

Card

Similarly, you can use the Card component:

<template>
  <Card title="Card Title" content="This is a card." />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Card from 'vuetify-component-library/src/components/Card/Card.vue';

export default defineComponent({
  components: {
    Card,
  },
});
</script>

Styles

You can also import the global styles provided by the library:

@import 'vuetify-component-library/src/styles/index.css';

Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License.