Vue Project with AY Component

Dokumentasi ini menjelaskan cara setup project Vue, install dependency, build project, dan menggunakan komponen dari ay-component-vue.

Project Setup

Install Dependencies

Menggunakan NPM

npm install

Menggunakan PNPM

pnpm install

Menggunakan Bun

bun install

Setup untuk Push ke NPM

1. Pastikan sudah login di NPM:

npm login

2. Tambahkan field name, version, dan main di package.json.
3. Build package jika diperlukan:

npm run build

4. Publish package ke NPM:

npm publish

Catatan: Gunakan npm version patch|minor|major untuk update versi sebelum push.

Build Project

NPM

npm run build

PNPM

pnpm build

Bun

bun run build

Catatan: Pastikan script build sudah ada di package.json.

Menggunakan Komponen ay-component-vue

Install Package

NPM

npm install ay-component-vue

PNPM

pnpm add ay-component-vue

Bun

bun add ay-component-vue

Setup main.js / main.ts

Tambahkan plugin AyComponentVue agar komponen dapat digunakan secara global.

import { createApp } from 'vue'
import App from './App.vue'

// Import plugin dan CSS
import AyComponentVue from 'ay-component-vue'
import 'ay-component-vue/dist/ay-component-vue.css'

// Buat aplikasi Vue
const app = createApp(App)

// Gunakan plugin
app.use(AyComponentVue)

// Mount aplikasi
app.mount('#app')

Contoh Penggunaan Komponen

Setelah setup di atas, semua komponen dari ay-component-vue dapat digunakan langsung di template:

<template>
  <div>
    <AyLabel>
      Hello World!
    </AyLabel>
    <!-- Tambahkan komponen lain sesuai kebutuhan -->
  </div>
</template>

Global Plugin Function (Opsional)

AyComponentVue menyediakan fungsi global yang bisa diakses di seluruh aplikasi Vue:

app.config.globalProperties.$ayComponent = () => {
  console.log("AY Component plugin active");
}

// Contoh penggunaan di komponen
export default {
  mounted() {
    this.$ayComponent(); // akan menampilkan log di console
  }
}

Lisensi

Lisensi sesuai dengan paket ay-component-vue yang digunakan di project.