How to Create Custom Vue Components for Your Landing Page Like Amazon [Responsive + Customizable]

Creating a stunning and responsive landing page is essential for capturing your audience's attention and driving conversions. With Selldone Landing Builder, you can effortlessly enhance your landing pages by integrating custom Vue components. In this guide, I'll walk you through the process of creating a customizable Vue component, ensuring your landing page stands out with responsiveness and flexibility.

Why Use Custom Vue Components?

Vue.js is a progressive JavaScript framework known for its flexibility and ease of integration. By leveraging Vue components in your landing pages, you can:

• Enhance Interactivity: Create dynamic elements that respond to user actions.
• Ensure Responsiveness: Design components that look great on all devices.
• Boost Customization: Tailor components to match your brand and functionality needs.
• Utilize Vuetify: Incorporate Vuetify’s rich library of UI components for a polished look.

Prerequisites

Before diving in, ensure you have:

1. Basic Knowledge of Vue.js: Familiarity with Vue3 and its component structure.
2. Access to Selldone Landing Builder: Ability to edit and manage landing pages.
3. Code Editor: Preferred environment for writing and editing your Vue components (optional for external test).

Step-by-Step Guide

1. Write Your Custom Vue Component

Start by crafting your Vue component. You can choose between plain HTML or leveraging Vue3 and Vuetify components for a more robust design. Below are two sample structures to get you started.

Get Sample Codes: https://github.com/selldone/storefront-sdk/tree/main/test

But I use ChatGPT o1 model to create the code.

How to use ChatGPT to create custom Vue component?

You can craft your request as a prompt and provide ChatGPT with sample code to help it understand how to fetch products when you need to retrieve a list of products in your component. In this ChatGPT conversation, you can see an example of how I asked it to create a component: ChatGPT Conversation to Create a Vue Component.

https://chatgpt.com/share/6739d3b4-b070-800f-96bc-87d9e2c6ce94

 

2. Add the Vue Component to Selldone Landing Builder

Once your Vue component is ready, integrating it into your landing page is straightforward:

1. Open Selldone Landing Builder:

• Navigate to the page where you want to add the custom component.

2. Drag and Drop a Raw Section:

• Locate the Raw Section in the builder's sidebar.
• Drag and drop it into your desired location on the page.

3. Insert Your Code:

• Click on the newly added Raw Section.
• Select the Code option from the top menu.
• Choose Vue as the code type.
• Paste your generated Vue component code into the editor.

4. Save and Preview:

• After pasting the code, save your changes.
• Preview the landing page to see your custom Vue component in action.

 

3. Customize and Enhance

Your custom Vue component is now part of your landing page! You can further customize it by:

• Modifying Properties: Adjust the default properties in the

  props
  

  section to change titles, colors, sizes, and more.
• Styling with CSS Variables: Utilize CSS variables for easy styling adjustments without altering the core component structure.
• Integrating Additional Vuetify Components: Enhance functionality by adding more Vuetify UI elements as needed.

Result of top code:

4. Understanding the Component Structure

To make the most out of your custom Vue component, it's essential to understand its structure. Here's a breakdown of the key sections:

Section	Description
<template>	Defines the HTML structure using Vuetify components to ensure a responsive design.
<script>	Contains the Vue component configuration, including props, data, methods, and lifecycle hooks.
Props	Allow customization of the component from the parent, enabling dynamic content and styles.
Data	Manages the component's reactive state, such as loading indicators and product data.
Methods	Handles data fetching, event handling, and dynamic styling based on user interactions.
Lifecycle	Initializes data fetching when the component is created, ensuring content is loaded appropriately.

Some manual adjustments will be necessary, so I’ll highlight a few here:
set cols=”3”

 

Set max width

 

 

Use native <u-price> component for well-formatted price:

We can customize our element by clicking on it and selecting "Change Properties." This allows us to graphically modify the variables defined through the properties in the code. The system automatically generates this user interface based on those properties.

ChatGPT : https://chatgpt.com/share/6739d3b4-b070-800f-96bc-87d9e2c6ce94

We can drag and drop Raw HTML components into other sections:

5. Flexibility: Plain HTML or Vue3 with Vuetify

Depending on your project requirements and familiarity, you can choose between:

• Plain HTML: For simpler components without the need for advanced interactivity.
• Vue3 with Vuetify: For more complex, interactive components that benefit from Vuetify's extensive UI library.

Both options offer high customization levels, allowing you to tailor the component to your specific needs.

Tips for Success

• Test Responsiveness: Ensure your component looks great on all devices by testing across different screen sizes.
• Optimize Performance: Use efficient data fetching and state management to maintain fast load times.
• Leverage Vuetify: Take advantage of Vuetify's rich component library to enhance your component's functionality and aesthetics.
• Keep It Modular: Design components that can be easily reused and maintained, promoting scalability.

 

 

Request ChatGPT to add more dynamic values: https://chatgpt.com/share/6739d3b4-b070-800f-96bc-87d9e2c6ce94

Tips:

Reset Customization After Updating Vue Code: After making changes to your Vue code, it's recommended to reset the customization to ensure that all updates are properly applied.

Troubleshooting Display Issues: If your changes don't appear in the customization menu, try saving the page and refreshing it. This can help load the latest updates and display your modifications correctly.

We can add a skeleton loader to the code:

Integrating custom Vue components into your Selldone Landing Builder pages opens up a world of possibilities for creating engaging and responsive landing pages. Whether you opt for plain HTML or leverage the power of Vue3 and Vuetify, the flexibility and customization options are immense. Start crafting your unique components today and watch your landing pages transform into dynamic, high-converting assets!

How to Add a Custom Component to Another Section

Adding your custom Vue component to a different section in the Selldone Landing Builder is simple and can be done in two easy ways.

• First, you can drag and drop the Code Element from the Elements menu on the left side of the builder into the section where you want your component to appear. After placing it, click on the Code Element, select the Code option from the top toolbar, choose Vue as the code type, and then paste your custom Vue code.
• Alternatively, if you already have a Code Element on your page, you can move it to a new location. To do this, go to the Navigation menu on the left, find the existing Code Element, and simply drag it to the desired position within your target section.

For a better understanding of these methods, watch the following video tutorial: