SyncfusionExamples · maheshtps · Nov 30, 2023 · Nov 30, 2023
diff --git a/README.md b/README.md
@@ -1,2 +1,15 @@
-# getting-started-with-the-vue-avatar-component
+# Getting Started with the Vue Avatar Component
+
 A quick-start project that helps you to integrate a Vue Avatar component in a Vue application. It includes a code snippet for different sizes and types of avatars. It also includes a code snippet for integrating the Avatar with the other UI components.
+
+Refer to the following documentation to learn about the Vue Avatar component: 
+https://ej2.syncfusion.com/vue/documentation/avatar/vue-3-getting-started
+
+Check out this online example of the Vue Avatar component:
+https://ej2.syncfusion.com/vue/demos/#/material/avatar/default.html
+
+## Project prerequisites
+Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
+
+## How to run this application
+To run this application, you need to first clone the `getting-started-with-the-vue-avatar-component` repository and then open it in Visual Studio Code. Now, simply build and run your project to view the output.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "myvueapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-layouts": "^23.2.4",
+    "vue": "^3.3.8"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,83 @@
+<script>
+
+</script>
+
+<template>
+<div>
+  <!-- <div class="e-avatar image e-avatar-small"></div>
+  <div class="e-avatar image"></div> -->
+
+  <div class="container-div">
+    <div class="e-card e-custom-card">
+        <div class="e-card-header">   
+           <div class="e-avatar image e-avatar-xlarge e-avatar-circle"></div>  
+        </div>
+        <div class="e-card-header">
+            <div class="e-card-header-caption center">
+                <div class="e-card-header-title name">Laura Callahan</div>
+                <div class="e-card-sub-title">Sales Coordinator</div>
+            </div>
+        </div>
+        <div class="e-card-content">
+            <p class="avatar-content">
+                Laura received a BA in psychology from the University of Washington. She has also completed a course
+                in business French. She reads and writes French.
+            </p>
+        </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
+
+.e-avatar.image{
+  background-image: url(https://ej2.syncfusion.com/vue/demos/img/pic02.cbd95002.png);
+  margin: 2px;
+}
+.container-div .name {
+  margin-top: 10px;
+}
+
+.container-div {
+  max-width: 300px;
+  margin: auto;
+  min-height: 400px;
+}
+
+.e-custom-card {
+  overflow: visible;
+  margin-top: 80px;
+  border-width: 1px;
+  padding: 1px;
+}
+
+.e-custom-card .e-card-header {
+  text-align: center;
+  padding: 0px;
+}
+
+.e-custom-card .e-avatar {
+  font-size: 25px;
+  position: absolute;
+  bottom: 160px;
+  left: auto;
+  box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
+}
+
+.e-card.e-custom-card :nth-child(3) {
+  padding: 10px 0px 10px 0px;
+}
+
+.e-custom-card.e-card .e-card-content {
+  overflow: visible;
+}
+
+.avatar-content {
+  text-align: center;
+  color: rgb(94, 94, 94);
+}
+
+</style>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import {registerLicense} from '@syncfusion/ej2-base';
+registerLicense("Ngo9BigBOggjHTQxAR8/V1NHaF5cXmVCf1FpRGdGfV5yd0VHYlZRQXxcR00SNHVRdkdgWH5fdHRVRmVfV0FwX0o=");
+
+createApp(App).mount('#app')
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})