Introduction

Samply is a fully featured premium admin dashboard template in Vue Js with developer-friendly codes.

📁 Folder & Files Structure

├── public
    ├── src
        ├── assets
        ├── components
        ├── helpers
        ├── locales
        ├── router
        ├── state
        ├── views
        ├── app.config.json
        ├── App.vue
        ├── i18n.js
        └── main.js
    ├── .browserslistrc
    ├── babel.config.js
    ├── package.json
    ├── README.md
    ├── vue.config.js
    ├── yarn.lock
    ├── .env
    └── .env.production
    

Fake-backend & Firebase setup

Default we have set fake-backend authentication in this template. You can simply change to firebase or fakebackend by changing in .env file.
Fake-backend : VUE_APP_DEFAULT_AUTH=fakebackend

To setup firebase authentication fill the below details in the .env file.
Firebase : VUE_APP_DEFAULT_AUTH=firebase

VUE_APP_DEFAULT_AUTH=firebase
VUE_APP_APIKEY=
VUE_APP_AUTHDOMAIN=
VUE_APP_DATABASEURL=
VUE_APP_PROJECTId=
VUE_APP_STORAGEBUCKET=
VUE_APP_MESSAGINGSENDERID=
VUE_APP_APPId=
VUE_APP_MEASUREMENTID=

Multi Language Setting

    languages = [{
        flag: require("~/assets/images/flags/arabic.jpg"),
        language: "ar",
        title: "Arabic",
    }];

Prerequisites

Please follow below steps to install and setup all prerequisites:

• Nodejs

  Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 14.

• Git

  Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

• Install Prerequisites

  Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Light Version

src/state/modules/layout.js update the state object parameter layoutMode: "light".

Dark Version

src/state/modules/layout.js update the state object parameter layoutMode: "dark".

RTL Version

src/state/modules/layout.js update the state object parameter layoutMode: "light".
Als update the below code in the: src/App.vue in mounted method:

mounted() {
    document.querySelector("html").setAttribute('dir', 'rtl');
}

and add the below scss in the src/assets/scss/app.scss:-
@import "custom/rtl/bootstrap-rtl";
@import "custom/rtl/components-rtl";
@import "custom/rtl/float-rtl";
@import "custom/rtl/general-rtl";
@import "custom/rtl/pages-rtl";
@import "custom/rtl/plugins-rtl";
@import "custom/rtl/spacing-rtl";
@import "custom/rtl/structure-rtl";
@import "custom/rtl/text-rtl";