Vue Core

vue-core is a collection of core Vue.js components designed to streamline asset management and simplify form creation in your Vue projects. These components provide a flexible, powerful set of tools for handling images, videos, form fields, buttons, anchor, external links, etc.

Installation

npm install @terrahq/vue-core

Globally import

Refer to the individual component sections below for detailed usage instructions.

Vanilla Vue Project

To use a component in a standard Vue project, import it as follows:

import { Asset } from '@terrahq/vue-core';

const imageExamplePayload = ref({
  type: 'Image',
  url: 'https://example.com/image.png',
  alt: 'Placeholder Image',
  customClass: 'my-custom-image-class',
  attributes: {
    width: 800,
    height: 600
  }
});

<Asset :payload="imagePayload" />

Astro Project with Vue

For projects using Astro with embedded Vue, create a file named \_app.ts and include the following code:

import type { App } from "vue";
import Asset from "@terrahq/vue-core";
// Imports for the rest of the components you want to use 

export default (app: App) => {
    app.use(Asset);
    // Rest of app.use(component)
};

Then, integrate the file in your astro.config.mjs specifying the path to your file:

export default defineConfig({
    integrations: [
        vue({ appEntrypoint: "/src/pages/_app" }),
    ],
});

Now, you can use the components in any .vue file.

Components

Asset

The Asset component dynamically renders different media types (Image, Video, or Lottie animations) based on the type property provided in the payload.

Props

payload (Object, required): An object defining the type and settings of the asset. Example properties are listed below.

• Common Properties

  • type (String): The type of asset to render. Options: "Image", "Video", "Lottie".
  • customClass (String, optional): Custom CSS class for styling.

• Image Specific Properties

  • url (String, required): URL of the image.
  • alt (String, optional): Alternative text for the image.
  • lazy (Boolean, optional): Enables lazy loading.
  • attributes (Object, optional): Additional HTML attributes (e.g., width, height).
  • decodingAsync (Boolean, optional): If true, sets the decoding attribute to "async".
  • fetchPriority (Boolean, optional): If true, sets the fetchpriority attribute to "high".

• Video Specific Properties

  • video_url (String): URL of the video if embedded from YouTube or Vimeo.
  • video_file (String): Path to the video file if self-hosted.
  • format (String, optional): Video format (e.g., "mp4").
  • poster_url (String, optional): URL of the video poster image.
  • video_type (String): Specifies video type ("url" or "file").
  • isBoostify (Boolean, optional): If true, renders custom Boostify structure.
  • hasPosterImg (Boolean, optional): If true, enables poster image display.
  • boostifyClass (String, optional): CSS class specific to Boostify videos.

• Lottie Animation Properties

  • url (String, required): Path to the Lottie JSON file.
  • loop (Boolean, optional): If true, animation loops by default.
  • autoplay (Boolean, optional): If true, animation plays automatically.
  • animType (String, optional): Animation type, usually "svg".

:warning: For lotties use dependency @terrahq/helpers.

Image Asset Example

<template>
  <Asset :payload="imagePayload" />
</template>

<script setup>
const imagePayload = {
  type: 'Image',
  url: 'https://example.com/image.png',
  alt: 'Example Image',
  customClass: 'image-class',
  attributes: {
    width: 800,
    height: 600,
  },
};
</script>

Video Asset Example

<template>
  <Asset :payload="videoPayload" />
</template>

<script setup>
const videoPayload = {
  type: 'Video',
  video_type: 'url', // or 'file' for video file
  video_url: 'https://www.youtube.com/watch?v=example', // or path to video file
  customClass: 'video-class',
  isBoostify: false,
};
</script>

Lottie Asset example

<template>
  <Asset :payload="lottiePayload" />
</template>

<script setup>
const lottiePayload = {
  type: 'Lottie',
  url: 'https://example.com/animation.json',
  customClass: 'lottie-class',
  loop: true,
  autoplay: true,
  animType: 'svg',
};
</script>

ButtonLink

The ButtonLink component is a flexible utility for creating links, buttons, or scrollable elements based on a configuration object. It supports multiple behaviors such as navigating to internal or external links, scrolling to sections, and opening modals.

Props

• payload (Object, required): Configuration object defining the behavior and settings of the component.
• href (String, optional): URL for the link (used for internal or external links).
• label (String, optional): Text label for the element (used if no content is passed via slot).
• option (String, optional): Determines the type of element to render. Supported values:
  • 'internal_link': Renders an <a> tag pointing to an internal URL.
  • 'external_link': Renders an <a> tag pointing to an external URL (opens in a new tab).
  • 'scroll_to_section': Renders a <button> for scrolling to a specific section.
  • 'button': Renders a generic <button>.
• section_id (String, optional): ID of the section to scroll to (used with scroll_to_section).
• modal_id (String, optional): ID of the modal to open (used with open_modal).
• customClass (String or Array, optional): Custom CSS class or classes to apply.
• ariaLabel (String, optional): Accessibility label for the element.

Internal Link Example

<template>
  <ButtonLink :payload="internalLinkPayload" />
</template>

<script setup>
// NOTE: For Sanity projects, use getURL() helper function for internal links. See src/utilities/astro/getUrl.js  on Terra front repository for reference.
const internalLinkPayload = {
  href: '/about-us',
  option: 'internal_link',
  label: 'About Us',
  customClass: 'link-class',
};
</script>

External Link Example

<template>
  <ButtonLink :payload="externalLinkPayload" />
</template>

<script setup>
const externalLinkPayload = {
  href: 'https://example.com',
  option: 'external_link',
  label: 'Visit Example',
  customClass: 'external-link-class',
};
</script>

Scroll to Section Example

<template>
  <ButtonLink :payload="scrollPayload" />
</template>

<script setup>
const scrollPayload = {
  option: 'scroll_to_section',
  label: 'Scroll Down',
  section_id: 'section-id',
  customClass: 'scroll-button-class',
};
</script>

Open Modal Example

<template>
  <ButtonLink :payload="modalPayload" />
</template>

<script setup>
const modalPayload = {
  option: 'open_modal',
  label: 'Open Modal',
  modal_id: 'modal-id',
  customClass: 'modal-button-class',
};
</script>

Default Element Example

<template>
  <ButtonLink :payload="defaultPayload" />
</template>

<script setup>
const defaultPayload = {
  label: 'Default Content',
};
</script>

Changelog

• 0.1.4: Remove console logs
• 0.1.2: Fix missing js build files
• 0.1.1: Add helper function to handle cleanup of alt string
• 0.1.0: Remove modal option from button link and fix lazyloading default to false
• 0.0.8: Fix Video asset slot rendering.
• 0.0.7: Update lottie payload. Loop and name now convert boolean to string properly.
• 0.0.6: Update lottie payload with dynamic url, loop and name.