Appearance
Getting Started
Vue Components Lib is written in Vue 3 + Typescript. There are no plans to support Vue 2.x.
Prerequisite
Vue Components Lib uses a couple of peer dedendencies that will be installed. All of them come from @fasttrack-solutions private package registry on Github.
DANGER
Make sure to add .npmrc file in the root folder. Auth Token can be found in 1Password.
bash
//npm.pkg.github.com/:_authToken=xxx
@fasttrack-solutions:registry=https://npm.pkg.github.com//npm.pkg.github.com/:_authToken=xxx
@fasttrack-solutions:registry=https://npm.pkg.github.comInstall
You can install vue-components-lib by opening your terminal in your project and running the following command:
With pnpm:
bash
$ pnpm add @fasttrack-solutions/vue-components-lib$ pnpm add @fasttrack-solutions/vue-components-libWith yarn:
bash
$ yarn add @fasttrack-solutions/vue-components-lib$ yarn add @fasttrack-solutions/vue-components-libWith NPM:
bash
$ npm i @fasttrack-solutions/vue-components-lib$ npm i @fasttrack-solutions/vue-components-libUsage
TIP
If your application supports typescript make sure to use lang="ts" to leverage full type safe and intellisense.
Use each component in the library on a case by case basis:
html
<script setup lang="ts">
import { FTButton } from "@fasttrack-solutions/vue-components-lib";
</script>
<template>
<FTButton primary>
Hello ✋
</FTButton>
</template><script setup lang="ts">
import { FTButton } from "@fasttrack-solutions/vue-components-lib";
</script>
<template>
<FTButton primary>
Hello ✋
</FTButton>
</template>CSS
Make sure to install vue components lib's CSS in your main.ts file.
js
import '@fasttrack-solutions/vue-components-lib/dist/ft-notifications.css';
import '@fasttrack-solutions/vue-components-lib/dist/style.css';import '@fasttrack-solutions/vue-components-lib/dist/ft-notifications.css';
import '@fasttrack-solutions/vue-components-lib/dist/style.css';