Vue.js + Bootstrap v5

Vue.js + Bootstrap v5 guide for Trezo.

Overview

Trezo is built on the powerful Vue.js framework and Bootstrap v5, offering a fast, dynamic, and fully responsive solution for modern web applications. Leveraging Vue.js’s reactive data binding and component-based architecture ensures smooth performance and seamless navigation, while Bootstrap v5 provides a flexible and robust design system with extensive customization options. The project emphasizes modularity and component-driven development, enabling scalable and maintainable code. With pre-built components, utility classes, and a mobile-first design philosophy, the application is crafted to deliver a streamlined and engaging user experience across devices.

Key Features of Vue.js:

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It is designed to be adaptable, incrementally adoptable, and developer-friendly, making it suitable for projects of varying complexity—from simple UI components to large-scale, feature-rich web applications.

Reactive Data Binding: Vue.js uses a reactive data system that automatically updates the DOM when the application's state changes, simplifying state management and reducing boilerplate code.
Component-Based Architecture:: Applications are built using reusable components, enabling modularity, scalability, and maintainability.
Virtual DOM: Vue.js employs a virtual DOM for efficient rendering and updates, optimizing performance by applying changes to the real DOM only when necessary.
Two-Way Data Binding: With the v-model directive, Vue.js simplifies form handling by synchronizing the data between the model and the view.
Directives: Vue.js includes powerful directives like v-for, v-if, and v-bind to handle loops, conditional rendering, and data binding efficiently.
Vue Router: Provides routing capabilities for creating single-page applications with dynamic, nested, and asynchronous route management.

Why Use Vue.js?

Easy to learn and start with, especially for developers familiar with HTML, CSS, and JavaScript.
Flexible and scalable, suitable for small components or full-fledged applications.
Active community support and extensive documentation.

Vue.js is popular among developers for its simplicity, flexibility, and versatility, making it a top choice for modern web development.

Local Development Environment Setup

In order to kickstart the development of your web app with Trezo, the very first thing is to setup an Vue.js development environment.

Node.js & npm

Node.js and NPM: If NodeJS is not installed then download it from https://nodejs.org/ Google Fonts. NPM comes bundled with Node.js
Now check the version if everything is installed nicely like open the terminal/bash/command prompt and run node -v npm -v if you get any number then everything is just fine.

Open the terminal and run the command npm install -g @vue/cli. To get more help on the Vue.js CLI check out the Vue.js CLI Guide.

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.

Development Server

Run npm run serve for a dev server. Navigate to http://localhost:8080/. The app will autometically reload if you change any of the source files.

Building

Run npm run build to build the project.

Pages Info

All Pages

Pages Components

All Pages components are there & based on the pages name you will find the components folders inside components.

Dependencies

Here are the dependencies list which being used in the Trezo Nuxt.js Template:

package.json

"dependencies": {
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@fullcalendar/vue3": "^6.1.15",
    "@vueform/slider": "^2.1.10",
    "@vueup/vue-quill": "^1.2.0",
    "@vueuse/core": "^11.2.0",
    "apexcharts": "^4.0.0",
    "bootstrap": "^5.3.3",
    "bootstrap-vue-next": "^0.25.13",
    "core-js": "^3.8.3",
    "echarts": "^5.5.1",
    "feather-icons": "^4.29.2",
    "prismjs": "^1.29.0",
    "quill": "^2.0.2",
    "swiper": "^11.1.14",
    "typescript": "^5.6.2",
    "vue": "^3.5.12",
    "vue-echarts": "^7.0.3",
    "vue-router": "^4.4.5",
    "vue3-apexcharts": "^1.7.0"
},
"devDependencies": {
    "@types/feather-icons": "^4.29.4",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.80.6",
    "sass-loader": "^10.5.2",
    "unplugin-vue-components": "^0.27.4"
}

Fonts Used

By default, the template loads Inter font from Fontshare Web Font Services. The font can be changed based on the website needs. Google Fonts

You will find the font code in the "style.scss file: src/assets/scss/style.scss

**
- Default CSS
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");

/* You can add global styles to this file, and also import other style files */
// Fonts
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

// Components CSS
@import "./components/global";
@import "./components/sidebar-menu";
@import "./components/main-content";
@import "./components/header-area";
@import "./components/footer-area";
@import "./components/status-box";
@import "./components/sales-by-locations";
@import "./components/default-table";
@import "./components/pagination";
@import "./components/calendar";
@import "./components/chat";
@import "./components/timeline";
@import "./components/priceing";
@import "./components/products";
@import "./components/rtl";
@import "./components/dark-mode";
@import "./components/sidebar-dark";
@import "./components/header-dark";
@import "./components/footer-dark";
@import "./components/card-style";
@import "./components/card-bg-style";
@import "./components/fluid-boxed-style";
@import "./components/landing-page";
@import "./components/analytics";
@import "./components/nft";
@import "./components/marketing";

How to Run The SCSS File

Please open the file Visual Studio Code Editor. And follow the video tutorial.

Here the Link: Watch this video on YouTube

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

Google Fonts

Inter

IconFont

Packages

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!

Vue.js + Vuetify

Vue.js + Tailwind CSS