A demo vue page where Frappe UI components are rendered

frappe_ui_components.vue

<template>
  <div class="max-w-xl mt-8 space-y-4">
    <Alert title="Info">Your account has been created.</Alert>

    <div class="flex space-x-2">
      <Avatar label="John Doe" />
      <Avatar label="John Doe" imageURL="https://picsum.photos/200" />
    </div>

    <div class="flex space-x-2">
      <Badge>Open</Badge>
      <Badge color="green">Completed</Badge>
      <Badge color="red">Error</Badge>
      <Badge color="yellow">Closed</Badge>
      <Badge color="blue">Running</Badge>
    </div>

    <div class="flex space-x-2">
      <Button>Default</Button>
      <Button type="primary">Primary</Button>
      <Button type="danger">Danger</Button>
      <Button type="white">White</Button>
      <Button icon="x" />
      <Button icon-left="menu">Menu</Button>
      <Button icon-right="external-link">Link</Button>
      <Button :loading="true">Loading</Button>
    </div>

    <Card title="Heading" subtitle="Sub text">
      <div class="text-base">Card content</div>
    </Card>

    <div>
      <Button @click="dialogOpen = true">Open Dialog</Button>
      <Dialog title="This is Dialog" v-model="dialogOpen">
        <div class="text-base">Dialog content</div>
      </Dialog>
    </div>

    <Dropdown :items="[{ label: 'Option 1' }, { label: 'Option 2' }]">
      <template v-slot="{ toggleDropdown }">
        <Button @click="toggleDropdown()">Open Dropdown</Button>
      </template>
    </Dropdown>

    <ErrorMessage message="There was an error" />
    <SuccessMessage message="Completed successfully" />

    <div class="flex items-center space-x-2">
      <FeatherIcon class="w-4 h-4" name="menu" />
      <FeatherIcon class="w-4 h-4" name="circle" />
      <FeatherIcon class="w-4 h-4" name="arrow-left" />
      <FeatherIcon class="w-4 h-4" name="arrow-right" />
      <GreenCheckIcon class="w-4 h-4" />
    </div>

    <Input label="Text" type="text" value="" placeholder="Text" />
    <Input label="Long Text" type="textarea" value="" placeholder="Textarea" />
    <Input
      label="Select"
      type="select"
      value=""
      :options="['Option 1', 'Option 2']"
    />
    <Input label="Check" type="checkbox" value="" />

    <div class="divide-y">
      <ListItem title="List Item 1" subtitle="Sub text 1">
        <template #actions>
          <Button icon="more-horizontal" />
        </template>
      </ListItem>
      <ListItem title="List Item 2" subtitle="Sub text 2" />
    </div>

    <div class="flex items-center h-6 space-x-2">
      <LoadingText />
      <LoadingIndicator />
      <Spinner class="w-5" />
    </div>
  </div>
</template>
<script>
import Alert from "frappe-ui/src/components/Alert.vue";
import Avatar from "frappe-ui/src/components/Avatar.vue";
import Badge from "frappe-ui/src/components/Badge.vue";
import Button from "frappe-ui/src/components/Button.vue";
import Card from "frappe-ui/src/components/Card.vue";
import Dropdown from "frappe-ui/src/components/Dropdown.vue";
import ErrorMessage from "frappe-ui/src/components/ErrorMessage.vue";
import SuccessMessage from "frappe-ui/src/components/SuccessMessage.vue";
import FeatherIcon from "frappe-ui/src/components/FeatherIcon.vue";
import GreenCheckIcon from "frappe-ui/src/components/GreenCheckIcon.vue";
import ListItem from "frappe-ui/src/components/ListItem.vue";
import LoadingText from "frappe-ui/src/components/LoadingText.vue";
import LoadingIndicator from "frappe-ui/src/components/LoadingIndicator.vue";
import Spinner from "frappe-ui/src/components/Spinner.vue";
export default {
  name: "Home",
  data() {
    return {
      txt: "",
      dialogOpen: false,
    };
  },
  components: {
    Alert,
    Avatar,
    Badge,
    Button,
    Card,
    Dropdown,
    ErrorMessage,
    SuccessMessage,
    FeatherIcon,
    GreenCheckIcon,
    ListItem,
    LoadingText,
    LoadingIndicator,
    Spinner,
  },
};
</script>