Add an About Box to a Vue App

Live example

This is the About box of AboutTheApp itself. Switch the variant to see other layouts. The code below renders exactly this box. For your own app, change the alias.

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Add it to a Vue app in 4 steps

The About box is a Web Component, so it needs no Vue plugin or wrapper component. Its content comes from AboutTheApp and your app only references it by alias.

1. 1

   Create your product

   Create it in AboutTheApp and note its alias. The Integrate panel on the product card has the same code as the live example, already filled in with your alias.

2. 2

   Load the script

   Add the script tag to index.html. In Nuxt, add it to app.head.script in nuxt.config.ts.

3. 3

   Mark about-the-app as a custom element

   Set compilerOptions.isCustomElement for the Vue plugin in vite.config.ts, as shown below. In Nuxt, use vue.compilerOptions.isCustomElement in nuxt.config.ts.

4. 4

   Place the element

   Use <about-the-app alias="aboutthe.app" /> in any .vue template, for example in the footer or on the settings screen.

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "about-the-app",
        },
      },
    }),
  ],
});

Show the version from package.json

Vite can import the version from package.json at build time, so you can bind it to the version attribute. Vue sets it as an HTML attribute, which is what the About box reads.

The box then shows exactly that version. Release notes appear when the same version exists in the product's version catalog and is public or is private and the box is unlocked with an unlock code. If you're not sure where your version comes from, read how to display the app version.

<script setup lang="ts">
import { version } from "../package.json";
</script>

<template>
  <footer>
    <about-the-app alias="aboutthe.app" variant="footer" :version="version" />
  </footer>
</template>

Choose the layout and the look

The variant attribute picks the layout: card (default), footer, compact, dialog, support, version, maker, credits or link. You can try each one in the live example above.

If you set visual-style="host" and palette="host", the box takes the font, corner radius and colors from your app. The appearance attribute switches between light, dark and auto, which follows the system setting.

Frequently asked questions