Developing Your First Custom Component
# Developing Your First Custom Component
Custom components are built using the Vue framework. If you:
Have Vue development experience, you can start developing custom components directly.
Are new to Vue, we recommend learning the basics of Vue (Vue Official Site (opens new window)) before proceeding with this guide.
Here’s a simple example:
# Step 1: Create a basic Vue component
File name: firstComponent.vue
<template>
<div class="demo">
Hello: {{ myName }}
</div>
</template>
<script>
export default {
data() {
return {
myName: "Developer233"
}
}
}
</script>
<style>
.demo {
width: 100%;
}
</style>
# Step 2: Upload the component
Navigate to the Custom Components section in the admin console, click New, and upload the file.
# Step 3: Use the component in the Layout Designer
Find the Custom Components toolbox in the Layout Designer, then drag and drop the component into your page layout.
# Step 4: View the rendered component
The component will appear in the frontend interface as shown below:
