Let's begin
Thank you for buying the Malabo admin template
Main Dependencies
- Nuxt - 4.1.2
- Node - 24.11.1
- SCSS
Malabo Nuxt Theme is a pure Nuxt 4 theme — yes, you read that right, it's No jQuery! This Nuxt admin theme includes all the features and functionality you need, with easy integration into your project. The Malabo theme documentation will help you understand Nuxt from the basics all the way to building a complete, real-time application.
Follow the documentation carefully to solve most issues in minutes. If you still can’t find a solution after following the docs, you can raise a support ticket for your issue at pixelstrap.freshdesk.com.
This Documentation will guide you through all the concepts used in the theme and hopefully answer all your queries. Below are the things that you are going to find in this documentation.
Folder Structure
Before starting any project, it is very important to set a folder structure. It helps us organize our code neatly and makes it easier for the future developers to modify anything in the theme.
Installation Guide
To make sure that you can setup your project smoothly, we have provided an Installation guide for you to follow. This Installation guide contains everything from installing node till running your project. Do not miss any steps while creating a new project or else you might have to start over again.
Make sure that you go through the explanation of folder structure used in our theme, it will become easier for you to make any modifications. If you want , you could follow our folder structure in your project , that way if you encounter any difficulties in your project , you can refer our theme.
Theme Layouts
With multiple customization options , we can create many different page layouts. Its upto your imagination , how you use the options and implement them in your website. But to give you a starting point , we have used all the available customization options and made a few different layouts. You can use them to get some inspiration for you own website or use them as they are.
Theme Customizer
To make your theme look unique and as per you taste, we have provided theme customizer, through which you can make changes according to your preference within the theme. And we have also provided a guide on how the customizer works. You can refer it to make your own custom changes. There are 4 different parts of the theme customizer:
Sidebar
To navigate through the website, a sidebar is must. But with increasing page , number of lines required to display all the links in sidebar increases rapidly. To make it shorter we have used looping concepts. You can refer our guide to sidebar to learn more about how our code logic works.
Dark Layout
It is essential for us to maintain good user experience, and even when they are browsing through your website at night, that experience should not be ruined just because your website is too bright. To make sure our user gets the best experience at any time of the day, we have added the dark mode. Go through our Guide to dark layout to know more about it.
SCSS Structure
When the theme is this big, there is a vast amount of style written. To organize such amount of code , a proper folder structure becomes necessary. This way it becomes easier for us to find and modify styles of a component without much hassle. You could refer to our explanation on the scss folder structure and use it in your project to keep your styles more managed.
Creating New Page
When you have completed setting up your project, you might require to add more pages. A short guide on how to create new pages have been given in this documentation. You can refer it and start adding your own pages.
Routing Guide
One of the most important parts of any Nuxt application is routing.
In Nuxt 4, routing is file-based — meaning your pages are automatically
generated from the /pages directory. Without routing, your
application cannot navigate between pages.
Routing is responsible for defining paths in your website and linking them to the correct page components. An extensive guide has been prepared on this topic — go through it and follow the steps to create your own routes and navigation structure.
Loader
Content of the website takes some time to load the content when some they are fetching the data from an api or loading a vast amount of styles. This delay can become a reason for user's bad experience with your website. To avoid this we have added a loader. When the content is loading in the background we could just show loader to indicate that our content is still loading. Have a look at our loader guide to see how we have implemented loader logic in our theme.
Multi Language Guide
We will have many users accross the world, and they will be comfortable reading through your website if the language used is their native language. Multiple languages functionality has been provided so according to the users you can implement options for many different languages.
Components
A good practice while coding is to Never Repeat Your Code. Which means once you write some lines of code, you should avoid writing same lines of code somewhere else. Make those lines of code in such a way that you can use it multiple times throughout your website. We have created such components and given a detailed explanation about them. Make sure to go through it.
Apps
To manage admin side functionalities we have created a few different apps like Chat Application , To-Do application, Email Application etc... To find out what other applications we have provided , see our Apps Guide.