Dreams Rent - Online Documentation.

Dreams Rent, Car Rental Booking Template

Dreams Rent is a highly reliable and trustworthy car rental platform that operates globally, providing customers with access to a wide range of vehicles for rental purposes. With a user-friendly website and a seamless booking process, DreamsRent makes it easy for individuals and businesses to rent cars for personal or commercial use.

Version : v1.4.3

Author : Dreams Technologies

Support via email : support@dreamstechnologies.com

Buy Now

Introduction

Dreamsrent provides a multiple on-demand serice based boostrap html template. Dreamsrent template built into LTR format for all regional Suppport.

Requirement

Technologies

Vue

Node

System Requirements

vuejs version >= 3.5.32
Node js Package
Node version = ^24x
Visual Studio Code
Terminal

Core Features

Build with vuejs 3.5.32
Build with vuejs Scripts
Create vuejs App Supported
Hooks based architecture
Pure Components Based vuejs
Fully Responsive Design
Multiple Layouts
User friendly design
Compatible Browsers: Firefox, Safari, Opera, Edge, Chrome
Json format used
Easy to Customize with css Variables

File Structure

Project Overview

The project follows a modular structure with clear separation of concerns.

dreamsrent/
└── vue/
    ├── template/
    │   ├── public/
    │   │   └── favicon.svg
    │   │
    │   ├── src/
    │   │   ├── assets/
    │   │   │   ├── css/
    │   │   │   ├── fonts/
    │   │   │   ├── img/
    │   │   │   ├── json/
    │   │   │   └── scss/
    │   │   │
    │   │   ├── components/
    │   │   ├── router/
    │   │   ├── views/
    │   │   ├── App.vue
    │   │   └── main.js
    │   │
    │   ├── index.html
    │   ├── package.json
    │   ├── README.md
    │   └── vite.config.js
    │
    └── template-rtl/
        ├── public/
        │   └── favicon.svg
        │
        ├── src/
        │   ├── assets/
        │   │   ├── css/
        │   │   ├── fonts/
        │   │   ├── img/
        │   │   ├── json/
        │   │   └── scss/
        │   │
        │   ├── components/
        │   ├── router/
        │   ├── views/
        │   ├── App.vue
        │   └── main.js
        │
        ├── index.html
        ├── package.json
        ├── README.md
        └── vite.config.js

Installation Guide

Node.js and NPM :
If NodeJS is not installed then download it from https://nodejs.org/. NPM comes bundled with Node.js

Vue-cli :

Open the terminal in your root directory, By running the following command you will get a vue-cli:

npm install -g @vue/cli

NPM Packages

Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

npm install

Application Run

For running a project,run the command:

npm run dev

Plugins Install

To install any plugins in your application, you have to run the following command

npm install plugin_name

Local Serve

Now you can run this Template in any web browser from your PC or Laptop.
vue/template is a folder name, you can change as per your wish how you used the folder

http://localhost:3000/

Build Project

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

How to change Logo?

You can change the logo or replace it from img folder or you can edit it from HTML file.

<div class="header">
	<a href="index.html" class="logo">
		<img src="assets/img/logo.svg" alt="logo">
	<a>
</div>

Fonts

The default font is Inter. To change the font:

Update the @import URL and the --font-family-primary variable in style.css:

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,900&display=swap');


	body {
		font-family: 'Fira Sans', sans-serif;
	}

Color System

The design token variables are defined in the @theme block of your CSS file. Here are the primary color tokens:

Background Color Change

You can change the header background color in style.css as per your wish


	.header {
		background: #fff;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		height: 60px;
	}

Dark Mode

How it Works

Dark mode is controlled by a theme attribute/class on the root element. When activated, all design tokens are overridden to dark variants.

The theme is controlled by the data-theme attribute on the <html> element:

<html lang="en" data-theme="dark">

Dark mode styles are defined in the [data-theme=dark] block in style.css:

[data-theme=dark] {
	--color-dark: #E6E6E6;
	--color-light: #131214;
	--color-white: #090212;
}

RTL Support

To enable Right-to-Left (RTL) layout, add the dir="rtl" attribute to the <html> tag:

<html lang="ar" dir="rtl">

Tailwind CSS handles RTL layout transformations automatically when the dir attribute is set. All margin, padding, and positioning utilities adapt to the RTL direction.

RTL Demo

An RTL demo page is available at rtl.html in the HTML version for reference.

Icons

Use Font Awesome icons with spesific class


	<i class="fas fa-times"></i>
	<i class="fas fa-chevron-down"></i>
	<i class="fa-regular fa-user"></i>

License

Dreamsrent is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Credits

Plugin Name	URL
Bootstrap	https://getbootstrap.com/docs/
Bootstrap-vue-3	https://www.npmjs.com/package/bootstrap-vue-3
Fontawesome	https://www.npmjs.com/package/@fortawesome/fontawesome-free/
Fullcalendar	https://www.npmjs.com/package/fullcalendar
Vue3-apexcharts	https://www.npmjs.com/package/vue3-apexcharts
Vue3-perfect-scrollbar	https://www.npmjs.com/package/vue3-perfect-scrollbar
Vue DatePicker	https://www.npmjs.com/package/vue3-datepicker
Vue3-carousel	https://www.npmjs.com/package/vue3-carousel
Vue3-select2-component	https://www.npmjs.com/package/vue3-select2-component
Vue-easy-lightbox	https://www.npmjs.com/package/vue-easy-lightbox

Support

Need Support?

If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com

Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.

Contact Support

Important Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.

Custom Work

Do you need a customized application for your business?

If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.

Don't Miss Out on the Benefits of Customization!

Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.

Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!

We'll tailor the application to meet your specific needs and preferences.

We will upload your website to the server and ensure it is live.

Book an Appointment Get a Free Quote

Thank You

Thank you once again for downloading Dreamsrent - Vuejs Template.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link

Documentation