Getting started

Implementing a Button

In this quick tutorial, we will install and style the Button component.

1. Install the library

Install the component from your command line.

npm install fishtvue

pnpm add fishtvue

yarn add fishtvue

2. Initialization of the project

Initializing the FishtVue library in the project

import { createApp } from "vue"
import FishtVue from "fishtvue/config"
import App from "./App.vue"

const app = createApp(App)
app.use(FishtVue)

app.mount("#app")

3. Import the Button

Adding the component to the appropriate place with the name.

<script setup lang="ts">
  import Button from "fishtvue/button/Button.vue"
</script>

<template>
  <Button>Open</Button>
</template>

Demo

Here's a complete demo.

Summary

The steps above outline briefly what's involved in using a FishtVue component in your application.

These components are low-level enough to give you control over how you want to wrap them. You're free to introduce your own high-level API to better suit the needs of your team and product.

In a few simple steps, we've implemented a fully accessible Button component, without having to worry about many of its complexities.