Component Structure

The project follows a structured component hierarchy to separate form logic, basic UI elements, and rendering templates.

AppForm Components

Located in components/AppForm/, these components build the editor interface.

  • Profile.vue: Inputs for Name, About, and Photo URL.
  • SocialLinks.vue: Grid layout of inputs for supported social platforms.
  • Links.vue: A complex component using vuedraggable to manage the list of external links. It allows adding, removing, and reordering links.
  • Preview.vue: Wraps the Template component in a mobile-phone-like container to simulate the final look.
  • Hr.vue: A simple horizontal rule separator.

Base Components

Located in components/Base/.

  • FormSection.vue: A layout wrapper providing a title and description column on the left and a content slot on the right.
  • Loading.vue: A comprehensive SVG spinner used during data hydration.

Templates

Located in components/Templates/.

  • Simple.vue: The primary rendering component. It accepts a prop :acc (the account data object) and renders the avatar, bio, social icons, and list of external links.

ExternalLink.vue

Located in components/ExternalLink.vue.

  • Renders a single button for the external links list. It dynamically loads icons using nuxt-icon based on the provided icon key.