Přidání About boxu do Vue aplikace

Živá ukázka

Toto je About box samotné aplikace AboutTheApp. Přepnutím varianty uvidíte další podoby. Kód níže zobrazí přesně tento box. Pro svou aplikaci v něm změňte 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>

Přidání do Vue aplikace ve 4 krocích

About box je Web Component, takže nepotřebuje plugin pro Vue ani obalující komponentu. Obsah se načítá z AboutTheApp a vaše aplikace na něj jen odkazuje aliasem.

1. 1

   Vytvořte si produkt

   Vytvořte ho v AboutTheApp a poznamenejte si jeho alias. V panelu Integrovat na kartě produktu najdete stejný kód jako v živé ukázce, už s vaším aliasem.

2. 2

   Načtěte skript

   Vložte skript do index.html. V Nuxtu ho přidejte do app.head.script v souboru nuxt.config.ts.

3. 3

   Označte about-the-app jako vlastní prvek

   Nastavte compilerOptions.isCustomElement pro plugin Vue v souboru vite.config.ts podle ukázky níže. V Nuxtu použijte vue.compilerOptions.isCustomElement v nuxt.config.ts.

4. 4

   Umístěte prvek

   Použijte <about-the-app alias="aboutthe.app" /> v libovolné šabloně .vue, například v patičce nebo na obrazovce nastavení.

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

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

Verze z package.json

Vite umí při sestavení načíst verzi z package.json, takže ji můžete navázat na atribut version. Vue ji nastaví jako HTML atribut, který About box čte.

Box pak ukáže přesně tuto verzi. Poznámky k vydání se zobrazí, pokud stejná verze existuje v katalogu verzí produktu a je veřejná nebo je neveřejná a box je odemčený odemykacím kódem. Pokud si nejste jistí, odkud verzi vzít, přečtěte si článek Zobrazení verze aplikace.

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

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

Výběr podoby a vzhledu

Podobu určuje atribut variant: card (výchozí), footer, compact, dialog, support, version, maker, credits nebo link. Každou si můžete vyzkoušet v živé ukázce výše.

Pokud nastavíte visual-style="host" a palette="host", box převezme písmo, zaoblení a barvy z vaší aplikace. Atribut appearance přepíná mezi světlým, tmavým a automatickým režimem podle nastavení systému.

Časté otázky