Quick Start

Introduction

Anchor Vue Components provide a set of pre-built Vue wrappers around the native Anchor web components. They offer a familiar Vue developer experience with kebab-case props, Vue event syntax, and template composition while leveraging the performance and portability of web components.

To get started with Anchor Vue, you'll need to install the Vue component library package.

Installation

Install Anchor Vue library

npm install @tryg/vue-ui-library

pnpm install @tryg/vue-ui-library

yarn add @tryg/vue-ui-library

bun add @tryg/vue-ui-library

Setup

Import components individually for optimal bundle size:

YourComponent.vue

<script setup>
import { AnchorButton, AnchorInput } from '@tryg/vue-ui-library';
</script>

<template>
  <anchor-button text="Click me" variant="primary"></anchor-button>
  <anchor-input label="Name"></anchor-input>
</template>

Or register the component library as a Vue plugin in your main.js:

main.js

<script setup>
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');
</script>

Vite Configuration

If you're using Vite, configure Vue to treat hyphenated tags as custom elements:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-'),
        },
      },
    }),
  ],
})

Props and Events

Vue components use kebab-case props and Vue event syntax:

<template>
  <anchor-button
    text="Submit"
    variant="primary"
    icon="check"
    icon-placement="right"
    @click="handleClick"
  ></anchor-button>
</template>

Reactive bindings use the colon prefix:

<template>
  <anchor-dialog :is-visible="isOpen">
    Dialog content
  </anchor-dialog>
</template>

Migrating from WebComponents

If you're currently using @tryg/ui-library with native web components, migrating to @tryg/vue-ui-library provides a more idiomatic Vue experience:

Plugin registration: Install ComponentLibrary as a Vue plugin to auto-register all components.
Props: Use kebab-case attributes (is-visible, variant) — Vue's convention for custom elements.
Events: Use Vue event syntax (@click) instead of browser custom events (@myEvent).
Reactivity: Bind dynamic values with :prop="value" instead of imperative DOM updates.

<!-- Before: WebComponents -->
<script setup>
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-button';
  defineCustomElement();
</script>
<template>
  <anchor-button text="Click me"></anchor-button>
</template>

<!-- After: Vue Components -->
<script setup>
import { AnchorButton } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-button text="Click me" @click="handleClick"></anchor-button>
</template>