Vue

Vue has great support for custom elements and can be used directly.

Installation

To use Forge in your Vue application, install the following package from npm:

npm install @tylertech/forge

Configure Vue

To make sure Vue plays nice with custom elements, you need to configure the compiler to allow certain elements. The Vue documentation has a section on using custom elements in Vue that explains what you need to do.

If you’re using the Vue plugin with Vite, you can use the following in your Vite config:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

Loading the Tyler Font

Edit your index.html file and add the following <link> tag to the <head> section load the Tyler font:

<link rel="stylesheet" href="https://cdn.forge.tylertech.com/v1/css/tyler-font.css" />

This will configure the default font family for your application, and load the required font weights and styles.

Importing Components

To use Forge components in your Vue application, import the components you need from the @tylertech/forge package.

<template>
  <div>
    <forge-scaffold>
      <forge-card slot="body">
        <forge-button>Click me</forge-button>
      </forge-card>
    </forge-scaffold>
  </div>
</template>

<script setup>
  import '@tylertech/forge/scaffold';
  import '@tylertech/forge/button';
  import '@tylertech/forge/card';
</script>

Importing Styles

To use the default Forge styles in your Vue application, import the forge.css file from the @tylertech/forge package.

<style>
@import '@tylertech/forge/dist/forge-core.css';
@import '@tylertech/forge/dist/forge.css';
</style>

Dark Theme

If you want to use the dark theme, import the forge-dark.css file:

<style>
@import '@tylertech/forge/dist/forge-dark.css';
</style>